Vue 第 2 天 - 双向数据绑定及逻辑控制指令
以下内容转载自博主Serein的原创文章，遵循 CC 4.0 BY-SA 版权协议。
视频链接,代码链接 请跳转到下方链接
原文链接
01 - 双向数据绑定 v-model （重点）
文档 https://cn.vuejs.org/guide/essentials/forms.html
作用:：表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值,而总是将 Vue 实例的数据作为数据来源，应该在 data 选项中声明初始值。
- 普通文本框上的使用
<div id='app'> <p>{{message}}</p> <input type='text' v-model='message'> <!-- v-model其实是`语法糖`,它是下面这种写法的简写 语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用 --> <input type='text' :value='msg' @input='msg=$event.target.value'/> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { msg: '要不要再来?' } } }).mount('#app') </script>
- 多行文本框上的使用
<div id='app'> <textarea v-model="message"></textarea> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { msg: '要不要再来?' } } }).mount('#app') </script>注意：在多行文本框中使用插值表达式无效（此时，其只能接受数据，不能改变数据）
- 单个复选框上的使用
<div id='app'> <input type="checkbox" v-model="checked"> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { checked: true } } }).mount('#app') </script>
- 多个复选框上的使用
<div id='app'> <input type="checkbox" value="html" v-model="checkedNames"> <input type="checkbox" value="css" v-model="checkedNames"> <input type="checkbox" value="js" v-model="checkedNames"> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { // 如果数组中有对应的value值，则此checkbox会被选中 checkedNames: ['html'] } } }).mount('#app') </script>注意：此种用法需要
input标签提供value属性，并且需要注意属性的大小写要与数组元素的大小写一致
- 单选按钮上的使用
<div id='app'> 男<input type="radio" name="sex" value="男" v-model="sex"> 女<input type="radio" name="sex" value="女" v-model="sex"> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { sex: "女" } } }).mount('#app') </script>
- 下拉框上的使用
<div id='app'> <select v-model="selected"> <option>请选择</option> <option>HTML</option> <option>CSS</option> <option>JS</option> </select> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { selected: 'JS' } } }).mount('#app') </script>
- 修饰符的使用
.lazy：默认情况下Vue的数据同步采用
input事件，使用.lazy将其修改为失去焦点时触发.number：自动将用户的输入值转为数值类型（如果能转的话）
.trim：自动过滤用户输入的首尾空白字符
02 - v-model 语法糖的本质
v-model 其本质上来讲是 在表单上监听用户对应输入事件，动态的修改 data 中声明的属性的一个方法。
我们也把这种封装出来的使用，叫做「语法糖」，简单的来说，就是方便开发者使用的，在程序员的世界里，永远有一个最基础的规矩，就是「Write Less， Do More」，写的更少，做的更多。
<body> <div id="app"> <input type="text" @input="setMsg" /> <h2>你输入的内容是：{{ msg }}</h2> </div> </body> </html> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { msg: '汉宫秋月' } }, methods: { setMsg(e) { this.msg = e.target.value; } } }).mount('#app') </script>
03 - v-for 循环控制指令
文档: https://cn.vuejs.org/guide/essentials/list.html#v-for
用
v-for指令基于一个数组来渲染一个列表
v-for 用来遍历数组并生成多个标签
v-for 作用在需要重复的元素上
语法
v-for="元素别名 in 数组"或者v-for="(元素别名,下标别名) in 数组"在 v-for 作用的标签之间就可以用使用元素别名和下标别名
in 是固定的，不能变
注意 v-for 必须要配套一个 key 来进行使用，这样 Vue 才能区分每一个元素的标识，进而在局部更新一个数据的时候，才能配套使用 diff 算法来确保更新的效率
<div id="app"> <ul> <li v-for="(movie,index) in movieList" key="'movie'+index"> {{movie}} --{{index}} </li> </ul> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { movieList: [ '生死罗布泊', '淮海战役', '辽沈战役' ] } } }).mount('#app') </script>
04- Demo 记事本
实现步骤
- 展示任务列表
- 添加任务
- 删除任务
注意点
v-for=“（元素别名,下标别名） in 数组”
v-model修饰符
修饰符：
array.splice(从哪个下标开始删除，删除元素的个数)
/* 1.展示任务列表 1. todoList:['睡觉觉','吃饭饭','打豆豆'] 2. v-for="元素别名 in 数组" li就可以使用元素别名 2. 添加任务 1.v-model:inputVal 2.@keyup.enter="addTodo" 3.todoList.push(inputVal) 3.删除任务 1. @dblclick:delTodo(index) 2. index来自v-for 3.delTodo todoList.splice(从哪个下标开始删除,删除多少项) */
05 - v-if、v-else-if、v-else 分支控制指令
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-if="js表达式"和v-else-if=“js表达式"，如果表达式值为 true，才会渲染该元素- v-else 以上的条件不满足时，渲染该元素
<div id="app"> <h2>老弟，你今年{{ age }}岁</h2> <input type="text" v-model="age" /> <h2 v-if="age<18">打枪的不要,暗恋悄悄的</h2> <h2 v-else-if="age<25">光明正大去网吧</h2> <h2 v-else>你到了晚婚的年龄了</h2> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { age: 22 } } }).mount('#app') </script>
06 - v-show 条件显示指令
手册 https://cn.vuejs.org/guide/essentials/conditional.html#v-show
v-show只是简单地切换元素的 CSS 属性display。
- v-show 隐藏元素通过改变元素 css 属性 display:none
- v-if 隐藏元素直接移除 dom
- 对于频繁切换隐藏和显示的元素，就用 v-show
<div id="app"> <button @click="isShow=!isShow">切换显示</button> <h2>使用v-if</h2> <h2 v-if="isShow">中分还带波浪，是不是很萌呢</h2> <h2>使用v-show</h2> <h2 v-show="isShow">中分还带波浪，是不是很萌呢</h2> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data: function () { return { isShow:true } } }).mount('#app') </script>
07 - v-cloak 隐藏胡子语法指令
v-clock 指令和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
添加了这个指令之后, Vue解析完后，会移除该指令
v-cloak和 display:none 结合使用，可以隐藏未编译的 {{}} 语法
我们可以使用 slow 3G 模拟低速网络来体验， disable cache 请求的资源不会在浏览器缓存，下一次请求同一资源还会请求服务器
<style> [v-cloak] { display: none; } </style> <body> <div id="app"> <h2 v-cloak>{{ message }}</h2> </div> <script type="module"> import { createApp } from './vue.js'; createApp({ data() { return { message: "Hello World" } } }).mount('#app') </script> </body>
08 - v-pre 跳过编译过程（了解）
跳过这个元素和它的子元素的编译过程。
<div id="app"> <span v-pre>{{ 这是一个寂寞的天 }}</span> </div> <script src="./lib/vue.js"></script> <script> const app = new Vue({ el: '#app', data: {} }) </script>
09 - 课后作业
- 灵活使用 v-model 指令获取表单信息
- 灵活使用 v-if、v-show 逻辑控制语句
- 完成相关 Demo 案例
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
