标签：指令 method on() 覆盖 check 调用 methods 创建 数据绑定
1、v-on：用于绑定HTML事件
<div id="app">
<button v-on:click="onClick">点击这里</button>
</div>
在js的methods中加入一个onClick事件：
<script>
var app = new Vue({
el : ‘#app‘,
methods : {
onClick : function(){
console.log("clicked");
}
}
})
</script>
2、v-bind：用于设置HTML属性
<div id="app">
<!-- 全称-->
<a v-bind:href="url">百度</a>
<!-- 简写-->
<a :href="url">百度</a>
</div>
在js的data中赋值url：
<script>
var app = new Vue({
el : ‘#app‘,
data: {
url:"www.baidu.com"
}
})
</script>
3、v-model：在表单控件元素上创建双向数据绑定
<div class="app">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
在js的data中赋值checkedNames：
<script>
new Vue({
el:‘.app‘,
data:{
checkedNames:[]
}
})
</script>
4、v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空，只显示文本不显示标签
<body>
<div id="app">
<p>{{msg1}}</p>
<p v-text="msg1"></p>
<p v-text="msg2"></p>
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
msg1: "这是对应的值",
msg2: "<h1>这是对应的值</h1>"
},
methods: {}
});
</script>
</body>
5、v-html同样是用来显示data中属性的属性值的（数据绑定），此指令不仅可以显示文本内容，还可以显示带标签的内容
<body>
<div id="app">
<p>{{msg1}}</p>
<p v-html="msg1"></p>
<p v-html="msg2"></p>
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
msg1: "这是对应的值",
msg2: "<h1>这是对应的值</h1>"
},
methods: {}
});
</script>
</body>
Vue：v-on、v-bind、v-model、v-text、v-html用法
标签：指令 method on() 覆盖 check 调用 methods 创建 数据绑定
原文地址：https://www.cnblogs.com/hghua/p/13232137.html
