1. v-bind
v-bind指令可以在其名后边带一个参数(通常是html元素的特性:例class,href,title等),中间用冒号隔开。
例:
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停上面,会查看次标题
</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
//model:数据
message: "new cool!"
}
});
</script>
</body>
可以简写成冒号。[:]
- 对象语法:
//进行类切换的例子
<div id="app">
<!--当data里面定义的isActive等于true时,is-active这个类才会被添加起作用-->
<!--当data里面定义的hasError等于true时,text-danger这个类才会被添加起作用-->
<div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
渲染结果:
<!--因为hasError: false,所以text-danger不被渲染-->
<div class = "is-active"></div>
- 数组语法:
<div id="app">
<!--数组语法:errorClass在data对应的类一定会添加-->
<!--is-active是对象语法,根据activeClass对应的取值决定是否添加-->
<p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
activeClass: false,
errorClass: 'text-danger'
}
})
</script>
渲染结果:
<!--因为activeClass: false,所以is-active不被渲染-->
<p class = "text-danger"></p>
- 直接绑定对象:
<div id="app">
<!--在vue实例的data中定义了classObject对象,这个对象里面是所有类名及其真值-->
<!--当里面的类的值是true时会被渲染-->
<div :class="classObject">12345</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject:{
'is-active': false,
'text-danger':true
}
}
})
</script>
渲染结果:
<!--因为'is-active': false,所以is-active不被渲染-->
<div class = "text-danger"></div>
2. v-if, v-else-if (注意vue2.x之后才有的新特性) , v-else
<body>
<!--view层 模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='B'">D</h1>
<h1 v-else>C</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
//model:数据
type: 'A'
}
});
</script>
</body>
页面显示结果:A
3. v-for
<body>
<!--view层 模板-->
<div id="app">
<li v-for="item in items">
<!--item是作为数组循环出来的暂时变量,类似foreach 循环一样-->
{{item.message}}
</li>
<li v-for="(item,index) in items">
<!--index是循环出来的下标,从0开始-->
{{item.message}}----{{index}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
//model:数据
items: {
{message: '数据A'},
{message: '数据B'}
}
}
});
</script>
</body>
4. v-on
v-on主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。
<body>
<!--view层 模板-->
<div id="app">
<!--绑定点击事件,v-on后边跟事件触发,引号是方法名称-->
<button v-on:click="sayHi">点击</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
//model:数据
message: "数据A"
},
methods:{//方法必须定义在vue的methods对象当中,v-on:事件 注意 sayHi是方法名称
sayHi: function(event){
alert(this.message);
}
}
});
</script>
</body>
可以简写为@
<div id="app">
<button @click="consoleLog"></button>
</div>
<script>
var app = new Vue({
el: '#app',
methods:{
consoleLog:function (event) {
console.log(1)
}
}
})
</script>
事件修饰符
- .stop 阻止事件继续传播
- .prevent 事件不再重载页面
- .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
- .self 只当在 event.target 是当前元素自身时触发处理函数
- .once 事件将只会触发一次
- .passive 告诉浏览器你不想阻止事件的默认行为
示例:
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
注意:
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而v-on:click.self.prevent 只会阻止对元素自身的点击。
5. v-model
这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
- 输入框:
<body>
可以实现上边输入,下面数据同步进入
<!--view层 模板-->
<div id="app">
输入:<textarea v-model="message">A</textarea >
显示:{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
//model:数据
message: "数据一"
}
});
</script>
</body>
- 单选按钮:
<body>
可以实现点击选择按钮,下面数据同步输出单选按钮中的value值
<!--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>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
//model:数据
message: ""
}
});
</script>
</body>
- 下拉列表:
<body>
可以实现选择到某一个选项,下面数据同步输出下拉列表中的值
<!--view层 模板-->
<div id="app">
下拉框:
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>
您选中的是:{{selected}}
</p>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
//model:数据
selected: ""
}
});
</script>
</body>