vue.js在线引入、v-bind、v-model、v-on、v-for

1、js文件动态引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

2、v-for：循环，(item,key,index)位置不能随意改变，否则内容显示出错！

<!-- 注意：(item,key,index)位置不能改变，否则内容显示出错！ -->
<div id="app">
    <ul>
        <li v-for="(item, key, index) in items">这是第{{index+1}}个字母：{{item}}，键为{{key}}</li>
    </ul>
</div>

<script>  
new Vue({  
    el: '#app',  
    data: {
        items: {
            first: "A",
            second: "B",
            third: "C"
        }
    }  
})  
</script>

 

3、v-model：vue实例中的data数据和dom元素的数据一致，实现数据的双向绑定，用于监听用户的输入事件，只能作用于<input>、<textarea>、<select>等表单元素

<div id="app">
    <p>单个复选框：</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <p>多个复选框：</p>    
    <input type="checkbox" id="iphone" value="iphone" v-model="checkedNames">
    <label for="iphone">iPhone</label>
    <input type="checkbox" id="xiaomi" value="xiaomi" v-model="checkedNames">
    <label for="xiaomi">小米</label>
    <input type="checkbox" id="huawei" value="huawei" v-model="checkedNames">
    <label for="huawei">华为</label>
    <span>选择的值: {{ checkedNames }}</span>
</div>

<script>
new Vue({
    el: "#app",
    data:{
        checked: false,
        checkedNames: []
    }
})
</script>

 

4、v-bind：属性绑定，使其显示的内容跟data设置的一致

<div id="app">
    <h2 v-bind:id="vid" :class="vclass" :title="vtitle">vue 多属性绑定</h2>
</div>
	
<script>
new Vue({
    el: "#app",
    data: {
        vid:"myid",
        vclass: "myclass",
        vtitle:"vue 多属性绑定"
    }
})

 

5、v-on：监听dom事件，处理方法在methods属性中执行

<div id="app">
    <a href="http:://www.mingtern.com" v-on:click="say('hello', $event)">{{message}}</a>
</div>

<script>  
new Vue({  
    el: '#app',  
    data: {
        message: "点击看看"
    },
    methods: {
        say: function(value, e){
            e.preventDefault();
            alert(value);
        }
    }    
})  
</script>