vue基础

这是我参与「第四届青训营」笔记创作活动的第14天

最近在做项目时发现对vue的基础有所遗忘于是打算复习并简单记录一下💾

var app=new Vue({
    el:"#app",
    data:{
      content:"byte"
}，
    methods:{
    work(){
    
}
}
});

v-text

设置标签的内容（textContent）

默认写法替换全部内容，使用差值表达式替换指定内容

v-html

设置元素的innerHTML

内容中有html结构会被解析为标签

v-text只会解析为文本

v-on

    var app=new Vue({
        el:"#app",
        data:{
            food:"apple"
        },
        methods:{
            // it:function () {
            //     alert("绑定成功！");
            // }
            it(){
                alert("success");
            },
            change(){
                this.food+="banana";
                console.log(this.food);
            }
        }
    })

    <div id="app">
        <!-- <input type="button" value="事件绑定" v-on:click="it"> -->
        <input type="button" value="事件绑定" @click="it">
        <input type="button" value="事件绑定" @dblclick="it">
        <h2 @click="change">{{food}}</h2>
    </div>

v-on指令为事件绑定元素
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
内部方法可以通过this访问成员

v-show

<body>
    <div id="app">
        <button @click="show">
            显示
        </button>
        <img src="./1.jpg" v-show="age>=18">
    </div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:16
        },
        methods:{
            show(){
                this.isShow=true;
            }
        }
    })
</script>

v-show指令根据真假切换元素的显示状态
原理是修改元素的display 实现显示隐藏
指令后面的内容最终会解析为布尔值 true显示 false隐藏

v-if

v-if指令是根据表达式真假切换元素的显示状态
本质和v-show不同是通过操纵dom元素来切换显示状态
表达式为true 元素存在于dom树中，false从dom树移除

v-bind

v-bind指令为元素绑定属性
完整写法v-bind：属性 = 简写为：属性名=

<img :src="imgSrc">
<img :title="imgTitle+'!'">
<img :class="{active:isAct}">//s

v-for

v-for指令根据数据生成列表结构
数组经常和v-for结合使用
语法是（item,index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式

v-on补充

事件绑定的方法写成函数调用的形式
定义方法时需要定义形参来接受传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车

v-model

v-moel指令是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据和表单元素的值是双向的

v-cloak

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak
使用css display：none配合v-cloak可以解决网速慢时页面展示出{{}}的问题

v-once

v-once所在结点再初次动态渲染后，就视为静态内容
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre

跳过其所在节点的编译过程
可利用他跳过：没有使用指令语法，没有使用插值语法的节点加快编译

自定义指令、

什么时候被调用

第一次绑定成功
指令模板发生重新解析时

  Vue.directive(name,callback);//全局配置      
      Vue.directive(name,o);//全局配置  
directives:{

            //简写形象相当于 绑定和更新 
            //出现-要还原为字符串形式
            'big-number'(e,b){
                 console.log(this);
                    e.innerText=b.value*10;
            },
            fbind:{
                //绑定时调用
                bind (el, binding) {
                     console.log(this);
                    el.value=binding.value
                },
                //所在元素插入页面时调用
                inserted (el,binding) {
                     console.log(this);
                    el.focus();
                },
                //指令所在模板被重新解析时
                update (el,binding) {
                     console.log(this);
                    el.value=binding.value;
                    el.focus();
                },
            }
        }

//指令要操作元素 直接操作dom this都是window

数据代理

Object.defineProperty

        let num=10;
     let person={
         name:'abc',
         sex:'man'
     }
     Object.defineProperty(person,'age',{
        //  value:19,
        //  enumerable:true,//可列举 默认不可列举
        //  writable:true,//可修改 默认false
        //  configurable:true,//可删除 默认false

         //当有人读取person的age属性时 get函数（getter）就会被调用  返回值就是age的值
        get(){
            return num;
        },
        //当有人修改person的age属性时 set函数（setter）就会被调用  且会收到修改值
        set(value){
            console.log('change',value);
            num=value;
        }
     })
    console.log(person);

数据代理通过一个对象代理另一个对象中属性的操作（读写
数据代理的好处更加方便地操作data中的数据
基本原理通过Object.defineProperty()把对象中所有属性添加到vm上

为每一个添加到vm上的属性都指定一个getter和setter

在getter和setter内部去读写data中对应的属性