Vue.js 模板与指令详解-优快云博客

vue相关操作

Mustache语法

即双大括号语法。

<div id="app">
   <h2>{{message}}</h2>
   <h2>{{'这是'+firstName+' '+lastName}}</h2>
   <h2>{{counter*2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el: '#app',
       data: {
           message:'你好啊',
           firstName:'kobe',
           lastName:'bryant',
           counter:100
       }
   })
</script>

相关指令

v-once：不会跟随数据的改变而改变

v-text：文本显示，会覆盖

v-pre：不解析双括号

v-cloak：

<head>
   <meta charset="UTF-8">
   <title>vue的模板</title>
   <style>
       [v-cloak]{
           display: none;
       }
   </style>
</head>
<body>
<div id="app" v-cloak>
   {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
   //在vue解析之前，div中有一个属性v-cloak
   //在vue解析之后，div中没有一个属性v-cloak
   setTimeout(function () {
       const app = new Vue({
           el: '#app',
           data:{
               message:'你好啊'
           }
       })
   },1000);
</script>

v-html：以链接的形式显示

<div id="app">
   <h2>{{url}}</h2>
   <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el: '#app',
       data: {
           message:'你好啊',
           url:'<a href="http://www.baidu.com">百度一下</a>'
       }
   })
</script>
<head>
   <meta charset="UTF-8">
   <title>vue的模板</title>
   <style>
       [v-cloak]{
           display: none;
       }
   </style>
</head>

<div id="app" v-cloak>
   {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
   //在vue解析之前，div中有一个属性v-cloak
   //在vue解析之后，div中没有一个属性v-cloak
   setTimeout(function () {
       const app = new Vue({
           el: '#app',
           data:{
               message:'你好啊'
           }
       })
   },1000);
</script>