vue指令的介绍与绑定

1.v-if指令

    v-if指令的作用是：根据表达式的真假切换元素的显示状态（控制元素显示和隐藏）

      本质是通过操作dom元素来切换显示的状态

      表达式的值为true ,元素存在于dom树中，为false，从dom树中移除

举例：通过给input绑定事件，然后给p标签和h2绑定v-if 指令根据判断条件控制元素的显示与隐藏

v-if，v-else，v-else-if控制元素删除和添加 （显示隐藏）

注：v-else-if和v-else 必须是v-if的下一个兄弟元素

补充：   v-if 是操作dom  v-show是操作元素来控制显示隐藏的      频繁操作dom会消耗浏览器内存，所以频繁操作建议使用v-show      反之使用v-if *****

2.v-show指令

    v-show指令的作用是根据表达式的真假切换元素的显示状态

         原理是修改元素的display ,实现显示隐藏

         指令后面的内容，最终都会解析为布尔值

         值为true 元素显示 ，值为false元素隐藏

举例：通过给input绑定事件，给图片添加v-show指令，控制图片的显示与隐藏 data中的数据isShow默认是false隐藏，当点击触发事件时切换isShow的状态，来实现显示与隐藏

  3. v-on指令

作用是：为元素绑定事件

       2. 事件名不需要写on

       3. 指令可以简写为@******

       4. 绑定的方法定义在methods属性中

       5.方法内部通过this关键字可以访问data中的数据

举例：

4.v-text指令

v-text 指令用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。

v-text 指令的简写形式为 {{}}，只支持单向绑定，同时可以支持逻辑运算。

v-text 指令与 Vue.js 插值表达式语法略有区别，v-text 指令会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符。

举例：

输出结果：

5.v-model指令

   v-model指令的作用是便捷的设置和获取表单元素的值

            绑定的数据会和表单元素的值相关联

            绑定的数据和表单元素的值是双向数据绑定

举例：通过给button按钮绑定事件，给第二个input 的text属性绑定v-model属性来该改变输入框里的内容

   6. v-bind  操作元素的属性

        v-bind:属性绑定 简写为 ：  比如:class  :src :url  等操作元素的属性

v-bind与v-model都是绑定vue中data中的属性的,他们最主要的区别是v-bind的绑定只是单向的,他会将data中的数据投影到绑定的地方,在被绑定的地方对数据修改时,data中的原始数据是不会改变的,而v-model的绑定是双向的,不仅将data中的数据对标签内进行绑定,还会将标签中的数据反向绑定到data中,标签数据改变后data中的数据也会同步改变。

举例：添加事件可以给元素添加class控制它的title属性和src属性等等

7.v-for 根据数据循环出标签和元素内容

通过v-for循环添加逐条将数组中数据添加到页面

通过v-for循环添加逐条将对象中属性名属性值添加到页面

8.v-html  设置元素内容  相当于js中的innerHtml

9. v-once只编译一次