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>