这是我参与「第四届青训营」笔记创作活动的第5天

前言

在我们的项目开发的过程中，我学会了Vue的内部指令，作为Vue开发的基础，我认为熟系的掌握和运用这些内部指令非常重要，下面我就俩介绍一些常用的内部指令。

1、v-if v-else 指令

1.v-if:是vue 的一个内部指令，指令用在我们的html中。v-if用来判断是否加载html的DOM，比如在点击切换Html结构时，我们就可以用v-if作为判断条件。

2.v-elsev-if一起用，实现页面的点击切换。

<div class="content" v-if="isshow">你不好</div>
<div class="content" v-else>你好</div>


data() {
   return {
     isshow:true;
   }
 }

2. v-show 指令

1.v-show时候用来调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

2.与v-if的区别：

v-show是调整css dispaly属性，可以使客户端操作更加流畅。

v-if是判断是否加载，可以减轻服务器的压力，在需要时加载。

3.v-for 指令

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

<ul>
  <li v-for="item in list">{{item}}</li>
</ul>

data() {
   return {
     list:[1,2,4,5,6]
   }
 }

4.v-text & v-html

1.v-text用解决就是当我们网速很慢或者javascript出错时，暴露出页面渲染{{xxx}}的问题。 2.v-html用来解决javascript中写有html标签，用v-text是输出不出来的时候。

<div class="text" v-text="message"></div>
<div class="html" v-html="ohtml"></div

data() {
   return {
     ohtml:'<h2>富文本</h2>',
     message:'hello world'
   }
 }

3.需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

5.## v-on：绑定事件监听器

简写：@

1.v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码,下面这段代码就实现了点击加减count。


<div class="count"> {{count}}
      <button v-on:click="add">add</button>
      <button @click="dicrese">dicrese</button>
</div>


data:{
    return:{
        count:0
    }
}
methods:{
   add(){
       this.count++
    },
  dicrese(){
      this.count--
   },
}

6、v-model指令

1.v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。当我们message改变时，我们input框里的数据也会发生改变，同样在input框里改变数据，数据源的message也会改变，这就是v-model的双向绑定。


<div id="app">
  <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>


var app=new Vue({
  el:'#app',
  data:{
       message:'hello Vue!'
  }
 })

2.修饰符

.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

Vue常用内部指令 | 青训营笔记

前言