Vue 指令详解
数据类型
- Vue 中用到的数据定义在 data 中。
- data 中可以写
复杂类型的数据。 - 渲染复杂类型数据时，遵守 js 的
语法即可。
内容绑定，事件绑定
v-text 指令
- v-text 会设置标签内所有的内容。
- v-text 通常情况下，接收一个 string 类型。
<div class="app" v-text="message"> </div> <script src="./vue源码/vue.js"></script> <script> var app = new Vue({ el: '.app', data: { message: '你好孟钊' } }) </script> <!-- 拼接：<h2class="app" v-text="message+'!'"></h2> --/> <!-- 拼接：<h2>深圳{{message+"!"}}</h2> --/>
- 设置部分内容可以使用
<h2>深圳{{message}}</h2>，这种方法叫差值表达式。
v-html 指令
- 如果我们直接通过 {{}} 来输出，会将 HTML 代码一起输出。
- 但是我们可能希望按照 HTML 的格式进行解析，并且显示对应的内容。
- 可以使用 v-html 指令：
1）该指令后面往往会跟上一个 string 类型。
2）会将 string 的 HTML 解析出来并且进行渲染。
<div class="app"> <span v-html="message"></span> </div> <script src="./vue源码/vue.js"></script> <script> var app = new Vue({ el: '.app', data: { message: '<h1>你好</h1>' } }) </script>
v-on 指令
为元素绑定事件
- 语法：
<input type="button" value="事件绑定" v-on：click="methods 中的方法"></input>。
- v-on: 可以简写成@。
- 计数器案例
<div id="app"> <h2>当前计数：{{counter}}</h2> <!-- <button v-on:click="counter--">-</button> --> <!-- <button v-on:click="counter++">+</button> --> <button v-on:click="sub">-</button> <button v-on:click="add">+</button> </div> <script src="./vue源码/vue.js"></script> <script> const app = new Vue({ el: '#app', data:{ counter: '0', }, methods: { add: function(){ if(this.counter<10){ this.counter++ }else{ alert('别加了，最大了！') } }, sub: function(){ if(this.counter>0){ this.counter-- }else{ alert('别减了，已经没了！') } } } }) </script>
v-on 补充
- 传递自定义参数，事件修饰符。
- 事件绑定的方法写成
函数调用的形式，可以传入自定义参数。 - 定义方法时需要定义
形参来接收传入的实参。 - 事件的后面跟上
.修饰符可以对事件进行限制。 .enter可以限制触发的按键为回车。
总结
- methods 属性：该属性用于在 Vue 对象中定义方法。
- @click 指令：该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是 methods 中定义的方法）。
- 语法糖：简写。 |名称|作用| |:|:| |click|点击事件| |mouseenter|鼠标移入| |dblclick|鼠标双击事件|
v-model 指令
- 获取和设置表单元素的值（
双向数据绑定）. - 绑定的数据会和表单元素
值相关。 - 绑定的元素⬅➡表单元素的值。
- v-model 原理：
- v-model 其实是一个语法糖，他的背后本质上是包含两个操作。
- v-bind 绑定一个 value 值。
- v-on 指令给当前元素绑定 input 事件。
<div id="app"> <input type="text" v-model="message" @keyup.enter="getM"> <h2>{{message}}</h2> </div> <script src="./vue源码/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message:'黑马程序员' }, methods: { getM:function(){ alert(this.message) } } }) </script>
v-model: radio
- 当存在多个单选框时。
<div id="app"> <label for="male"> <input type="radio" id="male" value="男" v-model="message">男 </label> <label for="famale"> <input type="radio" id="famale" value="女" v-model="message">女 </label> <h2>你的选择是：{{message}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '男' } }) </script>
v-model: checkbox
- 单选框
- v-model 即为布尔值。
- 此时 input 的 value 值并不影响 v-model 的值。
<div id="app"> <label for="agreement"> <input type="checkbox" id="agreement" v-model="agreement">我已阅读并同意以上协议 </label> <button :disabled="!agreement">注册</button> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { agreement: false } }) </script>
2.多选框
- 多个复选框因为要选择多个，所以对应的 data 中属性是一个数组。
- 当选中某一个时，就会将 input 的 value 值添加到数组中。
<div id="app"> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <h2>你的爱好是：{{hobbies}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { hobbies: [] } }) </script>
v-model: select
- 和 checkbox 一样，select 也分单选和多选两种情况。
- 单选：只能选中一个值。
- v-model 绑定的是一个值。
- 当我们选中 option 中的一个时，会将它对应的 value 赋值到 mySelect 中。
<div id="app"> <select name="" id="" v-model="fruit"> <option value="李子">李子</option> <option value="火龙果">火龙果</option> <option value="葡萄">葡萄</option> <option value="哈密瓜">哈密瓜</option> </select> <h2>你选择的水果是：{{fruit}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { fruit: '火龙果' } }) </script>
3.多选：可以选中多个值。
- v-model 绑定的是一个数组。
- 当选中多个值时，就会将选中的 option 对应的 value 添加到数组 mySelects 中。
<div id="app"> <select name="" id="" v-model="fruits" multiple> <option value="李子">李子</option> <option value="火龙果">火龙果</option> <option value="葡萄">葡萄</option> <option value="哈密瓜">哈密瓜</option> </select> <h2>你选择的水果是：{{fruits}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { fruits: [] } }) </script>
值绑定
- 用来给所要操作的元素动态绑定 value 值。
<div id="app"> <select name="" id="" :value="fruits" v-model="fruit" multiple> <option>李子</option> <option>火龙果</option> <option>葡萄</option> <option>哈密瓜</option> </select> <h2>你选择的水果是：{{fruit}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { fruit: [], fruits: [ "李子", "火龙果", "葡萄", "哈密瓜" ] } }) </script>
v-model 修饰符
- lazy 修饰符
- 默认情况下，v-model 默认是在 input 事件中同步输入框的数据的。
- 也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生。
- lazy 修饰符可以让数据在失去焦点或者回车时才会更新。
- number 修饰符
- 默认情况下，在输入框中，无论我们输入的是字母还是数字，都会被当作字符串类型进行处理。
- 但是如果我们希望处理的是数字类型，那么最好是直接将内容当作数字处理。
- number 修饰符可以让在输入框中输入的内容自动转成数字类型。
- trim 修饰符
- 如果输入的内容首尾有很多空格，通常我们希望将其去除。
- trim 修饰符可以过滤内容两边的空格。
v-show 指令
- 根据表达值的真假，切换元素的显示和隐藏。
- 原理是修改元素的 display 值，实现显示隐藏。
- 指令后面的内容，最终都会解析为
布尔值。 - 值为
true元素显示，值为false元素隐藏。
<div id="app"> <input type="button" v-on:click="changeIsShow" value="切换"></input> <img v-show="isShow" src="./images/1.jpg" alt=""> </div> <script src="./vue源码/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { isShow: true, }, methods: { changeIsShow: function () { this.isShow = !this.isShow } } }) </script>
v-if 指令
- 根据表达值的真假，切换元素的显示和隐藏（操纵 DOM 元素）。
- 本质是操纵 DOM 元素来切换显示状态。
- 表达式的值为
true，元素存在于 DOM 树中，为false，从 DOM 树中移除
<div id="app"> <input type="button" value="点击" @click="toggleIsShow"> <p v-if="isShow">黑马程序员</p> </div> <script src="./vue源码/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { isShow: false }, methods: { toggleIsShow: function () { this.isShow = !this.isShow } } }) </script>
v-bind 指令
v-bind 绑定class
- 设置元素的属性（比如：
src，title，class）。
- 语法：
v-bing:属性名=表达式。
- 简写：
:属性名。
- 需要动态的增删 class 建议使用对象的方式。
- 语法：
<!-- 用法一：直接通过 {} 绑定一个类。 --> <h2 :class="{'active': isActive}">Hello World</h2> <!-- 用法二：也可以通过判断，传入多个值。 --> <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2> <!-- 用法三：和普通的类同时存在，并不冲突。 --> <!-- 注：如果 isActive 和 isLine 都为 true ，那么会有 title/active/line 三个类 --> <h2 class="title" :class="{'active': isActive , 'line':isLine}">Hello World</h2> <!-- 用法四：如果过于复杂，可以放在一个 methods 或者 computed 中。 --> <!-- 注：classes 是一个计算属性 --> <h2 class="title" :class="classes">Hello World</h2> <!-- 用法五：数组语法。(用的次数较少) --> <h2 class="title" :class="['active','line']">Hello World</h2>
案例：
<div id="app"> <img v-bind:src="imgSrc" alt=""> <img :src="imgSrc" alt=""> <img :src="imgSrc" alt="" :title="imgtitle+'!!!!'"> <img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive"> <img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive"> </div> <script src="./vue源码/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { imgSrc: "https://www.itheima.com/images/logo.png", imgtitle: "黑马程序员", isActive: false }, methods: { toggleActive: function () { this.isActive = !this.isActive } } }) </script>
v-bind 绑定style
- v-bind:style：可以绑定一些 CSS 内联样式。
- 在写 CSS 属性名的时候，比如 font-size
- 采用驼峰式：
fontSize。 - 或者短横线分隔（记得用单引号括起来）
'font-size'。
- 绑定 class 有两种方式：
- 对象语法：
:style="{key(属性名): 'value(属性值)'}"
1）对象的 key 是 CSS 属性名称。
2）对象的 value 是具体赋的值，值可以来自于 data 中的属性。
- 数组语法：
:style="[baseStyles,overridingStyles]"
1）多个值以 ， 分隔即可。
v-for 指令
v-for 遍历数组
- 根据数据生成列表结构。
- 数组经常和
v-for结合使用。 - 语法是：
(item,index) in 数据。 - item 和 index 可以结合其他指令一起使用。
- 数组长度的更新会同步到页面上，是响应式的。
<div id="app"> <ul> <li v-for="item in movies">{{item}}</li> <!-- v-for：循环遍历 movies 这个数组，给它展示出来 --> </ul> </div> <script src="./vue源码/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { message: '你好啊', movies: ['星际穿越','大话西游','你的婚礼','我要我们在一起','我在时间尽头等你'] }, }) </script>
v-for 遍历对象
<div id="app"> <ul> <li v-for="item in info">{{item}}</li> <!-- 也可以同时获取 key 和 value ：格式：(value,key) --> </ul> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { info:{ name: 'mengzhao', age: 20, height: 1.75 } }, }) </script>
运行结果：
组件的 key 属性
- 官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个 key 属性。
- key 的作用**主要是为了高效的更新虚拟 DOM ** 。
- 了解内容：
- 为什么需要这个 key 属性呢？
- 这其实和 Vue 的虚拟 DOM 的 Diff 算法有关系。
- 这里我们借用 React' s diff algorithm 中的一张图来简单说明一下
- 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。
- 我们希望可以在 B 和 C 之间加一个 F ，Diff 算法默认执行起来是这样的。
- 即把 C 更新成 F , D 更新成 C , E 更新成 D ，最后再插入 E ，是不是很没有效率？
- 所以我们需要使用 key 来给每个节点做一个唯一标识。
- Diff 算法就可以正确的识别此节点。
- 找到正确的位置插入新的节点。
检测数组更新
- 因为 Vue 是响应式的，所以当数据发生变化时，Vue 会自动监测数据变化，视图会发生对应的更新。
- Vue 中包含了一组观察数组编译的方法，使用它们改变数据也会触发视图的更新。
- push()：在数组最后添加元素。
- pop()：在数组后面删除最后一个元素，并返回数组。
- shift()：在数组后面删除第一个元素，并返回数组。
- unshift()：将一个或多个元素添加到数组的开头，并返回新数组的长度。
- splice()：删除元素/修改元素/添加元素。
- sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
- reverse()：反转数组项的顺序。
作业的回顾
- 数组中包括几个电影，以列表的形式展示在页面上，点击哪个哪个变成红色。
<div id="app"> <ul> <li v-for="(item,index) in movies" :class="{active: currentIndex === index}" @click="liclick(index)">{{item}}</li> </ul> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { movies: ['我在时间尽头等你','我要我们在一起','你的婚礼','当男人恋爱时'], currentIndex: 0 }, methods: { liclick(index){ this.currentIndex = index } } }) </script>
v-once 指令
- v-once 指令：
- 该指令后面不需要跟任何表达式（比如之前的 v-for 后面是跟表达式的）。
- 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。
v-pre 指令
- 在特定情境下才会使用 v-pre 指令。
- 如果需要展示{{message}}的时候。
<div id="app"> <h2 v-pre>{{message}}</h2> </div> <script src="./vue源码/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { message: '你好啊', }, }) </script> <!-- 在页面展示效果是{{message}}，而不是你好啊 -->
v-cloak
- 在 Vue 解析之前，div 中有一个属性 v-cloak。
- 在 Vue 解析之后，div 中没有一个属性 v-cloak。
<style> [v-cloak] { display: none; } </style> <div id="app"> <h2 v-cloak>{{message}}</h2> </div> <script src="./vue源码/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { message: '你好啊', }, }) </script>
v-show
<div id="app"> <!-- v-if：当条件为 false 时，包含 v-if 指令的元素，根本不存在 DOM 中。 --> <h2 v-if="isShow">{{message}}</h2> <!-- v-show：当条件为 false 时，v-show 只是给元素添加了一个行内样式：display: none --> <h2 v-show="isShow">{{message}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: true }, }) </script>
在开发中如何选择 v-if 和 v-show 呢？
- 当需要在显示与隐藏之间切换很频繁时，用 v-show 。
- 当只有一次切换时，通过 v-if 。
记事本案例
功能
- 新增
- 生成列表结构（
v-for 数组）。 - 获取用户输入（
v-model）。 - 回车，新增数据（
v-on .enter 添加数据）。
- 删除
- 点击删除指定内容（v-on splice 索引）。
- 统计
- 统计信息个数（v-text length）。
- 基于数据的开发方式。
- 清空
- 点击清除所有信息（v-on）。
- 隐藏
- 没有数据时，隐藏元素（v-show v-if 数组非空）。
<!-- 主体区域 --> <section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>记事本</h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"> </header> <!-- 列表区域 --> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item,index) in list"> <div class="view"> <span class="index">{{ index+1 }}</span> <label>{{ item }}</label> <button class="destroy" @click="remove(index)">x</button> </div> </li> </ul> </section> <!-- 统计和清空 --> <footer class="footer"> <span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong>items left</span> <button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button> </footer> </section> <script src="./vue源码/vue.js"></script> <script> var app = new Vue({ el: '#todoapp', data: { list: ['写代码', '吃饭饭', '玩游戏'], inputValue: "" }, methods: { add: function () { this.list.push(this.inputValue) this.inputValue = '' }, remove: function (index) { this.list.splice(index, 1) }, clear: function () { this.list = [] } } }) </script>
图书购物车案例
过滤器
- 在实例的 options 里面定义过滤器。
// 使用过滤器的方法： // {{item.price | 过滤器}} // 定义过滤器的方法： const app = new Vue({ el: '', data: ' ', // 过滤器 filters:{ 函数名(需要过滤的参数){ 函数体 } } })
案例源码
<div id="app"> <div v-if="this.books.length"> <table> <thead> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </thead> <tbody> <tr v-for="(item,index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | finalPrice}}</td> <td> <button @click="decresement(index)" v-bind:disabled="item.count <= 1">-</button> {{item.count}} <button @click="incresement(index)">+</button> </td> <td> <button @click="clearClick(index)">操作</button> </td> </tr> </tbody> </table> <h2>总价格：{{totalPrice | finalPrice}}</h2> </div> <h2 v-else>购物车为空！</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { books: [{ id: 1, name: '《算法导论》', date: '2020-12-02', price: 128.00, count: 1 }, { id: 2, name: '《C语言程序设计》', date: '2002-2-02', price: 88.00, count: 1 }, { id: 3, name: '《Vuejs从入门到基础》', date: '2020-3-02', price: 48.00, count: 1 }, { id: 4, name: '《Java程序设计》', date: '2004-1-28', price: 64.00, count: 1 }, { id: 5, name: '《JavaScript权威指南》', date: '2000-8-05', price: 108.00, count: 1 }], }, computed: { totalPrice(){ let totalprice = 0 for(let i=0;i<this.books.length;i++){ totalprice += this.books[i].price * this.books[i].count } return totalprice } }, methods: { decresement(index) { this.books[index].count-- }, incresement(index) { this.books[index].count++ }, clearClick(index) { this.books.splice(index, 1) } }, // 过滤器 filters: { finalPrice(price) { return '￥' + price.toFixed(2) } } }) </script>
