Vue基础
- Vue快速使用
- 模板语法之插值
- 文本指令
- 双向数据绑定
- 事件指令
- v-on
- 事件修饰符
- 属性指令
- style和class使用
- class属性
- style属性
- 条件渲染
- 循环渲染
- v-for
- key属性
- 数组的检测与更新
- 根据输入过滤案例
Vue快速使用
编辑器选择
只要能编写html的编辑器都可以。
引入：
快速使用
在js中创建vue对象：
使用模板语法：
我的名字是：{{ name }}
我的年龄是：{{ age }}
模板语法之插值
基本插值
vue对象的data键中可以放各种变量：
模板语法插值(根据变量名)：
字符串：{{ name }}
数值：{{ age }}
数组：{{ hobby }}
对象：{{ obj }}
标签字符串：{{ link }}
三目运算符
age变量大于等于18，返回值为成年人，否则返回值为未成年人
三目运算符：{{ age>=18?"成年人":"未成年人" }}
文本指令
文本指令，写在标签上的，以 v- 开头的属性。
| 文本指令 | 作用 |
|---|---|
| v-text | 把变量值显示在标签上，不做渲染，与模板语法一样 |
| v-html | 标签字符串会渲染后在显示，其余与-v-text一样 |
| v-show | 显示与不显示，修改display属性，会一直在页面上 |
| v-if | 显示与不显示，不显示就是直接删除 |
使用：
显示文字1
显示文字2
页面效果：
f12查看元素：
v-show与v-if的区别
v-show为false时是设置display属性为none，而v-if为false时是直接删除标签。
双向数据绑定
双向数据绑定使用v-model指令：
name的值为{{ name }}
事件指令
v-on
按钮，标签的事件：单击事件、双击事件...
语法结构：
简写：
函数需要放在vue对象的methods中。
案例：点击按钮后名字更改：
名字：{{ name }}
输入框常见事件
| 事件 | 作用 |
|---|---|
| v-on:change | 失去焦点并且内容变化会触发 |
| v-on:blur | 失去焦点会触发 |
| v-on:input | 只要内容发生变化就会触发 |
事件修饰符
| 修饰事件 | 作用 |
|---|---|
| .stop | 只处理自己的事件，父控件冒泡的事件不处理 |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
.stop
- 文本
.prevent
属性指令
标签都是有属性的，想要动态变化属性，可以使用v-bind。
![]()
简写：
![]()
动态变化属性：
![]()
style和class使用
标签属性style和class是可以有多个值的，所以在使用v-bind指令时可以让它等于数组或者对象。
class属性
css样式：
使用：
文本
文本
文本
等价于：
文本
文本
文本
数组类型和对象类型都可以添加多个值，字符串只能添加单个值，其中数组类型最好用。
style属性
style使用键值对添加值时，css属性可以使用驼峰，比如font-size，可以写成fontSize，也可以加引号'font-size'不变。
文本
文本
文本
字符串类型、数组类型和对象类型都可以添加多个值，其中对象类型最好用。
条件渲染
vue的三个判断条件指令：
- v-if：符合条件就显示
- v-else-if：与v-if搭配使用，与v-if差不多
- v-else：与v-if搭配使用，以上条件都不符合显示。
优秀
良好
不及格
如果score大于等于90，显示优秀；如果score大于等于60小于90，显示良好；如果以上都不符合，显示不及格。
优秀
良好
不及格
循环渲染
v-for
循环使用v-for指令。
{{ 变量名 }}
循环数字：
循环整型
{{ item }},
循环字符串：
循环字符串
{{ item }},
循环数组：
循环数组
{{ item }},
循环对象：
循环列表
只拿对象的值：{{ item }},
拿对象的键和值：{{ key }}:{{ value }},
key属性
vue会先复制原生的DOM，生成一个虚拟的DOM。数据修改时，会先在虚拟DOM上更改，然后和原生DOM比较，再进行页面上数据的更新，这样做提高了数据的刷新速度。
在使用v-for时，可以写一个key属性：
{{ item }}
这个作用相当于给标签写了个唯一属性key，它可以在数据更改时提高页面的刷新速度。
对于小项目来说，这个作用几乎没有。
数组的检测与更新
有时候，我们用一些数组，对象的方法更新数组或对象时，发现页面没有变化。
使用以下方法操作数组：
- 可以检测变动：push、pop、shift、unshift、splice、sort、reverse
- 不会检测变动：filter()、concat()、slice()、map()，新数组替换旧数组
{{ item }},
上面这个例子点击按钮后并不会改变页面上的数据。
解决方法：
{{ item }},
根据输入过滤案例
{{ item }}