简单地来理解Vue，把mvvm什么的都撇开～

0. 大小写不敏感

由于js和html之间要进行沟通，而vue读取到的html中定义的变量/函数/方法为小写，所以请尽量用纯小写/下划线/连词符代替。

1. 为什么是new Vue({el:'#myApp'.....})

这是对应网页中id为myApp的对象

<div id='myApp'.......

而如果网页中tag的class为myApp要记住灵活运用，把new Vue({el:'#myApp'.....})改为new Vue({el:'.myApp'....."), 易可写成new Vue({el:'div.myApp'.....")

参考jquery查询元素方式

2.只能存在一个Vue对象么？

只存在一个vue。可创建多个，官方不建议，且在3.x会报错。

3.设计网页中的变量怎么实现的数据链接呢？

通过网页中查找{{.*}}特征对象，也是为了兼容浏览器的妥协

4.特征值查询

条件v-if，逻辑v-for，插件，绑定参数v-bind:.*，事件v-on:click 等也都是通过解析网页达到二次处理的

4.1. 补充 Vue的结构

el
获取网页模版对象，可以通过类似jquery方式查询到，比如<div id='abc' class='xyz'>，那么可以写成new Vue({el:'#abc'}) 或者 new Vue({el:'.xyz'})或者new Vue({el:'div#abc'}) 或者 new Vue({el:'div.xyz'})。 这些都是灵活的，并非刻板，只要能找到网页中对应的DOM对象标签就可以。

_data
传递的值（必须小写），可以是变量定义，数组定义，也可以是字典，灵活运用数据结构，这里data不加s，本身数据就是一个结合。

components
组件群的定义，记住这是个容器。

watch
监控data中对应值的变化。

methods
@click等事件处理

computed
对变量的灵活处理，可以把存取变量分离开来，包括对变量的get/set处理

filters
过滤函数，相当于便捷化的处理函数，在{{}}中就能进行调用，缺点是格式固定，一个变量可进行多个过滤函数处理

5.值的自动变更

当更改变量值时，引用的{{}}对象也会自动变更，这是MVVM机制，简单来讲，{{}}并不只被渲染为固定值，而是将原始结构作为模版，达到刷新替换的效果

6.过滤器 filter

{{}}中可以对值进行过滤，结构是{{变量1，变量2，变量3... | 过滤器1 | 过滤器2 | 过滤器3 ...}}，过滤器可以是多个，参数也可以是多个
比如设计器中写入 {{ "你好, 世界! " , 3 | doChange | doChange2}}
开发代码中插入过滤器

filters:{
  doChange: function(p1,p2) {
    var p="";
    for(let i=0;i<p2;i++){
      p+=p1;
    }
    return [p,p2];
  },
  doChange2: function(p1) {
    for(let i=0;i<p1[1];i++){
      p1[0] = p1[0].replace('世界', ' 中国' );
    }
    return p1[0];
  }
}

输出

你好, 中国! 你好, 中国! 你好, 中国!

进入第二个过滤器时无法传递多个参数，通过数组方式传递进去，这时候如果不传递过滤器则只替换了第一个世界，这里只是举个例子，repace使用RegEx过滤可以进行全局过滤 p1[0] = p1[0].replace(/世界/g, ' 中国' );

7.变量和计算函数重名？

首先会报错，但不影响运行，运行时优先读取变量值。

8. 解析{{}}优先级

变量/属性property > 计算函数computed > 数值/字符串计算 > 过滤器filter（直接被识别为空）
过滤器filter不在优先级中，因为过滤器在|识别符后，直接写filter是无效的（虽然filter传参并不会报错）

9. 观察和死循环

当进行观察watch时小心逻辑卡死
写这样一个结构

<div id='div'>
<p>{{a}}//{{b}}</p>
<button v-on:click="click1()">按钮</button>

code：

var div = new Vue({
    el: #div,
    data: {
        a: 1,
        b: 2,
    },
    watch: {
        a: function() {
            this.b++
            console.log(b, this.b);
        },
        b: function() {
            this.a++
            console.log(a, this.a);
        }
    },
}

当a/b任意一个值变动时，网页会进入假死状态，其实不用两个值，只要watch的时候更改自己的值就会导致假死

注意不要在watch中更改属性变量本身的值

10. 计算Computed的setter和getter

computed:{
    var_b: {
        get: function(){
            //读变量处理
        },
        set: function(){
            //设置变量处理逻辑
        }
    }
}

11. 箭头函数 ？

貌似在Vue内部是不能定义箭头函数的，但是在整个代码环境下是可以使用箭头函数的，Vue对象内部可以调用箭头函数

let output = (str)=>{return console.log(str)}

调用

cCount: {
  get:function () {
    strange(this.count)
    return this.count * 100
  },
  set:function (val) {
    this.count = val/100
  }
}

这里可以成功使用箭头函数创建的方法

12. 多条件处理 v-if v-else v-elseif

这里我写了个假枚举，用来支持开关变量

<div id="div">
<h1 v-if="type==Type.Type_1">类型1</h1>
<h1 v-else-if="type==Type.Type_2">类型2</h1>
<h1 v-else-if="type==Type.Type_3">类型3</h1>
<h1 v-else>类型type={{type}}</h1>
</div>

代码

var div = new Vue({
    el:'#div',
    data:{
    Type:{
        Type_None:0,
        Type_1:1,
        Type_2:2,
        Type_3:3,
    },
    type:null,
])

div.type = div.Type.Type_2;

条件判断内不支持位操作符号（|，&，^，～），使用后结果会不正确，|被解析成了过滤器

13. v-model

双向绑定，相当于增加了对变量属性的设置功能，强化版的{{}}，但他并没有{{}}灵活。

14. 什么时候需要{{}} ？

当需要在和普通内容混编多时候需要{{}}，当在特殊关键字下不需要，比如v-if，v-for，v-on，v-model，这些关键字都明确说明了之后的处理和vue有关，就不需要{{}}了

15.当checkbox和radio遇上v-for

错误写法：

<input v-for="(item, index) in radios" :key="index" name="1" type="radio" v-bind:value="item" v-model="radioxx">{{item}}

这样的循环无法得到{{item}}值
解决方式

<label v-for="(item, index) in radios" :key="index">
   <input name="1" type="radio" v-bind:value="item" v-model="radioxx">{{item}}
</label>

本身input不包含额外标签，即便后面跟着item和</>结束符，得到的值也只是input自己在循环，这时候只需要在外嵌套一个不影响排版的标签就可以令按钮横排显示

16. 组件（component）的内部结构

组件既可以单独创建，也可以在vue中创建，区别在于直接在对象下创建的组件直接对应字典数据表
Vue.component('组件名称'，{组件结构})
Vue({ compenents:{ '组件名称':{组件结构} } })
组件结构：

templete
重中之重，一个组件可以没有props传参，可以没有data数据，也可以没有computed处理，但必须有模版本身的内容。

props
props，数组/字典。
传递数组时，可接收的参数格式为 v-bind:变量名='值/其他变量名' 或 :变量名='值/其他变量名'格式, 可以传递多个变量值。
传递字典时，每个key对应的数据结构{ type:数据类型(String/Number/Boolean/Object),default:默认返回处理函数,required:是否必须,validator:验证函数返回真假}，如果数据为Object结构，则变量传递不全会丢失数据，而不会传递缺省的值.String类型使用key="value"方式传递，其他类型使用:key="value"方式传递。

data
数据，和Vue直接定义的data不同，这里是需要创建一个返回函数，data:function(){return {data结构} }, 写起来有些拗。

computed
计算，获得的变量通过一定方式处理获得computed:{ name: function(){ return 'abc' } } 或者经过get/set处理。

methods
同vue的methods，事件处理

记住定义的变量名必须为全小写，如果html结构中进行了大写操作，在传递后会强制转换为小写，但Vue的语法又对大小写敏感，你会拿不到任何值，比如:valFromMajor='value', 那么获得的变量名为valfrommajor，不写成小写会拿不到值。这个问题同样出现在Vue的data定义中。需要绑定的数据链必须是在html中，而不能是在templete模版中，否则会当成普通字符串处理。

17. 事件的发送 / 发射器 / $emit