Vue的指令及其用法
指令
指令是绑定在dom属性上的
这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）
Vue 2.0 统称为 ‘指令’
指令是用一个 v-xxx 表示
指令是用来操作dom
Vue中不允许直接操作dom
mustache语法 — 属性写法 的属性值是直接写数据的，不需要使用 {{ }}
v-html
可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）
v-text
可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerText）
<body>
<div id="app">
<p v-html = "h"></p>
<p v-text = "h"></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
h: ' hello Vue.js
',
flag: true
}
})
</script>
条件渲染的指令
v-show
可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）
v-if
可以控制一个dom的存在与否（ 创建 和 销毁 ）
v-if vs v-show 区别
- v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
- v-show 操作的是dom元素的display属性
- v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
- v-show 只能写一个单路形式
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if
v-else
可做双路分支的一个判断
v-if
v-else
v-else-if
可做多路分支的一个判断
<body>
<div id="app">
<h3> v-show </h3>
<p v-show = "showFlag"> v-show指令 </p>
<hr>
<h3> v-if - 单路分支 </h3>
<p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
<h3> v-if - 双路分支 </h3>
<p v-if = "ifFlag"> 双路分支 成立 </p>
<p v-else> 双路分支不成立 </p>
<h3> v-if - 多路分支 </h3>
<p v-if = " type === 'A'"> A </p>
<p v-else-if = " type === 'B'"> B </p>
<p v-else> C </p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',//给跟实例一个模板（ 挂载 ）
data: {
showFlag: true,
ifFlag: false,
type: 'A'
}
})
</script>
v-for
Vue中的循环遍历
1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
3. json类型数据
4. 嵌套类型数据
key:
给每一个循环的列表添加一个唯一的标识
使用指令 v-bind 来绑定 key
<div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>
如果有id，那么我们就使用id，如果没有，我们才会选择index
<body>
<div id="app">
<h3> 数组 </h3>
<ul>
<li v-for = " (item,index) in arr ">
<p> item :{{ item }} -- index: {{ index }}</p>
</li>
</ul>
<hr>
<h3> 对象 </h3>
<ul>
<li v-for = "(item,key,index) in obj">
<p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
</li>
</ul>
<hr>
<h3> json </h3>
<ul>
<li v-for = "(item,index) of json">
<p> id: {{ item.id }} </p>
<p> task: {{ item.task }} </p>
<p> {{ index }} </p>
</li>
</ul>
<hr>
<h3> 嵌套 </h3>
<ul>
<li v-for = " item in lists ">
<p> id: {{ item.id }} </p>
<ul>
<li v-for = "todo in item.todos">
todos中的数据 -- {{ todo }}
</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
arr: [1,2,3,4],
obj: {
id: 1,
name: '程序员',
sex: 'man',
age: 18
},
json: [
{
id: 1,
task: '敲代码1'
},
{
id: 2,
task: '敲代码2'
}
],
lists: [
{
id: 1,
todos: {
id: 1,
name: '张三'
}
},
{
id: 2,
todos: {
id: 2,
name: '李四'
}
}
]
}
})
</script>
v-bind
单项数据绑定： 将一个数据绑定在一个dom的属性上
简写
<div v-for = " (item,index) in lists" :key = " item.id "></div>
类名绑定
vue中如何给dom添加类名
1. 直接在dom上绑定类名
2. vue中类名绑定 - 对象形式
目的： dom身上属性class 要和 数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样
<p :class = "{ size,bg_color }"></p>
//size是自定义的属性， 它的属性值是undefined， 相当于是false
<p :class = "{ size: true, bg_color: true }"></p>
//size也是自定义属性，他的属性是true,那么就会加上去
<p :class = "{ [s]: true, [bg_color]: true }"></p>
格式： v-bind:class = "{ 属性： boolean }"
格式： v-bind:class = "{ [data]： boolean }"
3. vue中类名绑定的形式 - 数组的形式 【 推荐 】
格式： v-bind:class = "[ 数据 ]"
4. 类名绑定不会覆盖原先的类名
5. 为什么要绑定类名
指令是用来操作dom
目的： 为了将来通过数据来操作类名，类名操作dom
<style>
.size{
width: 100px;
height: 100px;
}
.bg_color{
background: red;
}
</style>
<body>
<div id="app">
<h3> v-class </h3>
<hr>
<h3> vue中类名添加第一种 </h3>
<p class="size bg_color"></p>
<hr>
<h3> vue中类名添加第二种 - 对象的形式</h3>
<p :class = "{ size: true,bg_color: false }"></p>
<p :class = "{ size: true, bg_color: true }"></p>
<p :class = "{ [s]: true, [bg_color]: true }"></p>
<p :class = "{ [s]: 5>3?true: false, [bg_color]: true }"></p>
<hr>
<h3> vue中类名添加的第三种形式 - 数组形式（ 推荐 ）</h3>
<p :class = "['size','bg_color']"></p>
<p :class = "[ s, bg_color ]"></p>
<p :class = "[ flag? s:'box', bg_color]"></p>
<p :class = "[ flag? s:'box', bg_color]" class = "yyb"></p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
s: 'size',
bg_color: 'bg_color',
flag: true
}
})
var a = {
name: 'yyb'
}
var b = {
name: 'liancheng'
}
</script>
样式绑定
样式的绑定：
v-bind: style = “”
1. 对象的形式
2. 数组的形式
<body>
<div id="app">
<h3> style </h3>
<hr>
<h3> style - 对象形式 </h3>
<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>
<h3> style - 数组的形式 </h3>
<p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>
<p :style = "[ size,bg ]"></p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
size: {
width: '100px',
height: '100px'
},
bg: {
background: 'purple'
}
}
})
</script>
v-on
事件 v-on使用
-
事件源
-
事件绑定形式
-
事件类型
-
事件处理程序
v-on:eventType = " handlerName "
//简写 v-on: --- > @
<body>
<div id="app">
<button v-on:click = "helloHandler"> 点击 </button>
<button @click = "helloHandler"> 点击 </button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
methods: {
// 存放事件处理程序
helloHandler () {
alert( 'hello' )
}
}
})
console.log( 'vm', vm )
</script>
问题： 如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现
分析： 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined
解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象
<body>
<div id="app">
<!-- <button v-on:click = "helloHandler"> 点击 </button> -->
<button @click = "helloHandler( 10,20,$event)"> 点击 </button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
methods: {
// 存放事件处理程序
helloHandler ( a,b,e ) {
console.log( a )
console.log( b )
console.log( e )
}
}
})
console.log( 'vm', vm )
</script>
v-model
双向数据绑定
默认绑定value值
v-model应用于表单元素
<body>
<div id="app">
<input type="text" v-model = "msg">
<p> {{ msg }} </p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js'
}
})
</script>
记得引入Vue.js的cdn或是安装模块来使用
//https://www.bootcdn.cn/