Vue笔记（1）

Vue笔记（1）

1.vue

        Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
        与jq的区别：
                 vue不操作dom,面向数据
                 jq,js库，封装dom，动画，ajax

2.使用

let vm=new Vue({
    el:'',//绑定的dom节点
    data:{
        msg:'hello'
    },//数据模型
    methods:{
        //在vue实例内访问vue实例身上的属性和方法使用this
        changMsg(){
            this.msg='world'//更改msg
        }
    }//函数/节点
})

{}内this都指向vm
在vue实例中访问内部的属性和方法，使用this访问
在vue实例外访问内部的属性和方法，使用实例本身访问

    <div>
        在模板内访问vue实例数据模型中的数据
        {{msg}}//hello
    </div>

事件绑定：@事件名=“函数名”
<button @click=“changeMsg”>点击我改变msg
修改数据：
1>函数内修改 this.msg=‘world’
2>vue实例对象外部修改 vm.msg=‘world’

3.vue 虚拟操作 虚拟dom树 虚拟节点

补丁算法 哪里变了补哪里
A vdom树 数据：a b c A更改a，仅更改使用a的部分
a块（代码发生变化） b块 c块 A vdom树 重新渲染到页面上

<p>{{a}}</p>

vnode节点 虚拟的dom节点

4.MVVM模式

Model 数据模型
View 视图
VM ViewModel 视图模型
数据模型中的数据更改，会自动映射到视图

5.生命周期(钩子函数)

beforeCreate(){}创建实例之前  初始化了事件处理程序，生命周期
created(){}实例创建好了,可以访问数据模型中的数据  初始化了数据和方法，将他们绑定在实例上
beforeMount(){}挂载之前  已经有模板了
mounted(){}挂载之后  
beforeUpdate(){}更新之前  
updated(){}更新好了
beforeDestroy(){}销毁实例之前
destroyed(){}实例销毁完毕

6.渲染

1>基本渲染 {{}}

2>列表渲染（循环渲染）v-for指令

<li v-for='(item,index) in arr' :key='index' :title="msg">
    <!-- 属性渲染  key:当前作用域/数据模型    使用变量:key    唯一区分每次遍历出来的内容不一样-->
    <!-- 有几个item生成几个li -->
    {{index+1}}.{{item}}
</li>

指令存在的位置就是属性存在的位置

3>条件渲染 v-if v-else v-show

    <div v-if='isLogin'>欢迎您</div>
        <!-- true显示欢迎您  false查看器里没有-->
    <div v-else>请登录</div>
        <!-- false显示请登录 true查看器里没有-->
    <div v-show='isLogin'>测试是否显示</div>
        <!-- true显示  查看器里一直有-->
##### 4>简写
    <!-- v-html  将html代码片段放入div中做子节点-->
        <div v-html="htmlStr"></div>
    <!-- v-bind:属性名  绑定属性 属性渲染-->
        <div v-bind:title="msg">属性绑定</div>
        <div :title="msg">属性绑定</div>
    <!-- v-on:事件名='事件处理程序' 绑定事件 -->
        <div v-on:click='test'>弹框</div>
        <div @click='test'>弹框</div>

    let vm=new Vue({
        el:"#app",
        data:{
            msg:'hello',
            htmlStr:'<span>123</span>',
        },
        methods:{
            test(){
                alert(1);
            }
        },
    })

5>样式 跟对象或数组

<div v-bind:style='styleObj'>Hello</div>
<div :style="{color:currentColor}">World</div>
<div :style="[styleObj,styleObj2]">HelloWorld</div>
属性有重复,在数组内靠后的生效

6>class 跟对象或数组 对象内是类名:true/false

<div class="red" :class='{size:true}'>Hello</div>
<div :class='{red:false,size:true}'>World</div>
<div :class='[{red:true},{size:false}]'>hello world</div>

7.事件传参

函数后加(参数)
    <button @click="toEdit($event,item)">修改</button>
    //($event(事件对象),item)
    methods:{
        toEdit(e,item){
            console.log(e,item);
        }
    }

8.事件修饰符(“事件处理程序”)

只有纯粹的数据逻辑，而不是去处理dom事件细节

.stop   停止事件冒泡    <div class="inner"  @click.stop="inner">
.prevent    阻止事件默认行为    <a @click.prevent="toJump" href="http://www.baidu.com">百度一下</a>     
.capture    在事件捕获阶段执行事件处理函数      <div class="outer"  @click.capture="outer">
.self   只当在event.target是当前元素自身时触发事件处理函数  <div class="outer"  @click.self="outer">
.once   事件处理函数执行一次后解绑
.passive    滚动事件的默认行为(即滚动行为)将会立即触发，一般与scroll连用，能够提升移动端的性能
            <div class="outer"  @scroll.passive="outer">

按键修饰符：一般与keyup事件类型配合使用
<input type=“text” @keyup.enter=“keyupHandler”>
鼠标修饰符：.left .right .middle

9.表单数据绑定v-model

在表单控件元素上创建双向数据数据绑定，忽略所有表单元素的初始值，只会选择Vue实例对象来作为具体的值
数据模型中的数据发生改变时，视图跟着变；视图改变时，数据模型中的数据也跟着变

原理：
    数据模型->视图
        stu.username="tom";
        监听对象的属性值发生变化
        Object.defineProperty(obj,"username",{
            configurable:true,
            enumerable:true,
            getter(){
                return 1;
            },
            setter(param){
                //123
                input.value=param;
            }
        })
        console.log(obj.username);
        obj.username="jerry";
    视图->数据模型
        在input上监听键盘抬起事件，获取input的value值，设置给数据模型stu.username
        input.onkeyup=function(){
            stu.username=this.value
        }

v-model="数据模型中的变量名/数据模型中的对象的属性值"
    <input type="text" v-model="stu.username">
        v-model.lazy="stu.username" .lazy在change发生后才更改 
        v-model.trim="stu.username" .trim去除数据前后空格
    <input type="text" v-model.number="stu.age">
        年龄：number类型  number修饰符 采集到的数据转为number类型再存到数据模型中
    <input type="radio" value="male" v-model="stu.gender">男
    <input type="radio" value="female" v-model="stu.gender">女
        性别：checked  同一组单选按钮，绑同一个v-model
    <input type="checkbox" value="basketball" v-model="stu.hobby">篮球
    <input type="checkbox" value="swimming" v-model="stu.hobby">游泳
    <input type="checkbox" value="dancing" v-model="stu.hobby">跳舞
        复选按钮绑定同一个v-model,需要给定默认数组
    <select v-model="stu.city">
            <!-- 没有给默认值的情况下，多选自动生成数组 -->
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="beijing">北京</option>
    </select>

    data:{
        msg:"hello",
        stu:{
            // username:"",//当做绑定表单控件的value值
            // age:"",
            hobby:[],//复选框默认给空数组作为初始值
        }
    }

10.计算属性

计算属性 有依赖关系的数据
total a b
有依赖关系的数据发生变化，计算属性也发生变化

computed:{
    // 计算属性的属性名是函数的方法名
    total(){
        return this.a + this.b;
    }
}

11.监听属性

监听属性：监听某一属性变化

watch:{
    // 函数的名字是监听数据的名字
    a(newValue,oldValue){
        // console.log(newValue,oldValue);
        this.total=this.a + this.b;
    }
}

普通监听只监听地址变化
深度监听还要监听内部数据属性的变化

obj:{
    handler(newValue,oldValue){
        console.log("obj数据发生了变化--");
    },
    deep:true//核心
}

12.组件

内部封装html代码，高级自定义的html代码元素
组件是可复用的vue实例，接收与new Vue相同的选项
创建组件

let myCom = {
    data(){
        return {
            comMsg:"组件数据"
        }//该组件的数据模型,数据模型之间相互独立
    },
    //模板,只能有一个根节点,本身数据来源->组件内
    template:`
        <div>
            <span>{{comMsg}}</span>
            <button @click="comMsg='新数据'">更改数据模型中的数据</button>
        </div>
    `
};

组件使用
在html中使用 标签<my-com></my-com>

1>组件注册

全局注册：注册a组件
组件被注册在全局范围内，在任何一个实例对应的模板中都可以使用该组件。
每个组件内数据模型可能一样，但地址不同

 Vue.component("my-com",myCom);//组件名，组件

局部注册：注册在哪个组件内，哪个组件可以使用
my-comB 注册a组件 只能在my-com-b中使用
如果再有my-com2 不可以使用a组件，a组件没有注册在my-com2中

let myComB={
    //局部注册A组件
    components:{
        "my-com-a":myComA
    },
    template:`
        <div>
            B组件
            <my-com-a></my-com-a>
        </div>
    `
}

2>组件交互 数据通信

子组件使用父组件数据

a.父组件传递数据给子组件
静态属性/动态属性/横线拼接的数据
<my-com title="" :msg="msg" attr-a=""></my-com>
b.子组件接受并处理数据
    接收父组件传递的数据,驼峰命名法接收
{
    props:["title","msg","attrA"],
    template:``
}

父组件使用子组件数据

<my-com @my-event="myEventHandler" :title="msg" static-attr="父组件给子组件的静态数据"></my-com>

【事件】发射 自定义事件

methods:{
    toEmit(){
        //发射  参数：(自定义事件名称，事件处理程序实参/发射的数据)
        // 函数触发my-event事件
        this.$emit("my-event",this.comMsg,100);
    }
}

在子组件内发射，在父组件内接受

methods:{
    //my-event事件处理程序
    myEventHandler(a,b){
        console.log(a,b, "--");
        this.aa=a;
    }
}

子组件发射时机：
a.手动按钮发送
b.监听子组件内数据变化，然后发射
在子组件内监听comMsg的变化，this.$emit("",this.comMsg)
父组件的事件处理程序调用，可以更改父组件数据模型中的数据，同步反映到父组件视图中
父组件给子组件数据时，子组件可以定义数据类型
静态传参，传字符串类型
:动态传参，可以传(number类型，布尔类型，对象，数组)/变量

   <my-com :title="hello" :flag="true" :a="1" :obj="{name:'tom'}"></my-com>
    {
        //props:["title","staticAttr","obj"]
        props:{
            title:String
            obj:Object
        }
    }

单项数据流(数据更改方向)：
子组件使用父组件数据props 父子组件使用子组件数据emit
父可以改子，子不能改父
父组件可以改给子组件的数据 子组件不可以改父组件的数据

3>数据校验props

null、undefined可以通过任何校验
        <my-a :msg="msg" sub-msg="父给子的数据" :stus="[1,2,3]" :is-active="true" :age="60"></my-a>
        props:{
            msg:String,
            subMsg:String,
            // stus:Array,
            stus:{
                type:Array,
                // 数组给默认值
                //错误
                // default:[6,7,8]
                //正确 Object/Array要一个工厂函数返回默认值
                default(){
                    return [6,7,8];
                }
            },
            // isActive:Boolean,
            isActive:[String,Boolean],
            name:{
                type:String,
                //必填项
                // required:true
                default:"jerry"
            },
            //自定义校验规则
            age:{
                type:Number,
                //校验器 value是形参，实参是将来父组件给子组件传递的数据
                validator(value){
                    return value>50;//if value>50,return true,else return false
                }
            }
        }