vue零基础（三）——vueJS指令（1）

什么是指令

• VueJS通过被称为指令的新属性来扩展HTML。
• ViueJS通过内置的指令来为应用添加功能。
• VueJS允许你自定义指令。

指令的特征

• 所有指令都包含在Vue实例管理的范围内。
• vueJS指令是扩展的HTML属性，带有前缀v-。
• v-model指令把元素值(比如输入域的值)绑定到应用程序，存储值。

vueJS指令

• v-text：添加纯文本数据，相当于{{表达式}}——不能识别HTML标签。

• v-html：浏览器对HTML标签可以识别。

• v-model：它能轻松实现表单输入和应用状态之间的双向绑定。

  下面我们举一个简单的代码来看一下，这里主要通过v-text、v-html还有自定义的表达式来显示。

//HTML部分
<div id="app">
  <p>{{message}}</p>
  <p v-text="message"></p>
  <p v-html="message"></p>
</div>

//JS部分
<script>
  var app=new Vue({
   el:'#app',
   data:{
    message:"<b>hello vue!</b>"
   }
  })
 </script>

输出图片：

从最后的输出图片我们可以验证上述的定义。

• v-once
  只渲染一次，数据有更新，也不会渲染，相当于是一个静态的页面。
  语法：没有表达式，直接书写在标签根上面。
  用途：详细页、关于我们【地址、电话】，单页推广等等。
  主要运用于：不会经常改变的页面。

• v-show与v-if
  v-show： 通过布尔值控制元素的显示和隐藏。
  v-if ：可以完全根据表达式的值在DOM中生成或移除一个元素。 如果赋值给v-if的表达式的值是false,那对应的元素将会从DOM中移除，否则对应元素的一一个 克隆将被重新插入DOM中。

实例
这里我们用了两个P标记来显示文字，然后分别使用v-show、v-if指令，先看一下图片（左边是原始图片，右边是引用之后的图片）。


这里实现的效果是一样。但是我们打开开发者工具开看一下，就可以得出上述的结论：
v-show： 通过布尔值控制元素的显示和隐藏。
v-if：可以完全根据表达式的值在DOM中生成或移除一个元素。

下面具体看一个代码：（这里以v-show为例，v-if的话就只需要把p标记中的show改为if就可以了）

//HTML部分
<div id="app">
  <p v-show="message1">你看的见我</p>
  <p v-show="message2">你看不见我</p>
</div>

//JS部分
<script>
  var app=new Vue({
   el:'#app',
   data:{
    message1:true,
    message2:false,
   }
  })
 </script>

最后总结一下两者的区别：
v-if：
安全性高
适合后台管理系统
本质:移除dom节点

v- show：
安全性不高
主要运用于特效类型的切换[显示隐藏的切换]
不适合后台管理系统