VUE
1. MVVM
M: model 数据模型
V：view 视图模型
VM：ViewModel，连接model和view的对象
2.1 插值表达式
作用：在视图模型中，插入数据模型提供的值，值写在{{ }}中，值的形式可以是表达式或者三元运算符，但是不能为if条件语句
<div id="app">
<!-- 插值表达式的用法 -->
<p>{{ "吕" + name }}</p> <!-- 吕小鱼 -->
<p>{{ age + 1}}</p> <!-- 7 -->
<p>{{ age > 80 ? "老年人" : "年轻人" }}</p> <!-- 年轻人 -->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: '小鱼',
age: 6,
}
})
</script>
2.2 v-text
作用：渲染文本
使用：在标签属性位置写上 v-text="属性名"
区别：
| 属性 | 插值表达式 | v-text | v-html |
|---|---|---|---|
| 位置 | 标签里面，innerHTML位置 | 标签属性位置 | 标签属性位置 |
| 内容 | 表达式，三元运算符 | 文本 | 文本，html |
v-html:在网站上动态渲染html是非常危险的，容易导致XSS攻击，只在可信内容上使用v-html,用户提交内容上绝对不能使用v-html
2.3 v-bind（缩写 :）
作用：
- 动态绑定属性
v-bind:属性名="data中的属性值"
:属性名="data中的属性值" -- 缩写形式 - 动态绑定自定义属性，组件开发时常用
- 动态绑定样式
<p :class="{'red-font': true}" >红色字体</p>
2.4 v-for
渲染数组：
v-for="item in arr" （ item--数组中的每一项 | arr--数组 ）
v-for="(item, index) in arr" （ index--索引 ）
渲染对象：
v-for="value in obj" （ value--对象的值 | obj--对象 ）
v-for="(value, key) in arr" （ key--对象的键）
v-for必须结合key来使用
key
作用：提高性能，只重新渲染修改的数据
使用方法： v-for="item in arr" :key="唯一标识"
常见两个问题
已知：data中数据变化，v-for能自动刷新视图
问题：
1.使用arr的length属性去改变数组，不会触发视图更新
2.使用arr的下标去改变数组，不会触发视图更新
解决方法：
1.Vue.set( arr, index, newVal) （ arr--数组 | index -- 索引 | newVal--新值 ）
2.Array.prototype.splice()
2.5 v-model
view和model双向数据绑定，只能在input、textarea、select中使用
2.6 v-on
作用：监听dom事件
使用方法：
- 标签属性位置，v-on：click="执行函数"
- 缩写 @click="执行函数"
- 传参 @click="fs(a, b)"
- 添加事件对象 @click="fs( $event)" -- 只能是$event
- 事件修饰符
@click.stop= "执行函数" -- 阻止冒泡
@click.prevent= "执行函数" -- 阻止默认行为 - 按键修饰符 @click.enter = "执行函数" -- 只有enter键才能触发执行函数
2.7 v-if 和 v-show
| 属性 | v-if | v-show |
|---|---|---|
| 联系 | 都控制元素的显示和隐藏 | 同左 |
| 区别 | 添加/删除dom元素 | display: block/none |
| 性能消耗 | 切换消耗高 | 初始渲染消耗高 |
| 使用场景 | 异步数据渲染 | 使用大量dom操作 |
