vue指令

1：v-bind和v-on
v-bind绑定属性,v-on绑定事件
可以绑定class ,style

<div v-bind:class ='[red,blue]'></div>

<div v-bind:class ='{red:true,blue:false}'></div>

<div v-style='{width:dwith}'></div>

注意：元素本身的样式首先出现，vue解析时候绑定样式才出现；也可以用三元表达式。

2：条件渲染、列表渲染
（1）v-if和v-show都是控制元素是否隐藏

区别

• v:if 控制dom的移除和添加，v-show控制dipplay
• v-show控制dipplay ；适合频繁切换 v-if适合判断一次
• v-if可以写在template

（2）v-for（列表渲染）

• arr:(item,index) in arr 循环对象
• obj:(valye,key,index) in obj 循环数组
• 当循环数字的时候，渲染出从1到该数字
• 字符传也会被遍历熏染
• key判断是标记是否重服用一个元素,string或者number（最好不要用index，不只是用在v-for

当vue改变数组的时候

1. ！！！！不能通过索引的方式更改数组，这样不会渲染页面
2. 不能通过更改长度的方式更改数组 ，这样不会渲染页面
3. 数组变异方法 ：pop reverse shift unshift sort push splice 这些方法执行后会渲染的，因为他们在底层被vue重写
   当vue改变对象的时候
   向对象内添加或者删除属性,不会渲染页面
   可以通过$set更改对象的属性

（3）模拟数据发生改变后操作

• 定义一个渲染函数

function renderFunc() {
    console.log('渲染')
}

• 定义一个属性监听函数

/**
 * 属性监听
 * @param {*监听对象} data 
 * @param {*属性} key 
 * @param {*属性值} value 
 */
function myDefineProperty(data, key, value) {
    //观察子集是否为对象，如果是就执行defineobject    
    observer(value);
    Object.defineProperty(data, key, {
        //读取属性的时候
        get() {
            return value;
        },
        //设置属性的时候
        set(newval) {
            if (newval == value) {
                return;
            }
            value = newval;
            renderFunc();
        }
    })
}

定义一个观察者，

function observer(_data) {
    if (Array.isArray(_data)) {
        return;
    }
    if (typeof _data == 'object') {
        for (let prop in _data) {
            myDefineProperty(_data, prop, _data[prop])
        }
    }
}

进行数据劫持

observer(data)

当我们改变数据的时候，vue会使用object,defineProperty进行数据劫持，但是监听不到对象属性的添加和删除等，只能检测以有的数据;同时重写了数组操作的方法

//定义一个自己的push返方法
let oldPushFun = Array.prototype.push;
/**
 * 改写push方法
 */
Array.prototype.push = function(){
        // 改变this的指向
        oldPushFun.call(this,...arguments);
        // 执行render函数
        renderFunc();
}

3:双向数据绑定

<input v-model:value='value' type="text">        
<textarea v-model="content" name="" id=""></textarea>

• 复选框中绑定

  <label for="one">第一 </label>
        <input type="checkbox" value="html" id="one" v-model ='checkedList'>
        <label for="tow">第二 </label>
        <input type="checkbox" value="jsss" id="tow" v-model ='checkedList'>
        <label for="th">第一 </label>
        <input type="checkbox" value="node" id="th" v-model ='checkedList'>
        {{checkedList}}

• 单选框

    <label for="html">html</label>
        <input type="radio" id="html" value="html" v-model='picked'>
        <label for="">js</label>
        <input type="radio" id="js" value="js" v-model='picked'>
        <label for="node">node</label>
        <input type="radio" id="node" value="node" v-model='picked'>
        {{picked}}

• 下拉框

 <!-- 下拉框 -->
        <select name="" id="" v-model='seList' multiple>
            <option value="" disabled>请选择</option>
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="js">js</option>
        </select>