VUE01--{MVVM、常用指令}

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事件
使用方法：

1. 标签属性位置，v-on：click="执行函数"
2. 缩写 @click="执行函数"
3. 传参 @click="fs(a, b)"
4. 添加事件对象 @click="fs( $event)" -- 只能是$event
5. 事件修饰符
   @click.stop= "执行函数" -- 阻止冒泡
   @click.prevent= "执行函数" -- 阻止默认行为
6. 按键修饰符 @click.enter = "执行函数" -- 只有enter键才能触发执行函数

2.7 v-if 和 v-show

属性	v-if	v-show
联系	都控制元素的显示和隐藏	同左
区别	添加/删除dom元素	display: block/none
性能消耗	切换消耗高	初始渲染消耗高
使用场景	异步数据渲染	使用大量dom操作