前缀带有v-
,表示他们是vue提供的特殊指令,他们会渲染在DOM上应用特殊的响应式行为。
绑定元素特性
v-bind
<!--视图(view)层-->
<div id="app">
{{message}} <!--绑定信息-->
<span v-bind:title="message">
鼠标悬浮在我这可以看到message动态绑定的信息
</span>
</div>
判断、循环
v-if
、v-else
<!--视图(view)层-->
<div id="app">
<h1 v-if="type===A">A</h1>
<H1 v-else-if="type == B">B</H1>
<h1 v-else>ERROR</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
/* Model层 数据 */
date: {
type:'B'
}
});
</script>
for
<!--第一步,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--视图(view)层-->
<div id="app">
<li v-for="item in items ">
{{item.message}}
</li>
</div>
<script>
var vm = new Vue({
el: '#app',
/* Model层 数据 */
date: {
items:[
{message:'库里'},
{message:'KD'},
{message:'欧文'},
{message:'詹老头'}
]
}
});
</script>
监听事件
v-on
<!--第一步,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--视图(view)层-->
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<script>
var vm = new Vue({
el: '#app',
/* Model层 数据 */
date: {
message: "今天是什么天气"
},
methods: { //方法必须定义在methods对象中
sayHi: function(event){
alert(this.message);
}
}
});
</script>
双向绑定
Vue.js是一个MVVM框架,即数据的双向绑定,当数据发生变化的时候,视图也会发生变化,反之亦然。
可以使用v-model
标签在表单<input>
、<textarea>
、<select>
元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。
<!--第一步,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--视图(view)层-->
<div id="app">
输入文本:<input type="text" v-model="message"> {{message}}
</div>
<script>
var vm = new Vue({
el: '#app',
/* Model层 数据 */
data:{
message:" "
}
});
</script>
<!--第一步,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--视图(view)层-->
<div id="app">
性别:<input type="radio" name="Sex" value="男" v-model="message">男
<input type="radio" name="Sex" value="女" v-model="message">女
<p>
选中了:{{message}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
/* Model层 数据 */
data:{
message:" "
}
});
</script>
<!--第一步,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--视图(view)层-->
<div id="app">
下拉菜单:
<select v-model="selected">
<option value="" disabled>--请选择--</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span>value:{{selected}}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
/* Model层 数据 */
data:{
selected:" "
}
});
</script>