vue第一課——模板語法

時間 2019-12-12

標籤 vue 一課模板語法简体版

原文原文鏈接

一塊兒學vue——vue學習總路線javascript

——————————^~^我是萌萌噠分割線^~^————————————————css

v-html

做用：用於輸出html代碼html

用法：vue

html代碼：java

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>vue的模板語法</title>
       <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="script.js"></script>
   </head>
   <body>
       <div id="vhtml">
           <div v-html="message"></div>
       </div>
   </body>
</html>學習

詳解：this

v-html用於綁定要插入的html內容spa

script代碼：.net

window.onload=function(){
   new Vue({
       el:"#vhtml",
       data:{
           message:"<h1>我是插入的html內容</h1>"
       }
   });
}
詳解：htm

message是v-html綁定的要插入的html內容

v-bind

html的屬性值應該使用v-bind來綁定

html代碼：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>vue的模板語法</title>
       <link rel="stylesheet" type="text/css" href="style.css"/>
       <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="script.js"></script>
   </head>
   <body>
       <div id="vhtml">
           <div v-html="message"></div>
       </div>
       <div id="vbind">
           <label for="changecolor">改變顏色</label><input type="checkbox" id="changecolor" v-model="color1"/>
           <p v-bind:class="{'class1':color1}">我是文字，你勾選上面的複選框，我就會改變顏色</p>
       </div>
   </body>
</html>
詳解：

使用v-bind來綁定p的class值，這裏的class名叫class1，值爲color1

使用v-model來綁定input的值，將input的值傳給color1

橙色的字爲新增的，由於我是將這塊做爲同一知識點。

script代碼

window.onload=function(){
   new Vue({
       el:"#vhtml",
       data:{
           message:"<h1>我是插入的html內容</h1>"
       }
   });
   new Vue({
       el:"#vbind",
       data:{
           color1:false
       }
   });
}
詳解：

將這塊數據做用於id爲vbind的div裏，將color1的值默認設爲false

style.css代碼

.class1{color: red;}

運行結果：

v-if

html代碼：

<div id="vif">
<p v-if="seen">遭了，被你看到我了</p>
</div>

script代碼：

   new Vue({
       el:"#vif",
       data:{
           seen:true
       }
   });

詳解：

seen爲true的話就能顯示，爲false就隱藏

v-on

html代碼：

<div id="von">
           <p>{{msg}}</p>
           <button v-on:click="reversemsg">點擊我，上面的字符串就會反轉</button>
       </div>

script代碼：

new Vue({
       el:"#von",
       data:{
           msg:"你看到我是反着的嗎？"
       },
       methods:{
           reversemsg:function(){
               this.msg = this.msg.split("").reverse().join("");
           }
       }
   });

運行結果：

自定義過濾器

html代碼：
<div id="dfilter">
<p>{{lower | upper}}</p>
</div>

script代碼：

new Vue({
       el:"#dfilter",
       data:{
           lower:"studyvue"
       },
       filters:{
           upper : function(value){
               if(!value){
                   return " ";
               }
               value = value.toString();
               return value.charAt(0).toLocaleUpperCase()+value.slice(1);
           }
       }
   });

這裏我不是很理解，自定義一個過濾器，是個方法，那他的參數就是管道符前面那個嗎？