Vue基础，vue指令

1. MVVM设计模式

• m：model 数据部分 data
• v：view 视图部分 div容器
• vm： view&model 视图和数据的结合体

2. 插值表达式

• 在html标签的内容区域表现数据，可以使用{{}}插值表达式。

• <标签>{{ 表达式 }}</标签>

• {{ }}

  • 在data值大小不改变的前提下，其中可放置变量、常量、算数运算符、比较运算符、逻辑运算符、三元运算符等。
  • ++和–不好用
  • 其中只能设置简单的JavaScript表达式语句，不能设置复杂表达式(例如for循环)
  • 只能用在html标签的内容区域。

• vue中更改差值表达式的表现形式 使用 $$ 替代 {{}}

  • 在vue实例中添加属性： delimiters:['$', '$']

3. v-text

• 对标签的内容区域进行填充，标签中的默认内容会被覆盖掉
• <标签 v-text="表达式"></标签>
  • 在data值大小不改变的前提下，其中可放置变量、常量、算数运算符、比较运算符、逻辑运算符、三元运算符等。
  • 属性值会添加到标签的内容区域。
• 闪烁问题
  • 通过http协议打开文件
  • 在网速非常慢的情况下，{{}}有闪烁问题
  • v-text则显示白板，没有闪烁问题

4. v-html

• 对标签的内容区域进行填充，标签中的默认内容会被覆盖掉
• 可识别标签
• 在data值大小不改变的前提下，其中可放置变量、常量、算数运算符、比较运算符、逻辑运算符、三元运算符等
• 可应用在富文本编辑器
• 尽量避免使用v-html，否则会带来危险(XSS攻击，跨站脚本攻击)

5. v-bind：(冒号)

• <标签 :属性名称="表达式"></标签>

• 属性绑定

  • 要操作标签的属性需用通过v-bind指令
  • 简写 一个 :
  • 绑定的内容可进行 变量、常量、算数运算符、比较运算符、逻辑运算符、三元运算符等应用

6. 属性绑定–class属性

• :class=""
  • 数组方式
    • ['red', 'green', 'red']
  • 对象方式
    • {red: true, green: true, red:false}

7. 属性绑定–style属性

• :style=""
  • 数组方式
    • :style="[{color : ‘red’, ‘font-size’ : ‘25px’},{ backgroundColor: ‘blue’}]"
  • 对象方式
    • :style="{color : ‘red’, ‘font-size’ : ‘25px’, backgroundColor: ‘blue’}"

8. 事件绑定v-on(@)

<标签 @事件类型="事件处理函数"></标签>

• 在methods成员中声明事件处理函数
• 事件参数：
  • 有声明(),也有传递实参，形参就代表传递的实参
  • 有声明()，但是没有传递实参，形参就是undefined
  • 没有声明()，第一个形参就是事件对象

9. methods成员中访问data成员的数据

• 在Vue实例内部，this关键字代表Vue实例对象，具体与new Vue()是一样的，其可以对data或methods成员进行直接访问

10. this是谁

• 普通函数中
  • this指向window对象
• 对象中
  • 当前对象的方法中的this指向当前对象
• 标签中
  • this代表元素节点对象

11. methods成员的简易设置

ES6标准里规定，对象成员与值的变量名称保持一致，就可以做简易设置。

var name = 'xcr'
var height = 175
var run = function() {
    ...
}
// 普通设置
var person = { name: name, height: height, run: run}
// 简易设置
var person = {name, height, run}

var obj = {
    // run: function() {
    //    ...
    // }
    
    // 变形
    // run: function run() {
    //    ...
    // }
    
    // 简化设置
	run() {
        
    }
}

• 对象成员中的方法都可以做简易设置，去掉:function，是ES6的标准规范。

12. v-model 双向数据绑定

Vue中唯一的双向数据绑定指令

针对value属性生效，在表单元素中使用

只能绑定data成员，不能设置其他表达式

• v-bind是单向数据绑定，Vue实例修改数据，页面会感知到，但是页面修改数据，Vue实例感知不到
• v-model是双向数据绑定，Vue实例修改数据，页面会感知到，同时页面修改数据，Vue实例也能感知到

13. 响应式

双向绑定步骤

1. 页面初始加载，vue实例的数据渲染给div容器
2. 页面通过v-model修改数据，修改的信息会直接反馈给vue内部
3. vue内部的数据发生变化，页面上用到的该数据会重新编译渲染，vue实例内部用到的数据也会改变
4. 步骤3称之为响应式

14. v-model简易原理

• oninput事件
• 事件对象的target属性可以获取当前发生事件元素的dom对象
• 在vue中$event也代表事件对象
• 事件声明中没有()第一个形参就代表事件对象

<div id='app'>
    <input type="text" :value="text" @input="mode">
    /*下面的方法一样可以实现
     <input type="text" :value="text" @input="text=$event.target.value">
    */ 
</div>

var vm = new Vue({
    el:'#app',
    data: {
        text: ''
    },
    methods: {
        mode(e) {
            this.text = e.target.value;
        }
    }
})

15. v-for 遍历

• 遍历数组

  • <标签 v-for="成员值 in 数组></标签>"
  • <标签 v-for="（成员值，下标) in 数组></标签>"

• 遍历对象

  • <标签 v-for="成员值 in 对象></标签>"

  • <标签 v-for="(成员值,成员名称) in 对象></标签>"

  • <标签 v-for="(成员值,成员名称，下标) in 对象></标签>"