Vue 常用指令
v-model
作用: 表单元素的绑定
特点: 双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在data选项中声明初始值。
绑定文本框
效果: 当文本框的值发生变化后，div中的内容也会发生变化
<div id="app"> <p>{{message}}</p> <input type='text' v-model='message'> <hr> <!-- v-model其实是语法糖,它是下面这种写法的简写 --> <input v-bind:value='message' v-on:input='message = $event.target.value' /> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: 'message默认值' } }); </script> 复制代码
绑定多行文本框
<div id="app"> <textarea v-model="message"> 我是textarea内的插值表达式 无效 {{str}} </textarea> <div>{{ message }}</div> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: 'message默认值', str: 'str字符串' } }); </script> 复制代码
注意： 多行文本框中使用插值表达式 无效
绑定复选框
- 绑定一个复选框
checked是布尔类型的数据
<input type="checkbox" v-model="checked"> <div>{{ checked }}</div> 复制代码
- 绑定多个复选框
此种方式需要input标签提供value属性
v-model绑定的是数组-
<!-- 多个复选框 : 需要设置value属性值, v-model绑定的是数组--> <div id="app"> <div> <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="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { checkedNames: [] } }); </script> 复制代码
- 绑定单选框
需要input提供value属性的值
男<input type="radio" name="sex" value="男" v-model="sex"> 女<input type="radio" name="sex" value="女" v-model="sex"> {{sex}} <script> var vm = new Vue({ el: '#app', data: { sex: '' } }); </script> 复制代码
- 绑定下拉框
<div id="app"> <!-- 下拉框 --> <select v-model="selected"> <option disabled value="">请选择</option> <option>北京</option> <option>上海</option> <option>深圳</option> </select> <span> 您选择的是: {{selected}}</span> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { selected: '' } }); </script> 复制代码
v-cloak
问题:在使用vue绑定数据的时候，渲染页面有时会出现变量闪烁，例如
<div id="app" v-cloak> <p>{{message}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: '我是data中message的数据' } }); </script> 复制代码
效果: 在页面加载时,有时会在页面中看到这个:
{{message}} 复制代码
解决方案: 使用v-cloak
<div id="app" v-cloak> <p>{{message}}</p> </div> 复制代码
注意: 要在css代码部分写如下代码
[v-cloak] { display: none; } 复制代码
这样:就可以防止也页面闪烁
v-once
解决的问题: 只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
<div id="app"> <p v-once>{{message}}</p> <input type="text" v-model="message"> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: '我是data中message的属性的值' } }); </script> 复制代码
当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染
v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可
案例-表格展示
- 功能分析
- 渲染表格
- 删除商品
- 添加商品
渲染表格
目的:动态渲染表格 数据为Vue实例中data里面的属性items:[]
- 在data中添加商品信息的数组
- v-for渲染列表
- 插值表达式渲染数据
<tr v-for="item in items"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td><a href="#">删除</a></td> </tr> 复制代码
<script src="./vue.js"></script> <script> // 1. 实例化Vue对象 // 2. 设置Vue对象的选项 new Vue({ el: '#app', data: { items: [{ name: 'LV', date: '2018-8-1' }, { name: 'Lenovo', date: '2018-8-1' }, { name: 'TCL', date: '2018-8-1' } ] }, methods: { } }) </script> 复制代码
处理无数据时的渲染
效果: 如果表格中没有数据,展示页面中的"没有品牌数据"
<tr v-if="items.length === 0"> <td colspan="4">没有品牌数据</td> </tr> 复制代码
删除商品
效果:点击每个表格中的删除按钮, 当前数据从页面中移除
- 绑定click事件
- 取消默认点击事件
- 执行删除deleItem方法
- 将点击的a所在的tr的位置进行传递(目的是找到当前点击的tr)
- 点击后, 删除当前tr
<td> <!-- 点击删除按钮 1. 取消默认点击事件 2. 执行删除deleItem方法 3. 将所点击的a所在的tr的位置进行传递(目的是找到当前点击的tr) 4. 点击后, 删除当前tr --> <a href="#" @click. prevent="deleItem(index)">删除</a> </td> 复制代码
methods: { deleItem(index) { console.log(index); this.items.splice(index, 1); console.log(this.items); } } 复制代码
添加商品
效果:点击添加按钮,向商品列表中添加商品信息
- 绑定click事件
- 在data中添加要绑定的属性name
- v-model绑定name属性
- 点击按钮后,将商品信息添加到items数组中
<div class="add"> 品牌名称: <input type="text" v-model="name"> <input type="button" value="添加" @click="addItem"> </div> 复制代码
data: { name: '' }, methods: { addItem() { console.log('添加按钮被点击'); const item = { name: this.name, date: new Date() }; // 将数据添加到item列表首位 this.items.unshift(item) } } 复制代码
细节处理
- 删除提示框
deleItem: function(index) { // console.log(index); if (confirm('是否删除')) { this.items.splice(index, 1); } // console.log(this.items); } 复制代码
- 添加的数据为空时的处理
如果文本框为空, 提示输入内容
如果文本框不为空,直接添加
if (this.name.length === 0) { alert('请输入商品信息'); return; } this.items.unshift(item); 复制代码
当商品信息为空时,禁用添加按钮
<div class="add"> 品牌名称: <input type="text" v-model="name"> <input :disabled="name.length === 0" type="button" value="添加" @click="addItem"> </div> 复制代码
添加数据成功后,清空文本输入框
addItem: function() { console.log('添加按钮被点击'); const item = { name: this.name, date: new Date() }; if (this .name.length === 0) { alert('请输入商品信息'); return; } this.items.unshift(item); // 添加完毕 清空文本框 this.name = ''; }
