Vue.js实战：指令与数据绑定-优快云博客

Vue-CDN

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--    <div id="vue-app">
        <h1>{{ name }}</h1>
        <p>{{ job }}</p>
        <p>{{ greet('afternonn') }}</p>
        <a v-bind:href="website">web开发</a>
        <input type="text" v-bind:value="job">
        <div v-html="websiteTag"></div>
    </div>-->

    <!--<div id="vue-app">
        <h1> Events </h1>
        <button v-on:click.once="add(1)">涨一岁</button>
        <button @click="substract(1)">减一岁</button>
        <button @dblclick="add(10)">涨十岁</button>
        <button v-on:dblclick="substract(10)">减十岁</button>
        <p> My age is {{age}}</p>

        <div id="canves" v-on:mousemove="updateXY">
            {{x}},{{y}}<span v-on:mousemove.stop="">Stop move</span>
        </div>
        <a v-on:click.prevent="alert" href="http://www.baidu.com">The BAIDU</a>
    </div>-->

<!--    <div id="vue-app">
        <h1>键盘Events</h1>
        <label>姓名：</label>
        <input type="text" v-on:keyup.enter="logName">
        <label>年龄：</label>
        <input type="text" v-on:keyup.alt.enter="logAge">
    </div>-->

<!--    <div id="vue-app">
        <h1>双向数据绑定：/input/select/textarea</h1>
        <label>姓名：</label>
        &lt;!&ndash;<input ref="name" type="text" v-on:keyup="logName">&ndash;&gt;
        <input ref="name" type="text" v-model="name">
        <span>{{name}}</span>
        <label>年龄：</label>
        &lt;!&ndash;<input ref="age" type="text" v-on:keyup="logAge">&ndash;&gt;
        <input ref="age" type="text" v-model="age">
        <span>{{age}}</span>
    </div>-->

<!--    <div id="vue-app">
        <h1>Computed 计算属性</h1>
        <button v-on:click="a++">Add to A</button>
        <button v-on:click="b++">Add to B</button>
        <p>A - {{a}}</p>
        <p>B - {{b}}</p>
        <p>Age + A = {{addToA}}</p>
        <p>Age + B = {{addToB}}</p>
    </div>-->

<!--    <div id="vue-app">
        <h1>动态 CSS Class</h1>

&lt;!&ndash;        <h2>示例1</h2>
        <div v-bind:class="{changeColor:changeColor}" v-on:click="changeColor=!changeColor">
            <span>Herry</span>
        </div>&ndash;&gt;

        <h2>示例2</h2>
        <button v-on:click="changeColor = !changeColor">change color</button>
        <button v-on:click="changeLength = !changeLength">change color</button>
        <div v-bind:class="compClasses">
            <span>Herry</span>
        </div>
    </div>-->

<!--    <div id="vue-app">
        <h1>v-if条件</h1>
        <button v-on:click="error=!error">Toggle Error</button>
        <button v-on:click="success=!success">Toggle Success</button>

&lt;!&ndash;        <p v-if="error">网络连接错误：404</p>
        <p v-else-if="success">网络连接成功：200</p>&ndash;&gt;

        <p v-show="error">网络连接错误：404</p>
        <p v-show="success">网络连接成功：200</p>
    </div>-->

    <div id="vue-app">
        <h1>v-for循环</h1>

        <ul>
            <li v-for="c in characters">
                {{c}}
            </li>
        </ul>

        <ul>
            <li v-for="(user,index) in users">
                {{index}}.{{user.name}}-{{user.age}}
            </li>
        </ul>

        <template v-for="(user,index) in users">
            <h3>{{index}} . {{user.name}}</h3>
            <p>Age - {{user.age}}</p>
        </template>

        <template v-for="(user,index) in users">
            <div v-for="(val,key) in user">
                <p>{{key}}-{{val}}</p>
            </div>
        </template>
    </div>

    <script src="app.js"></script>
</body>
</html>

app.js

/*
new Vue({
    el:"#vue-app",
    data:{
        name:"sh0rk",
        job:"web开发",
        website:"https://sh0rk.cn",
        websiteTag:"<a href='https://www.baidu.com'>BaiDu</a>"
    },
    methods:{
        greet:function(time){
            return "Good "+time+" "+this.name+"!";
        }
    }
});*/

/*new Vue({
    el: "#vue-app",
    data: {
        age: 30,
        x:0,
        y:0
    },
    methods: {
        add:function (inc) {
            this.age+=inc;
        },
        substract:function(dec){
            this.age-=dec;
        },
        updateXY:function(event){
            // console.log(event);
            this.x = event.offsetX;
            this.y = event.offsetY;
        },
        stopMoving:function(event){
            event.stopPropagation();
        },
        alert:function(){
            alert("Hello World");
        }
    }
});*/

/*new Vue({
    el:"#vue-app",
    data:{

    },
    methods:{
        logName:function(){
            console.log("你正在输入名字！")
        },
        logAge:function(){
            console.log("你正在输入年龄！")
        },
    }
});*/

/*new Vue({
    el:"#vue-app",
    data:{
        name:'',
        age:''
    },
    methods:{
        logName:function(){
            // console.log("你正在输入名字！")
            // this.name = this.$refs.name.value;
        },
        logAge:function(){
            // console.log("你正在输入年龄！")
            // this.age = this.$refs.age.value;
        },
    }
});*/

/*new Vue({
    el:"#vue-app",
    data: {
        a: 0,
        b: 0,
        age: 30
    },
    methods:{
/!*        addToA:function(){
            console.log("Add to A");
            return this.a+this.age;
        },
        addToB:function(){
            console.log("Add to B");
            return this.b+this.age;
        }*!/
    },
    computed:{
        addToA:function(){
            console.log("Add to A");
            return this.a+this.age;
        },
        addToB:function(){
            console.log("Add to B");
            return this.b+this.age;
        }
    }
});*/

/*new Vue({
    el:"#vue-app",
    data:{
        changeColor:false,
        changeLength:false
    },
    methods:{

    },
    computed:{
        compClasses:function(){
            return {
                changeColor:this.changeColor,
                changeLength: this.changeLength
            }
        }
    }
});*/

/*new Vue({
    el:"#vue-app",
    data:{
        error:false,
        success:false
    },
    methods:{

    }
});*/

new Vue({
    el:"#vue-app",
    data:{
        characters:["apple","haha","don't"],
        users:[
            {name:"herry",age:30},
            {name:"app",age:3},
            {name:"sdfa",age:25},
        ]
    },
    methods:{

    },
    comuted:{

    }
});

style.css

#canves{
    width: 600px;
    padding: 200px 20px;
    text-align: center;
    border: 1px red solid;
}

span{
    background: red;
    display: inline-block;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
}

.changeColor span{
    background: green;
}

.changeLength span:after{
    content: "length";
    margin-left: 10px;
}

Vue-CDN Demo

Vue-CDN