vm的实例方法和指令的小手册

el,options,nextTick,watch,mount
once,html,if,for,model,bind,on
select,radio,checkbox

vm实例上的方法

{el:'#app'}

<div id="app">{{msg}}{{arr}}</div>
    <!-- mkdir vue-demo;npm init -y;npm i vue;touch demo.html -->
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
    let vm = new Vue({
        el:'#app',
        data:{msg:'msg'}
    })
    vm.msg = 'msg'
    </script>
复制代码

// 明显输出就会慢于下面的那句 初始的
vm.$nextTick(()=>{
    console.log('nextTick',vm.$el.innerHTML)
})
console.log('初始的',vm.$el.innerHTML)
// 视图更新的时候触发这个方法，所以如果连续改属性，只会触发一次。
vm.$watch('msg',function(newValue,oldValue){
    console.log('watch')
    console.log(newValue,oldValue)
})
// 控制台输入下面这句
// vm.msg = '新的msg';vm.msg = '更新的msg';console.log('控制台',vm.$el.innerHTML)

复制代码

mutache

取值表达式 {{}} ：里面可以直接进行 取值，运算，三元

• {{this.msg}} 等同 {{msg}}
• 如果输出一个对象的话 {{ {name:1} }} ，注意前后的空格
• {{ 'msg' + 'hi' }}

vue中的指令

vue中指令是带有 v- 前缀的特殊特性，主要功能就是操作DOM。 常用的指令：

• v-once 当前数据只渲染一次。渲染静态数据很有用处。数据变了，视图不会更新。 <div v-once>{{msg}}</div> 当 vm.msg 变化的时候，这里的值是不变的。因为内部就进行缓存，以后使用的都是缓存里的结果
• v-html 插入html文本， <div v-html="msg"></div> 。内部使用的是innerHTML。有一定的安全隐患，XSS攻击。不能直接将用户输入的内容展现出来，内容 必须 是可信任的。比如在input框里双向绑定，输入 <img src="" onerror="alert(0)">
• v-if/v-else 如果不成立，dom会消失，控制dom有没有
• v-show 控制的样式是none，这两可以和 template 适时合作
• v-for 控制循环， 数组、对象、数字 都行，重点的key，key尽量不用 index ，因为列表重新 排序 的话，index从上到下还是0，1，2，但是其他属性都会变化了，这样必须要重新渲染。如果是id的话，重新排序之后不一定是0，1，2了，这样排序的时候移动节点就可以了。这么理解吧，如果key是index的话，只是移动节点是不够的，因为移动节点之后，索引就跟着跑了，但是索引从上之下又必须是0，1，2，3，这样必须重新操作节点。
• v-model。v-model其实是 :value="msg" v-on:input 的语法糖。说起来，顺便叨叨一句，方法不写在data里，因为this指向window，所以写在methods里。methods里用箭头函数要考虑this。常用的 select,radio,checkbox,textarea
• v-bind 属性绑定。还常用来控制样式，三种方式 :class="['a','b']" :class="{b:true}" :style="[{background:'blue',color:'red'}]"
• v-on 事件绑定， @click=fn($event,other)

<!-- data那边加个{flag:true,fruits:['apple','banana'] }-->
<div v-once>{{msg}}</div>
<div v-if="flag"> true </div>
<div v-if="flag"> true </div>
<!-- 改进为 下面 但是 div就多一层 -->
<div v-if="flag">
    <div> true </div>
    <div> true </div>
</div>
<!--  改成template template不是标签 不会渲染 -->
<template v-if="flag">
    <template> true </te>
    <div> true </div>
</template>
<!-- v-else -->
<div v-else>
  <span>else</span>
</div>
<div v-for="fruit in fruits">{{fruit}}</div>
<div v-for="(fruit,index) in fruits" :a="index" :key="index">{{fruit}}{{index}}</div>
<!-- v-model -->
<input type="text" :value="msg" v-on:input="fn($event,1)">
<input type="text" v-model="msg">

<!-- class="abc b" -->
<div class="abc" :class="{b:true}" >
hh
</div>
<!-- class="abc a b d"  在data那边增加c:'d'-->
<div class="abc" :class="['a','b',c]" >
hh
</div>
<!-- style多个的时候数组对象都行，数组的话经常和data里的配合使用，data里添加color:{color:'red'} -->
<div style="color:red;" :style="[{background:'blue'},color]">
  ss
</div>
复制代码

细说v-model

上面也说到，v-model其实是 :value="msg" v-on:input 的语法糖。

<!-- v-model input输入框来一波玩耍  -->
<input type="text" :value="msg" v-on:input="fn($event,1)">
<input type="text" v-model="msg">
复制代码

// 别忘了逗号
methods:{
  // 当参数多的时候，可以传，这边是示例，无意义
  fn(e,other){
    vm.msg = e.target.value
    console.log(other)
  }
}
复制代码

select与v-model

select的时候，option分两拨，一拨是请选择，一拨是循环列表。 如果有默认选中的，selectvalue可以等于选中的option的value的值 select的绑定的是，选中的option的value的值。如果没有就算选中的option的innerHTML。

<!--  
        data: {
          // 存放数据
          msg: "hello",flag:true,fruits:['apple','banana'] ,
          selectvalue:'c2',
          lists:[{value:'c1',id:1,cnt:'菜1'},{value:'c2',id:2,cnt:'菜2'}]
        },
     -->
<select name="" id="" v-model="selectvalue">
  <option  disabled> 请选择</option>
  <option  v-for="(list,key) in lists" :value="list.value" :key="id">{{list.cnt}}</option>
</select>{{selectvalue}}
<!-- 控制台来一个 vm.selectvalue = '请选择' -->
复制代码

radio和v-model

radio可以根据v-model来进行分组，v-model的值是某个radio的值，就是默认的选中项。

<!-- data添加radioValue:'male', -->
<!-- radio可以根据v-model来进行分组，更准确的说，同一组的v-model绑定的值是一样的 -->
    男<input type="radio" v-model="radioValue" name="gender" value="male" id="">
    女<input type="radio" v-model="radioValue" name="gender" value="female" id="">
    <div>
      {{radioValue}}
    </div>
    <!-- 点击看看 -->
复制代码

checkbox和v-model

checkbox情况比较复杂点。 单个复选框的话：选中的话checkboxValue的值是true否则false，也就是普通的布尔值，适用于同意协议之类的。 多个复选框的话，checkboxValues必须是个数组，如果还是布尔值的话，true就是所以都选中，false是都不选中，不是本意。数组里面是选中的checkbox的value。

<!-- 
      checkboxValue:true,
      checkboxValues:[],
  -->
 单个<input type="checkbox" v-model="checkboxValue" name="" value="singel" id="">
 <div>{{checkboxValue}}</div>

 <!-- 爱好 -->
    游泳<input type="checkbox" v-model="checkboxValues" name="" value="swim" id="">
    健身<input type="checkbox" v-model="checkboxValues" name="" value="run" id="">
<div>
  {{checkboxValues}}
</div>

复制代码

修饰符

修饰符 .number .trim ，默认在input里输入的都是字符串类型，需要number类型的需要加修饰符， v-model.number = "" ，还有需要去掉前后空格的， v-model.trim = ""

键盘修饰符也常用，希望按下某个特定的键触发事件,必须同时多个按键的话用点连接即可， v-on:keyup.enter="fn()" ，也可以使用键盘码。配置一个键盘code别名 Vue.config.keyCodes={'f1':112} `

练习复选框全选

上面基本看看官方文档，没啥大难度。练习个小例子，全选中的需求，很多个复选框，其中有个全选中的复选框

• 全选中的复选框点:white_check_mark:，所有项都选中，把:white_check_mark:点掉都不选中了。
• 如果所有项的都选中了，全选中的也会自动变成:white_check_mark:。
• 如果在点击全选中之后，如果将某项去掉勾选，则全选中也会自动去掉:white_check_mark:

搭建例子。

<!-- data添加checkboxAll:false -->
     游泳<input type="checkbox" v-model="checkboxValues" name="" value="swim" id="">
     健身<input type="checkbox" v-model="checkboxValues" name="" value="run" id="">
     全选<input type="checkbox" v-model="checkboxAll" name="" id="">
复制代码

好，接下来就是实现！

全选的1.0版本

其实思路，针对需求，第一条就是给全选中这个绑定change事件，判断checkboxAll值控制checkboxValues。其他两条就是给所有项绑定change事件，判断checkboxValues值控制checkboxAll。于是

<!-- 爱好 -->
     游泳<input type="checkbox" v-model="checkboxValues" name="" value="swim" id="" @change="checkSingleFn($event)">
     健身<input type="checkbox" v-model="checkboxValues" name="" value="run" id="" @change="checkSingleFn($event)">
     全选<input type="checkbox" v-model="checkboxAll" name="" id="" @change="checkAllFn($event)">
复制代码

// methods那边加
  checkAllFn(e){
    this.checkboxAll ? (this.checkboxValues = ['swim','run']):(this.checkboxValues = [])
  },
  checkSingleFn(e){
    // 这里因为选中的顺序不一样，可能是['run','swim']，所以需要琢个判断是不是在选中的列表里
    this.checkboxAll = ['swim','run'].every(item=>this.checkboxValues.includes(item))
  }
复制代码

但是每项都绑定事件感觉很麻烦呐，虽然一般这种都是写在循环里，但还是有点麻烦，有没有更优雅的实现！？

全选的2.0版本

其实再仔细分析。可以这样想，checkAll始终和checkValues相关。当checkValues变化的时候，checkAll变化，而当checkValues变化的时候，checkValues也会变化，但是这里更重要的主体其实是checkValues，于是，想想vue里有这种能力的，还有一个人，computed。通常的使用方法就是平时使用的样子，还有种类似于get和set的方法，在这种时候，就可以拿出来晒晒了。

于是

<!-- 我是懒惰的分界线 -->
     <br>
     游泳<input type="checkbox" v-model="checkboxValues_c" name="" value="swim" id="">
     健身<input type="checkbox" v-model="checkboxValues_c" name="" value="run" id="">
     全选<input type="checkbox" v-model="checkboxAll_c" name="" id="">
复制代码

// data 那边增加checkboxValues_c:[]
computed:{
  checkboxAll_c:{
    get(){
      // 所有项都选中的时候，也就是在选中列表的时候，为选中状态
      return ['swim','run'].every(item=>this.checkboxValues_c.includes(item))
    },
    // 全选项变化的时候
    set(newValue){
      newValue? (this.checkboxValues_c = ['swim','run']):(this.checkboxValues_c = [])
    }
  }
}
复制代码

搞定，不需要监听事件~

姜文大神的视频