VUE学习笔记--基础标签

本笔记仅用作学习vue过程中的知识记录，亦用作知识温习查询的纲要。

a、一些称呼

函数-方法：一般在上下文直接定义的function叫做函数，而在对象中定义的叫方法。即方法是附属于某个实例的，而函数是一个声明。通常，这个并不严格定义区分，更多是习惯约定。

1、options的主要属性

const obj = {
  counter: 0,
  message: "abc"
}

const app = {
  el: "#app",
  data: obj, 
  methods: {
    add: function(){
      console.log('add 被执行');
      this.counter ++;
    },
    sub: function(){
      console.log('sub 被执行');
      this.couter --;
    }
   
  }
}

其中，格式要求如下：
const app = {
el: 字符串或者htmlObject对象，决定vue之后会管理哪一个dom对象
data: 对象或者函数（组件中，data必须为函数）。vue实例对应的数据对象
methods: 函数，定义属于vue的方法，可以在其他地方调用，也可以在命令中调用

}

2、生命周期

vue 的主要生命周期主要有
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

具体的完整生命周期，见官网图

3、基本用法

v-bind 数据绑定

mustache语法只能用于text处，标签属性不可以使用。应使用v-bind:属性="变量名"的形式，可以简写为:属性="变量名"。
动态绑定class(根据data的某个属性，动态调整元素的class)，可以使用:class="{class1:true,class2:false}"的形式，如此则class1有效，class2无效。动态绑定class，可以支持数组跟函数。
动态绑定style，跟class类似，可以支持字符串，对象，数组，函数。

computed 计算属性

跟methods有点类似，但有缓存效果。页面重新渲染值不会变化，会立即返回之前的计算结果，而不必再次执行函数。注意跟watch区分，watch没有缓存效果，每次渲染都会执行(值无变化也会执行)。(这里的渲染指页面多次引用，而不是浏览器dom对象刷新)
computed中的数据为对象，写作方法时，实际是对象的getter方法的简写(setter略掉了)。setter方法可以传值。比如以下代码实际是一样的：

new Vue({
    computed:{
        //写法1
        fullName:{
            get: function(){
                return this.firstName + this.lastName;
            }
        },
        
        //写法2
        fullName: function(){
            return this.firstName + this.lastName;
        }
    }
    
})

因为有get，set方法，每次调用实际都是先set再get方法。简写的方式实际是语法糖，这里调用的是一个属性，而不是方法，mustache写法中没有括号。

v-on 事件绑定

比如onclick可以写作：v-on:click="",内容可以是函数名，也可以是js代码。可以简写为@click。默认方法的第一个参数为事件对象，手动指定事件对象用$event。
v-on可以支持一些修饰符，用于阻止冒泡等。
.stop 阻止冒泡
.self 当时间在钙元素本身触发时，才触发事件
.capture 添加事件监听器时，使用事件捕获模式
.prevent 阻止默认事件
.native 监听组件根元素的原生事件
.once 只触发一次
对于capture，即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。

<div id="content">
    <div id="obj1" v-on:click.capture="doc">
        obj1
        <div id="obj2" v-on:click.capture="doc">
            obj2
            <div id="obj3" v-on:click="doc">
                obj3
                <div id="obj4" v-on:click="doc">
                obj4
                <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
                由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
                -->
            </div>
            </div>
        </div>
    </div>
</div>

什么是根元素的原生事件？ 组件相关，稍后处理；

v-if, v-else if, v-else 条件语句

如果条件不满足，则对应的html内容不予展示；值可以为判断条件或者变量；
ps：页面上元素进行切换时，vue为了性能考虑，会优先重用重复的元素。如果不想被重用，可以给标签设置不同的key来实现，相同的key，vue认为是可以重用的。

v-show 显示隐藏

v-show 后跟判断条件或变量，如果为false，则display=none,隐藏元素。(v-if如果为false，页面直接无此元素)
频繁切换显隐，使用v-show，只有一次切换，使用v-if；

v-for 遍历

(val, key, index) in objList 这种方式，可以获取到键值以及下标索引。需要注意的是，官方推荐，在使用v-for时，给对应的元素或组件添加一个:key属性。
原因跟vue的虚拟DOM的diff算法有关，如果没有加:key，则vue无法区分列表中的多个元素，在对列表的中间元素进行增删改时会进行全局遍历，效率较低。而有:key则方便区别定位元素，效率较高。

数组中哪些方法是响应式的？
1、push()
2、pop() 从后边删除
3、shift() 从前删
4、unshift() 最前追加
5、splice()
6、sort()
7、reverse()

直接修改数组元素，不能触发响应式，原因是赋值操作符 = 并没有被vue监听。

filters 过滤器

过滤器用于对某类数据的展示等提供修饰，也是一类方法，可以直接{{data | 过滤器}}使用。

v-model 双向绑定

mustache语法只能实现单向绑定(数据渲染元素)，不能完成元素到数据的绑定。v-model可以实现双向绑定。
实现原理是v-bind将数据绑定到元素，并通过v-on监听事件，将元素的值绑定到数据。

<div id="app">
    <!--input、textarea绑定-->
    <input type="text" id="myMessage" name="message" v-model="message" />

    <!--radio绑定，v-model相同，可以省略name(v-model可以实现多选1)-->
    <input type="radio" id="male" value="男" v-model="gender"  /> 男
    <input type="radio" id="female" value="女" v-model="gender"  /> 女

    <!--checkbox 单个，一般用boolean-->
    <input type="checkbox" id="license" v-model="license" /> 同意协议
    
    <!--checkbox 多个，对应数组-->
    <input type="checkbox" value="足球" v-model="hobbies" />足球
    <input type="checkbox" value="篮球" v-model="hobbies" />篮球
    <input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
    <input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
    
    <!--select 单选-->
    <select name="abc" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="葡萄">葡萄</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
    </select>
    <!--select 多选(按住ctrl)-->
    <select name="abc" v-model="fruit" multiple>
        <option value="苹果">苹果</option>
        <option value="葡萄">葡萄</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
    </select>
    
    <!--动态数据绑定-->
    <!--更多时候，select及checkbox的选项是不固定的，前端无法写死，而是要根据后台数据动态生成-->
    <!--用label包起来，是为了点击文字也有效果，提升用户体验-->
    <label v-for="item in originHobbies" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobbies" />{{item}}
    </label>
    
    
</div>

const app = new Vue({
    el: "#app",
    data:{
        message: "你好呀",
        gender: "男"，
        license: false,
        hobbies: []，
        fruit: "香蕉",
        fruits: []
    }
})

v-model还需注意的一点是修饰符，修饰符有：lazy、number、trim三个。
lazy即延迟处理，一般是input之类的内容在失去焦点或者触发回车时进行数据刷新，而不是一旦有变动立即刷新。 number用于确保输入的数据类型为数字，默认为字符串。
trim是自动去掉前后的空格。
使用方式均为v-model.lazy="值"