Vue内部指令|青训营笔记

这是我参与【第四届青训营】笔记创作活动的第31天。

v-if v-else 指令

v-if v-else可以搭配使用，也可以单独使用v-if，用来判断是否加载html的DOM。

<div id="app">
  <div v-if="is">hello</div>
  <div v-else>world</div> </div> 
<script> 
  var app=new Vue({
    el:'#app',
    data:{
      is:false
    }
  })
</script>

渲染 world ，hello 所处的DOM不被加载。

v-show 指令

v-show用于调整css中的display属性，也就是说DOM已经加载，只是在css的控制下没有显示出来。

<div id="app">
  <div v-show="is">hello</div>
<script> 
  var app=new Vue({
    el:'#app',
    data:{
      is:false
    }
  })
</script>

hello 所处的DOM已经被加载，但是其display属性为none，不显示。

v-for 指令

v-for用于解决模板循环的问题。

<div id="app">
  <ul>
    <li v-for="item in items"> {{item}} </li>
  </ul>
</div>
<script>
  var app=new Vue({
    el:'#app',
      data:{
        items:[20,23,18,65,32,19,54,56,41]
      }
  })
</script>

v-text v-html 指令

v-text可以将插值表达式转化为字符串渲染到页面。

*v-html可以动态渲染html标签，但是在生产环境中不被建议使用，因为容易导致xss攻击，所以，永远不要在用户提交和可操作页面上使用。

<div id="app">
  <span>{{ message }}</span>
  <span v-text="message"></span>
  <span v-html="msgHtml"></span>
</div> 
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello Vue!', 
      msgHtml:'<h2>hello Vue!</h2>'
    }
  })
</script>

v-on 指令

v-on用于绑定用户监听事件，可以监听DOM事件来触发一些JS代码。可以简写为 @ 。

<div id="app">
  得分： {{count}}
  <button v-on:click="jiafen">加分</button>
  <button v-on:click="jianfen">减分</button>
</div>
<script> 
  var app=new Vue({ 
    el:'#app',
    data:{
      count:1
    },
    methods:{ 
      jiafen:function(){
        this.count++;
      }, 
      jianfen:function(){
        this.count--;
      } 
    } 
  }) 
</script>

v-model 指令

v-model用于绑定数据源，就是把数据绑定到特定表单元素上，可以简单的实现双向数据绑定。

<div id="app">
  <p>原始信息：{{message}}</p>
  <p>v-model:<input type="text" v-model="message"></p>
</div>
<script> 
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello Vue!'
    }
  })
</script>

v-bind 指令

v-bind可以用来绑定标签属性进行动态赋值，我们可以缩写为 : 。

<div id="app">
  <a v-bind:href="src"></a>
</div>
<script>
  var app=new Vue({
    el:'#app', 
    data:{
      src:'http://baidu.com'
    }
  })
</script>

v-pre 指令

v-pre用于跳过vue的编译，不在输出vue中的data值，而是直接输出原始值。

<div v-pre>{{message}}</div>

将会直接输出{{message}}。

v-cloak 指令

v-cloak当网速较慢时，vue来不及渲染，它可以让vue渲染完其指定的整个DOM后才进行显示，需要和css样式一起使用。

v-once 指令

v-once让其指定的DOM只进行第一次渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

以上就是vue中的内部指令了，如有错误，还望斧正。