Vue指令

1.内容渲染指令

        1. v-text 指令的缺点：会覆盖元素内部原有的内容
        2.{{}}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
         3.v-html指令的作用: 可以把带有标签的字符串，渲染成真正的HTML内容。

2.属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

在vue中，可以使用v-bind指令，为元素的属性动态绑定值；

简写是英文的：

在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
         <div :title="'box' + index">这是一个div</div> 

3.事件绑定

1.v-on: 简写是 @
2.语法格式为：

          <button @click="add"></button>
          methods: {

                add() {

                // 如果在方法中要修改 data 中的数据，可以通过 this 访问到

                        this.count +=1
          }
    }

3.$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如        

        <button @click="add(3，$event)"></button>

        methods: {

                add(n, e) {

                // 如果在方法中要修改 data 中的数据，可以通过 this 访问到

                        this.count +=1
          }
    }

4.事件修饰符：

.prevent

        <a @click.prevent="xxx">链接</a>

.stop

        <button @click.stop="xxx">按钮</buttom>

5.v-model指令

表单元素，能与用户交互的 
1.input输入框
        1.type=”radion“
        2.type=”checkbox“
        3.type=”xxxx“
2.textarea
3.select

6.条件渲染指令

1.v-show的原理是：动态为元素添加或移除dispaly：none样式，来实现元素的显示和隐藏
        如果要频繁的切换元素的显示状态，用v-show性能会更好
2.v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏。
        如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好
3.在实际开发中，绝大多数情况，不用考虑性能问题，直接使用v-if就好了！！！