VUEjs学习笔记1

vuejs框架
    vue叫做渐进式框架，由底层上传逐层应用，用来将页面代码进行组件化和规范化，单页面开发，提供浏览器加载速度，加上代码写作，采用mvvm模式，可以实现动态加载标签，动画效果，表单验证，链接后台等
    mvc和mvvm模式
    mvc模式
        m模型层：html    v视图层：css    c控制层：js
    mvvm模式
        model->viewmmodel->view 双向绑定，动态更新
    渐进式框架：可增量采用，渲染->组件->路由->状态管理
     语法
    <div id="app">{{str}}</div>
    var v =new Vue({
                    el:"#app",  //element缩写，获取标签节点
                    data:{   str:"hello world!"},  //定义变量
                    methods:{  }  //定义函数
            })
    关键字
        模板：在页面上要渲染vue的标签，例如:div
        挂载点：用来渲染js代码的标签叫挂载点，例如：el操作的标签
        实例：用来创建vue对象，例如：new Vue()
        数据：在vue下定义的变量，都放在data属性里
        函数：自己创建的函数体都放在methods里
        插值表达式：用来调用vue下的变量和函数，例如：{{str}}
    插值表达式
        {{str}}输出变量    {{1+3+4}}定义表达式
        {{str.replace("o","#")}} 调用函数
        {{str=="hello world!"?'yes':'no'}} 定义三元表达式
    指令
        1.v-text 操作文本内容
        2.v-html 操作文本和标签
        3.v-bind 动态绑定属性  单向绑定
           <img v-bind:src="url">
                   <img :src="url"> 简写
        4.v-model 双向绑定
        5.v-on 绑定事件  //@替代v-on
           <h1 v-on:click="fun()">{{str}}</h1>
           methods:{
                        fun:function(){ alert("fun函数执行")}
                       }
        6.v-show 显示隐藏元素
        7.v-if v-else-if v-else 判断指令
           <p v-if="user=='leader'">早上好，领导</p>
                   <p v-else-if="user=='customer'">你好，客户</p>
                   <p v-else>请问你找谁</p>
        8.v-for 循环指令
           <h2 v-for="i in 10">{{i}}</h2> 遍历数字
                   <h2 v-for="s in 'hello'">{{s}}</h2>  遍历字符串
                   <h2 v-for="(v,i) in ['a',2,3,4]">{{i}}--{{v}}</h2> 遍历数组
                   <h2 v-for="(item,key) in {name:'lisi',age:23}">{{key}}--{{item}}</h2>  遍历对象
    v-show和v-if区别
        v-show是设置css的display属性进行隐藏，v-if是删除了标签
        v-show标签纸编译一次，v-if标签会多次创建和销毁
        v-show只用于减少数据渲染，v-if可以做权限判断和动态数据加载
        9.v-pre 让某个标签和它的子标签跳过编译 用来减少编译时间
        10.v-once 让某个标签和组件只渲染一次
        11.v-cloak 让vue实例化后再编译标签
    事件
        键盘修饰符
             例如：v-on.keyup.13="fun"  //当按下回车调用fun函数
             enter 回车 tab制表符 shift ctrl esc
             delete up down left right
        事件修饰符
             1.stop 阻止冒泡
             2.prevent 不再重载页面
             3.capture 调用捕获模式
             4.self 让事件操作元素本身，子元素不会触发
             5.once 让事件只执行一次
    样式
        操作class属性，绑定多个
        数组定义
            <div :class="[name1,name2]" @click="fun3"></div>
            data:{ name1:"box1",name2:"box2"}
        对象定义
            <div :class="{'box1':true,box2:flase}"></div>
    函数
        自定义函数
           methods:{ 
                fun:function(){
                this.变量
                } 
           }
            <div @click="fun">
        过滤函数
           filters:{
                            fun:function(v){ return v.toUpperCase() }
           }
            <h1>{{str|fun}}</h1>
        计算函数
           computed:{
                            fullname:function(){
                                return this.a+this.b
                            }
                       }
            姓<input type="text" v-model="a">
                    名<input type="text" v-model="b">
                    <h2>{{fullname}}</h2>
        监听函数
           监听函数的名称要与变量名相同
           watch:{
                        count:function(news,old){   //监听函数的名称要与变量名相同
                                console.log(news,old)
                                if(news>5){
                                        this.count=5
                                }
                        }
                       }
    vue对象
        vue下的所有函数和变量，也可以在外部调用和定义
        获得变量和函数的写法
           var v = new Vue({}）
           console.log(v.$data.str)
                   console.log(v.tel)   //vue2.0之后可以这样用
        新增变量和函数的用法
           v.$watch("num",function(news,old){
                        console.log(news,old)
                   }) 
    面试题
        1.vue下key值的作用
           当定义v-for循环指令时，要写一个key的属性，存储唯一标识循环内容的变量
        key的作用是为了提高更新虚拟dom，原理是在更新过程中通过key可以判断两
        个节点是否是同一个，从而避免更新不同元素，提高工作效率，减少dom渲染
        注意：当遍历对象数组时，要用对象下的id值表示值的唯一性
        2.计算函数和监听函数的区别
           计算函数：用来计算变量
                计算函数处理多个变量
                具有缓存行，页面重新渲染值不会变化，会返回之前的结果，
            不再执行函数
                是同步值，不能操作异步
           监听函数：用来观察动作
                只监听一个变量
                不具有缓存性，页面重新渲染值不变化也会执行
                可以执行异步函数
        3.双向绑定的原理是什么
           是采用数据劫持结合发布订阅者模式，通过Object.defineProperty()来劫持
        各个属性，通过getter，setter进行对象属性的获取和修改，在数据变动时发布
        消息给订阅者，触发响应的监听回调
           例如：
             var data={str:""}
                    Object.defineProperty(data,"str",{
                            get:function(){
                                return str
                            },
                            set:function(v){
                                str=v
                            }
                    })
                    var inp=document.getElementById("inp")
                    var h1=document.getElementById("font")
                    inp.onchange=function(){
                            data.str=inp.value
                            h1.innerHTML=data.str
                    }
    组件
         组件是程序员自己创建的标签，为了让代码可以重复利用，减少代码和选择器的定义，
    在调用组件时，数据发生改变，不会影响其他组件
         注册组件
        components:{  //注册组件
                            "List":{  //自定义组件名
                //被映射成的标签
                                template:"<h1 @click='fun'><a href='#'>{{aa}}</a></h1>",
                           }
                    },
         子组件与父组件传值
            父组件传给子组件
        父组件通过自定义属性拿到vue下的变量，子组件通过props接收父组件的属性值
        <List :aa="str">aaa</List>
        components:{  //注册组件
                        "List":{  //定义的组件名称
                                props:["aa"], //接收组件里的属性名
                //通过插值表达式输出到标签里
                               template:"<h1 @click='fun'><a href='#'>{{aa}}</a></h1>",
                        }
                    },
            子组件传给父组件  通过函数传值
        子类通过事件调用函数，在函数下通过$emit调用父类事件的函数体
        <List @ww="fun1">aaa</List>
        components:{  //注册组件
                        "List":{
                                props:["aa"],
                                template:"<h1 @click='fun'><a href='#'>{{aa}}</a></h1>",
                                methods:{
                                        fun:function(){
                    //$emit传给父组件里的函数
                                            this.$emit("ww",this.aa+"11")
                                        }
                                }
                        }
                    },
        methods:{
                        fun1:function(v){ console.log(v) }  //通过函数的参数直接拿到值
                    }
    通信事件
        $emit(自定义事件名称，参数) 触发自定义事件
        $on(事件名称，函数) 监听事件
        mounted:function(){
            this.$on("ww",function(v){
                console.log("ww函数被执行了，监听到了，参数为"+v)
            })
        }