vue入门

历史

vue作者是由雨溪，发布于2014年，是目前使用人数比较多的前端框架，该框架具有以下几个优点：

• JS框架
• 简化DOM操作
• 响应式数据驱动视图

框架和库的区别

• jquery库：->DOM+请求
• 框架：全方位功能齐全

KFC世界里:

• 库相当于是一个套餐
• 框架相当于是一个全家桶

代码上不同:

• 一般使用库的代码，是调用库的某个函数，我们把控库的代码
• 一般使用框架，其框架帮我们运行我们编写好的代码

1、初始化自身行为
2、执行你所编写的代码
3、释放一些资源

vue起步

vue文件介绍

1. 引包

方式很多，我采用cnpm 的方式
在对应文件位置打开终端，执行：cnpm i vue
其他方式详见官方文档

2. 启动

var app = new Vue({el:目的地,template:模板内容,data})
注意1：当template没有内容，则调用目的地，否则template。template的优先级高于el挂载的点
注意2：template当有多个元素的时候，要有一个根元素
注意3：在组件中data必须返回一个函数，函数返回一个对象

插值表达式

{{表达式}}内容可以为：

• 对象（不要连续3个{}），
• 布尔值，
• 字符串，
• 三元表达式

注意：必须在data 这个函数中返回对象中的声明

 var app2 = new Vue({
 el: "#app",
 data() {
     return {
     msg: "我是第一个VUE练习作业",
     isshow: true
     }
 },
 template: `
     <div>
     <div>{{msg}}</div>
     <div>{{ {'name':'jack'} }}</div>
     <div>{{ isshow }}</div>
     <div>{{ "isshow" }}</div>
     <div>{{ isshow ? "值为真":"假的" }}</div>
     </div>
 `,
 });

什么是指令

概念：对数据+页面更方便的输出，这个操作叫做指令，用v-xxx表示，在标签上使用

vue中常用的v-指令

v-text

元素的innerText必须是双标签，跟{{}}效果相似，但是这个替换是全替换，如果只要替换部分直接使用{{}}

v-html

元素的innerHtml（一定要有根标签）

v-if

判断是否插入这个元素，相当于元素的销毁和创建
语法：v-if = 字符串，字符串的值在data中声明
值为true时，相当于H5中的appendChild
值为false时，相当于H5中的removeChild
还可以结合 v-elseif v-else使用

v-show

隐藏显示元素，给元素style加上display基于css样式的切换
语法：v-show = 字符串，字符串的值在data中声明
值为true 时，相当于H5中的div.style.display = 'block'
值为false时，相当于H5中的div.style.display = 'none'

v-if和v-show区别

v-if是惰性的，满足条件才加载
v-show不管条件真假都会渲染
总结：v-if有更高的切换开销，v-show有更高的初始渲染开销

v-for使用

循环遍历数组或对象
语法：v-for = "(item,index in arrs)"
v-for 优先级高于v-if 、v-show、v-text、v-html

var app = new Vue({
     el:"#app",
     template:`
     <div>
     <div v-text='msg'></div>
     <div v-html='msg2'></div>
     <button v-on:click='changeBtn'>点我试试</button>
     <div v-if='isShow'>哈哈哈</div>
     <div v-show = 'isShow'>我来了</div>
     <ul >
     <li  v-for="(val,index) in items">{{val.name}}价格为:{{val.price}}</li>
     </ul>
     </div>
     `,
     data(){
         return{
             msg:"这是测试",
             msg2:`<h2>这是v-html测试</h2>`,
             isShow:false,
             items:[{
             name:"苹果汁",price:10
             },{
             name:"番茄汁",price:12
             }]
         }
     },
     methods:{
         changeBtn(){
         this.isShow =  !this.isShow;
         }
     }
 })

v-for中key的使用

v-for遍历数组，挂载组件，改变数据数据从而重新渲染页面
引用loadsh的_.shuffle打乱数组的顺序
这里通过npm 方式下载：
$ npm i -g npm
$ npm i --save lodash
html页面引入：
<script src="../node_modules/lodash/lodash.js"></script>
注意，在使用_.shuffle方法时，要被打乱的数组要接受该函数返回的结果，如下：
this.objs =_.shuffle(this.objs);
绑定key的值为数组中的id值，不能是数组的索引
例子：

<script>
        Vue.component("comItem",{
            template:`
            <div class="borderPane">
                <div >
                <p>{{prop.id}}</p>
                <p>{{prop.name}}</p>
                </div>
                <div>
                    <input type = "text" placeholder = "请输入名字"></input>
                    </div>
                </div>
            `,
            props:{
                prop:Object
            }
        })
        var APP = {
            template:`
            <div>
                <button @click = "change">改变顺序</button>
                
                <comItem v-for="(val,index) in objs" :prop ="val" :key = "val.id"></comItem>
            </div>
            `,
            // :key绑定key 的标识是遍历对象的值
            data(){
                return{
                    objs:[
                        {id:1,name:"张三"},
                        {id:2,name:"李四"},
                        {id:3,name:"王五"}
                    ]
                }
            },
            methods:{
                change(){
                //  一定要将改变顺序后的数组赋值给this.objs
                    this.objs =_.shuffle(this.objs);
                }
            }
        }
        new Vue({
            el:"#app",
            template:`<APP/>`,
            components:{
                APP
            }
        })
    </script>

虚拟DOM和diff算法的理解

虚拟dom的诞生，不直接操作dom元素，操作数据便重新渲染页面，隐藏在背后的原理就是使其高效的diff算法。
他的核心是基于两个简单的假设：
1、两个相同组件产生类似的dom结构，不同的组件产生不同的dom结构
2、同一层级的节点通过唯一id进行区分
diff示意图：

当节点发生改变，diff算法只会比较同一层级的节点。
如果节点类型不同，直接干掉前面的节点，在创建并插入新的节点，不会再比较这个节点之后的子节点
如果类型相同。则会重新设置该节点的属性，从而是实现节点的更新。
当某一层又很多相同的节点时，也就是列表节点，diff算法更新过程默认情况也是遵循以上原则

v-bind的使用

给元素属性赋值，可以给原生的标签属性赋值(value,class,id...)
也可以给自定义的属性赋值
语法：v-bind:属性名="常量|变量"
简写： :属性名="变量名"（也可以是对象{}）
单向数据绑定:data===>view
这个例子数据驱动视图变化,data的isShow内容改变,触发视图中类名变化（当isShow为true时active插入{active:isShow}）,从而改变界面样式，

 var app = new Vue({
             el:"#app",
             template:`
             <div>
             <div class = "op" v-bind:class ={active:isShow}>给你点颜色看看</div>
             <button v-on:click='changeColor'>点我试试</button></div>
             `,
             data(){
                 return{
                 msg:"这是测试",
                 op:"op",
                 isShow :falsed
                 }
             },
             methods:{
             // this指向template
                 changeColor(){
                 this.isShow =  !this.isShow;
                 }
             }
 })

单向数据流图解：

v-on

绑定事件
语法： v-on:原生js事件名 ='逻辑'或者'方法名'
缩写：@原生js事件名='逻辑'或者'方法名'
注意：方法名必须在methods中定义

v-model

只有表单控件能实现双向数据绑定
V-model只适用于有Value的控件，UI控件
v-model是双向数据绑定的语法糖详见下图：

1. 自定义实现双向数据绑定原理

v-bind绑定value属性
v-on绑定input事件，实现数据改变更新data的值，data的值改变view
图解：

1. v-model渲染原理

definedProperty

v-model和v-bind的区别

v-model双向数据绑定
v-bind单向数据绑定