向Vue进军（一）

一、moustache语法

1.变量

<span>Message: {{ msg }}</span>
<!--不能声明变量，如下-->
<span>{{var a}} </span> 

2.函数返回值

<span>{{(function a(){return 10})()}}</span>
<!--注意：不要把函数直接放进去 -->
<span>{{function a(){return 10}}}</span>

3.三元运算符

<span>{{msg > 10 ? "a" : "b"}}</span>

4.对象（放对象的时候注意两边空格要加上，不然就报错了！）

<span>{{ {name:'xr'} }}</span>

二、指令

1.v-for

遍历指令，想遍历谁，就在谁上面加v-for
注意：由于vue并行“能懒则懒”的高度复用原则，通常要加上key保证元素的唯一性，以此来提高性能

<div v-for="data in datalist" :key="item.id">
  {{ data.text }}
</div>

2.v-text

默认会渲染成文本

<span v-text="'hello'"></span>
<!-- 和下面的一样 -->
<span>{{'hello'}}</span>

3.v-html

渲染成html标签

<div v-html="html"></div>

4.v-once

只渲染一次，再次更改时,它是从缓存中获取，而不是再最新的数据，可以用于优化更新性能

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 多个子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="item in list" v-once>{{item}}</li>
</ul>

5.v-on

绑定事件，简写为@

<button @click="fn">点我啊</button>

6.v-show/v-if

效果上都是控制元素的隐藏和显示，但是前者是通过切换display为block和none来操作元素，后者是直接控制元素的存在与否

<span v-if="isShow">233333</span>
<span v-show="isShow">233333</span>

7.v-model

主要用在表单控件上，实现双向数据绑定

<!--文本输入框-->
<input v-model="value" >
<!--单选按钮中-->
<input type="radio" v-model="radioValue" value="male">male
<input type="radio" v-model="radioValue" value="female">female
<!--单选框中 v-model为true/false-->
<input type="checkbox" v-model="checkValue" >Vue
<!--多个单选框中 v-model为数组-->
<input type="checkbox" v-model="checkArr" value="Vue" >Vue
<input type="checkbox" v-model="checkArr" value="React" >React
<input type="checkbox" v-model="checkArr" value="Angular" >Angular
<!--若option有value值，则 selectValue 获取value里的值，若没有则获取option里的内容 -->
<select v-model="selectValue">
    <option >vue</option>
    <option value="1">react</option>
    <option value="2">吃饭</option>
</select>

8.v-bind

绑定变量，简写为：

<li v-for="data in dataList" :key="data.id"></li>

9.自定义指令

当现有指令无法满足你的时候，可以自定义指令

// 全局指令
Vue.directive("focus", {
  // 指令的钩子函数
  bind:{
    console.log('绑定时触发')
  },
  inserted(el, bindings, vnode){
    // el:当前操作的元素  bindings:指令的参数  vnode:虚拟节点
    console.log('元素插入到页面时触发')
    Vue.nextTick(()=>{
      el.focus();
    )
  },
  update(){
    console.log('更新时触发')
  },
  unbind(){
    console.log('指令销毁时触发')
  }
})
// 局部指令
directives: {
  focus: {
    // 全局指令的钩子函数局部也有
    inserted(el){
      el.focus()
    }
  }
}

三、常用方法和属性

1.vm.$mount

单元测试时需要挂载在内存上时使用

2.vm.watch

监视数据的变化

//由于数据更新是异步的，如果有需要得到更新后的数据，可以使用watch监视来获得
vm.watch('msg', (new,old)=>{
    console.log(new);
}

3.vm.$nextTick

获取DOM元素

//可以获取渲染完成后的DOM
vm.$nextTick(()=>{
    console.log(vm.$el.innerHTML)
}

4.vm.options

获得所有的配置项

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption)   //'foo'
  }
})