本节主要介绍Vue.js开发中的常用指令介绍，后续会持续补充

1. vue中常用的v-指令

v-text // 是元素的innerText，只能在双标签中使用
v-html // 是元素的innerHtml,不支持{{xxx}}
v-if // 元素是否移除或者插入
v-show // 元素是否显示或隐藏
v-model // 双向数据绑定,v-bind是单向数据绑定(内存Js改变影响页面)

v-html不支持{{xxx}}的原因

html:`
                    <ul>
                        <li>哈哈</li>
                        <li>呵呵</li>
                    </ul>
                `,
                // html里面出现{{xxx}}是会直接以字符串的形式展示出来的

鉴于很多读者包括本人很容易弄混v-model和v-bind的区别，因此详细介绍一下

<input :value="name" v-model="body">

v-bind 产生的效果只是单向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变。而对于v-bind来说,data.name的值会给input的value属性,但是当input中输入的值发生变化，却不会影响input的value属性

其它非常用的请参考Vue.js官网上的API

2.v-bind的使用

2-1. class 结合 v-bind

需要根据可变的表达式的结果来给class赋值,就需要用到v-bind:class="***"
v-bind:XXX可以缩写成为:XXX(eg: v-bind:class缩写为:class)
v-bind:class="表达式",最终表达式运算结果将会将结果赋值给该属性名
class结果的分类
- 一个样式:返回字符串
- 多个样式:返回对象

3. methods 和 on

v-on:click可以缩写为@click
绑定事件的方式
- v-on:事件名="表达式||函数名"
函数名如果没有参数,可以省略(),只给一个函数名称[只限于@click="函数名",而不是js里面的函数的括号]
在export default这个对象的根属性加上methods属性，methods其实是一个对象
- key是函数名，值是函数体
在export default这个对象的根属性加上data属性，data属性也是一个对象，返回一个对象
- 对象的属性是我们初始化的变量的名称
凡是在template中使用变量或函数,不需要加this
在script中使用就需要加this

4. v-for的使用

可以单独使用操作数组(item,index)
可以使用操作对象(value,key,index)
vue中必须设置key

5. 父子组件的使用

父和子，使用的是父，被用的是子
父需要声明使用子组件,引入子组件对象,声明方式如下

import 子组件对象 from './xxx.vue'
{
    components:{
        组件名:子组件对象   
    }
}

6. 全局组件(相比于上一种,更常用)

不需要声明
'vue.component('组件名',组件对象)'
所有的组件就可以直接通过组件名使用

//引入子组件
import headerVue from './components/header.vue';
声明全局组件 
Vue.component('headerVue',headerVue);

7. 父传子

父组件通过子组件的属性值将值进行传递
- 方式有2: 常量
- 变量
子组件需要声明
- 根属性props:['prop1','prop2']
- 在页面中直接使用{{prop1}}
- 在js中如何使用prop1? this.prop1获取

8. 子传父

通过new Vue()这样的一个对象，来$on('事件名',fn(prop1,prop2))
另一个组件通过引入同一个Vuebus,来$emit('事件名',prop1,prop2)

9. 其他事项

在官网: https://cn.vuejs.org/v2/api/上可以查看Vue.js中相关的指令,下面将介绍这些指令的使用方法,相关的API请参考官网上的API

全局配置/API.PNG

全局配置/API
使用方法：通过Vue.调用,
eg: Vue.extend

选项类.PNG

选项类(选项具体可以区分为数据、Dom、生命周期、资源、组合等等)
使用方法:
1.全局的使用[Vue.XXX]
2.实例的使用[this.XXX或new Vue().XXX]
3.选项[new Vue(){}]的参数
或者[export default{}]里边的属性
eg:

//1.全局的使用[Vue.XXX] 
import headerVue from './components/header.vue';
Vue.component('headerVue',headerVue); 
headerVue.XXX
//2.实例的使用
//在此不举例子，感觉比较简单
//3. 选项中的参数 或者[export default{}]里边的属性
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

实例方法/事件.PNG

实例方法/事件
使用方法:组件内的this和new Vue()
vm.$on // 监听

vm.$emit // 发送

vm.$once

vm.$off

具体用法请参考API

阻止修改现有的属性

var obj = {
  foo: 'bar'
}
Object.freeze(obj) //阻止修改现有属性,如果data发生变化,vue.js不予响应
new Vue({
  el: '#app',
  data: obj
})

附录:
1. 请注意无论是V-bind:value="XXX"还是V-model="XXX"都需要在New Vue(){}中的Data声明,哪怕是个空值
eg

new Vue(){
      data:{
           mTest:'' //尽管为空值,但是是必须声明的 
     }
}

2.export、import以及new Vue()之间不能不说的故事
export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入
new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。
export 和export default 的区别在于：export 可以导出多个命名模块.

Vue基础知识介绍