一 历史介绍

angular.js 09年，年份较早

react 2013年, ⽤户体验好，

vue 2014年, ⽤户体验好 作者:尤⾬溪 江苏⽆锡⼈ 国⼈骄傲 

二 核心原理

DOM体验 + 发请求 + 模板引擎 + 路由功能

VUE-KFC的世界⾥,库就是⼀个⼩套餐, 框架就是全家桶

官网: https://cn.vuejs.org/

三  使用

1 . vue起步

1): 引包

2): 启动         

new Vue({

    el:'#app',//⽬的地

    data:{

        保存数据的地方

    },

    methods:{

        保存方法的地方

    }

});

3): 插值表达式

        {{ 表达式 }}  类似模版中的变量表达

        对象 (不要连续3个{} )    {{{name:'jack'}}}错误       {{ {name:'jack'} }}正确

        字符串 {{ 'xxx' }}

        判断后的布尔值 {{ true }}

        三元表达式 {{ true?'是正确':'错误' }}

        ps:  要⽤插值表达式 必须要data中声明该属性

什么是指令

        vue中提供了⼀些对于页面 + 数据的更为方便的输出, 这些操作就叫做指令, 以v-xxx表示

        例: <div v-xxx ></div>

        在vue中 以v-xxx开头的就叫做指令

        指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值，框架会进⾏相关DOM操作的绑定

        vue中常⽤的v-指令演示

        v-text:

        v-html: 元素的innerHTML

        v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建

        v-else-if   

        v-else

        v-show 隐藏元素

        如果确定要隐藏, 会给元素的style加 上display:none。是基于css样式的切换

        说明:  v-if和v-show的区别?

        v-if为DOM渲染属性,  通过添加删除DOM节点实现

        v-show属于css渲染,  通过css的display:none实现

        v-bind使⽤ 给元素的属性赋值

        可以给已经存在的属性赋值

        也可以给⾃定义属性赋值

        语法:

                在元素上 v-bind:属性名="常量||变量名"

         例:

                  v-bind:href = 'res.url'  可以简写为 :href = 'res.url'

        ps: 如果直接绑定属性值时,可以不用外部{ } , 如果设置属性与属性值时,要加入外部的{ }

        :src="变量"               绑定图片地址  

        :class = "{active:isActive}" 增加样式, active=’变量’

        样式改变:

        :style='{color:isColor,fontSize:fontSize+"px"} 中间的变量可以直接被解析

                功能类似于 jq中 attr为标签设置属性

                简写形式 :属性名="变量名"v-on的使⽤

                处理⾃定义原⽣事件的,给按钮添加click并让使⽤变量的

        v-on: 绑定事件

                事件名="表达式||函数名"

                简写方式: @事件名="表达式"

        1. 绑定监听:

                  v-on:xxx="fun"

                  @xxx="fun"

                  @xxx="fun(参数)"

           vue中的事件对象获取, 当方法中没有参数时, 在方法中的第一个参数就是事件对象

当方法中有参数时,需要手动, 在调用事件时,加入$event,代表事件对象

默认事件形参: event                                隐含属性对象: $event

        2. 事件修饰符:

                  .prevent : 阻止事件的默认行为 event.preventDefault()

                  .stop : 停止事件冒泡 event.stopPropagation()

        3. 按键修饰符

                  .keycode : 操作的是某个keycode值的健

                  .enter : 操作的是enter键

        v-model 双向的数据绑定(重点)

                双向数据流（绑定） 页面改变影响内存(js) 内存(js)改变影响页面

                        使用v-model(双向数据绑定)自动收集数据

                        单向数据绑定 内存改变影响页面⾯改变

                ps:   v-bind 和 v-model 的区别?

                          v-model: 外部改变数据时,影响内部

                          v-bind:  外部改变数据时,不影响内部

                  v-for的使⽤

                        基本语法 v-for="item in arr"

                        对象的操作 v-for="item in obj"

                        如果是数组没有id

                                v-for="(item,index) in arr" :class="index"