1.动态样式

：class = '{active: isActive}'
可以动态加载或者去掉样式，通过方法设置isActive的值

: class = [one, two]
可以通过对ongreene和two赋不同的值实现默认样式one,事件样式two

: style = 'isColor'
data(){
    isColor: {
        color: 'pink',
        backgroundColor: 'green'
    }
}
method: {
    changeStyle() {
    this.isColor.color = this.isColor.color === 'pink' ? 'green' : 'pink',
    }
}
 **写成数组形式可以添加多个样式
 : style = [isColor, {fontSize: 20px}]**

2.v-if与v-show

v-if: 操作dom的生成与销毁
v-if可以与v-else-if、v-else连用v-show则不能（需要注意的是只能连用，中间不可插入其他标签）
v-show: 操作样式的显示与隐藏，`v-show` 不支持 `<template>`
如果需要经常切换则选择v-show
注意事项：vue会尝试尽量服用已存在的元素，比如input框，这时可以给input框加key值来阻止复用（虚拟dom，diff算法）
总结：
一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。

3.列表渲染 v-for

v-for渲染的数据为对象时，v-for(item-值,key-键，index-下标)
注意事项：当想改变数组或者对象的值从而改变渲染在页面上的值只能用数组变异方法
（-   `push()`

• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()），或者直接改变引用也就是直接从新 赋值,或者vue提供的set方法。

4.表单绑定

<select v-modle='value'>
<option value = '1'>A</option>
</select>
有value时优先展示的是value值，否则展示option的innerHTML

5.使用组件的细节点

1. H5里规定<tbody>里面必须写<tr>但我们想展示的是组件<row>时我们可以使用vue提供给我们的is属性<tr is='row'>,这样在解析时就可以做到使用row组件了，例如 ol -> li , 等等
2.子组件中的data必须是函数形式，而根组件则可以是对象形式。
3.ref的使用
4.子组件通过props接收到的父组件的传值不应该直接对此值操作改变，可以把此值赋值给一个新的变量，然后操作此变量，原因是如果传来的是引用类型的值，直接改变此值，可能会引起别的父组件的值，从而影响其它引用了父组件此值的子组件。
5.使用props接收值得时候，可以给传过来的值做校验，用到validator这个校验属性，validator(接收得值=>value){return 接条件 eg: (value.length > 5)
}
6.props特性与非props特性：
props具有父组件传值，子组件要利用props接值，接收后可以直接用（不能直接改变props接收得值，可以赋给别的属性去操作）。并且props特性不会把父组件传过来得属性显示在子组件dom标签上。
非props属性，不用props接值，不可以直接用传来得属性值，会把父组件传过来得属性显示在子组件dom标签上。

6.给组件绑定原生事件

这是什么意思呢，听我细细说来，当你在父组件里使用子组件时，写个例子啊：

当你在父组件中调用以上子组件，@click本属于**自定义**事件，如果不加上native，你就算点子组件点到吐，他也不会有反应，除非你在子组件中用this.$emit（'click'）你提醒一下父组件，让他能监听到子组件被点啦，你也赶快行动吧，要不就用native实现给组件绑定原生事件。话说，这个绑定原生事件你可看好啊，说好的原生事件，你懂啥意思吧，就是像click,mouseup...这些本就定义好的事件哦。

7.非父子组件之间传值

7.1爷 --> 孙传值

    复杂： 爷 props 父 props 孙

7.2孙 --> 爷传值

    复杂： 孙 emit 父 emit 爷
    bus ，发布订阅 解决
    放代码：
    

  <div @click="add">{{ selfContent }}</div>
</template>
<script>
  export default {
    props: {
      content: String
    },
    data() {
      return {
        number: 0,
        selfContent: this.content
      }
    },
    mounted() {
      let that = this
      that.bus.$on('change', function (msg) {
        that.selfContent = msg
      })
    },
    methods: {
      add: function () {
        this.bus.$emit('change', this.content)
      }
    }
  }
</script>

8.父组件传子组件

props: 父组件通过自定义属性传子组件通过props接 

9.子组件传父组件

事件触发：子组件this.$emit()传值，父组件@事件监听

10.在vue中使用插槽

当父组件要向子组件中传入一个标签元素时，props接收后直接渲染的话，可能会直接把元素标签当成字符串渲染，这时可以利用插槽实现标签解析渲染效果：
比如:<child><h1 slot='header'>hello</h1></child>
    子组件中<template>
    <div><slot name='header'>这个位置就可以接收并解析渲染出<h1>标签内容(当父组件不传值得时候可以在这个位置写默认内容)</slot></div>
    
    看看下面代码思考一下用slot能做些什么      

<template>
  <div @click="add" id="id">
    {{ selfContent }}
    <slot id="abc"></slot>
  </div>
</template>
<script>
  export default {
    props: {
      content: String
    },
    data() {
      return {
        number: 0,
        selfContent: this.content
      }
    },
    mounted() {
      let that = this
      that.bus.$on('change', function (msg) {
        that.selfContent = msg
      })
    },
    methods: {
      add: function () {
        this.bus.$emit('change', this.content)
        let a = document.querySelector('#id')
        let b = document.querySelector('#abc')
        console.log(b.innerHTML) //null
        console.log(a.innerHTML) // DELL <h1>[1,2,3]</h1>
      }
    }
  }
</script>

11.动态组件与v-once指令

   vue提供的<compontent :is='想显示的组件名'></compontent>标签用于实现动态组件
   切换组件想做到保持组件的状态可以用到<keep-alive>
   注意：使用<keep-alive>要求被切换到的组件都有自己的 名字，不论是通过组件的name选项还是局部/全局注册。

v-once对于绑定v-once的元素模板被要求只需渲染一次，就算数据改变也不会响应重新渲染