Vue---基礎筆記（基礎的構建）

時間 2020-06-01

標籤 vue 基礎筆記構建简体版

原文原文鏈接

vue 基礎

準備工做

chrome瀏覽器插件安裝

完成後出現標記css

vue頁面標記須要使用vue.js非vue.min.jshtml

調試頁面vue

結構模型MVVM = m:model + v:view + vm

view(dom) ------dom listeners-----》 Model（data）node

　　《------data bindings----jquery

1. 調試運行Helloword

vue與jquery比較

vue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="clickfunc">點擊</button>

</div>

<script>
new Vue({ el:'#app', data:{ message:'before' }, methods:{ clickfunc:function () { this.message='after' } } }) </script>
</body>
</html>

View Code

jquery

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <p id="pp">before</p>
10     <button id="bt">點擊</button>
11 </div>
12 
13 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
14 <script>
15  $('#bt').click(function () { 16  $('#pp').text('after'); 17  }) 18 </script>
19 
20 </body>
21 </html>

View Code

雙向綁定例子

{{username}} 和input有默認值（綁定到username），{{username}} 隨input輸入框輸入而變化。chrome

 1 <div id="app">
 2   <input type="text" v-model="username">
 3   <p>{{username}}</p>
 4 </div>
 5 
 6 <script src="../vue.js"></script>
 7 <script>
 8  const vm = new Vue({  9  el:'#app', 10  data:{ 11  username:'default name'
12  }, 13  }); 14 
15 </script>

View Code

2. 模版

模版示例數組

{{變量或者執行函數}} ：屬性中綁定 @監聽瀏覽器

 1 <div id="app">
 2   <h2>1. 雙大括號表達式</h2>
 3   <p>{{msg}}</p> <!-- 無v-model時，區分大小寫 -->
 4   <p>{{msg.toUpperCase()}}</p>
 5   <p v-html="msg"></p>
 6   <p v-text="msg"></p>
 7 
 8   <h2>2. 指令 強制數據綁定，原Html語法綁定爲變量</h2>
 9   <!--<img src={{imgurl}} alt=""> 標籤屬性不能用雙大括號引用變量 -->
10   <img v-bind:src="imgurl" alt="">
11   <img :src="imgurl" alt="">    <!-- 簡寫 -->
12 
13   <h2>3. 指令 綁定事件監聽</h2>
14   <button v-on:click="func1">點擊1</button>
15   <button @click="func1">點擊2</button>
16   <button @click='func2("abc")'>點擊3</button>   <!-- 回傳參數 -->
17   <button @click="func2(msg)">點擊4</button>  <!-- 回傳變量 -->
18 
19 </div>
20 
21 <script src="../vue.js"></script>
22 <script>
23  const vm = new Vue({ 24  el:'#app', 25  data:{ 26  msg:'default msg', 27  imgurl:'http://www.tangvelley.com/static/images/bloglogo.png', 28  }, 29  methods:{ 30  func1:function () { 31  alert('ok') 32  }, 33  func2(content){ 34  alert(content,'ES6簡寫fun語法'); 35  }, 36  } 37  }); 38  vm.msg='<B>msg22222</B>'
39 
40 </script>

View Code

顯示效果緩存

1. 雙大括號表達式 <B>msg22222</B>

<B>MSG22222</B> msg22222 <B>msg22222</B> 2. 指令 強制數據綁定，原Html語法綁定爲變量 圖片1 圖片2 3. 指令 綁定事件監聽 點擊1 點擊2 點擊3 點擊4

View Code

3. 計算屬性和監視

case

計算computed 執行：【1】初始化【2】相關data發生改變。注意get 和set方法。set有緩存。app

監視watch方法參考便可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="app"> firstname<input type="text" v-model="firstname"> lastname <input type="text" v-model="lastname">

<hr> display1 <input type="text" v-model="fullname1">
    <hr> display2 <input type="text" v-model="fullname2">
    <p></p> display3 <input type="text" v-model="fullname3">
<p>{{fullname1}}</p>
<p>{{fullname1add()}}</p>

</div>
<script src="../vue.js"></script>
<script> const vm= new Vue({ el:'#app', data:{ firstname:'first', lastname:'last', }, computed:{ //計算 初始化顯示 或者 data屬性發生變化時執行
        //函數方式 單向
 fullname1(){ return this.firstname + ' ' + this.lastname }, // 對象
 fullname3:{ //設置(set)fullname3 及 fullname3發生變化時set
 get(){ //計算並返回當前值，當須要讀取當前值時回調
                //回調函數（定義了，沒有調用，卻執行了）
                return this.firstname + ' ' + this.lastname; }, set(value){ //value 是fullname3最新值
                //當屬性發生改變時,更新相關屬性
                //回調函數,監視監視監視（不是設置）當前屬性值（fullname3）變化
                this.firstname=value.split(' ')[0]; this.lastname=value.split(' ')[1]; } }, }, methods:{ fullname1add(){ return this.firstname + ' ' + this.lastname }, }, watch:{ //監視 無初始化，當變化時觸發
        //名稱爲監視對象
 firstname:function (newval, oldval) { console.log(newval); console.log(oldval); console.log(this); this.fullname2=newval + this.lastname } } }); //監視另外一種寫法
 vm.$watch('lastname',function (newval, oldval) { this.fullname2 = this.firstname + newval }) </script>


</body>
</html>

View Code

methods computed watch區別

methods裏面定義的函數，是須要主動調用的，而和watch和computed相關的函數，會自動調用,完成咱們但願完成的做用

watch擅長處理的場景：一個數據影響多個數據

computed擅長處理的場景：一個數據受多個數據影響,及利用set get雙向設置，功能更強大方便。

區別2

watch對象是變化的值，受影響對象做相關賦值操做

compute對象是受影響對象，直接return 相關結果

4. class與style綁定

主要利用v-bind ，

class 字符串形式：不一樣於默認html只讀取第一個class，能夠整合兩個class（1個默認，1個變量）

：class對象形式：｛｝，其中key常量，value變量從vue的data中獲取。通常經常使用布爾形式 :class="{aclass:trueorfalse1,bclass:trueorfalse2}"注意引號value上沒有

：style對象形式：參考上。注意 key與html style的key有不一樣。value爲普通值string等，注意value無引號

case

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue </title>
 6   <style>
 7  .default {
 8  font-size: 50px;
 9     }
10  .red {
11  color:red;
12     }
13  .blue {
14  color: blue;
15     }
16 
17   </style>
18 
19 <script src="../vue.js"></script>
20 </head>
21 <body>
22 <div id="app">
23 
24 <h2 class="default" :class="extra_class">字符串方式，能夠整合兩個class，默認html只讀第一個class</h2>
25 <h2 :class="{blue:act1,red:act2}">對象方式用｛｝，常量key，變量value到data取值,注意act1 無引號</h2>
26   <button @click="fun1">點擊</button>
27 <h2 style="color: #00B0E8;font-size: small;">默認style</h2>
28 <h2 :style="{color:v1,fontSize:v2}">對象style, 參數（如fontSize對應font-size）與htmlstyle參數略有不一樣</h2>
29 
30 </div>
31 
32 <script>
33  const vm=new Vue({ 34  el:'#app', 35  data:{ 36  extra_class:'red', 37  act1:false, 38  act2:true, 39  v1:'green', 40  v2:'30px', 41  }, 42  methods:{ 43  fun1(){ 44               this.extra_class='blue'; 45               this.act1='true'; 46               this.act2='false'; 47  } 48  } 49  }) 50 
51 </script>
52 </body>
53 </html>

View Code

5. 條件渲染

v-if v-else v-show

case1

支持@click="state=!state"表達式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue </title>
 6   <style>
 7  .default {
 8  font-size: 50px;
 9     }
10  .red {
11  color:red;
12     }
13  .blue {
14  color: blue;
15     }
16 
17   </style>
18 
19 <script src="../vue.js"></script>
20 </head>
21 <body>
22 <div id="app">
23 
24 <h2 class="default" :class="extra_class">字符串方式，能夠整合兩個class，默認html只讀第一個class</h2>
25 <h2 :class="{blue:act1,red:act2}">對象方式用｛｝，常量key，變量value到data取值,注意act1 無引號</h2>
26   <button @click="fun1">點擊</button>
27 <h2 style="color: #00B0E8;font-size: small;">默認style</h2>
28 <h2 :style="{color:v1,fontSize:v2}">對象style, 參數（如fontSize對應font-size）與htmlstyle參數略有不一樣</h2>
29 
30 </div>
31 
32 <script>
33  const vm=new Vue({ 34  el:'#app', 35  data:{ 36  extra_class:'red', 37  act1:false, 38  act2:true, 39  v1:'green', 40  v2:'30px', 41  }, 42  methods:{ 43  fun1(){ 44               this.extra_class='blue'; 45               this.act1='true'; 46               this.act2='false'; 47  } 48  } 49  }) 50 
51 </script>
52 </body>
53 </html>

View Code

v-if 與v-show 在瀏覽器端差異

直接true false形式

1   <p v-show="true">默認顯示</p>
2   <p v-show="false">默認不顯示</p>
3   <p v-if="false">true</p>
4   <p v-else>false</p>

View Code

6. 列表

6.1 列表渲染

數組（列表）遍歷

case 1

：key=」index「用途 https://www.cnblogs.com/tim100/p/7262963.html 影響渲染

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue </title>
 6 <script src="../vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="demo">
10 
11   <ul>
12     <li v-for="(person,index) in persons" :key="index">
13  {{index}}--{{person.name}}--{{person.age}} 14     </li>
15   </ul>
16 
17 </div>
18 
19 <script>
20 new Vue({ 21  el:'#demo', 22  data:{ 23  persons:[ 24  {name:'n1',age:18}, 25  {name:'n2',age:20}, 26  {name:'n3',age:22}, 27  {name:'n4',age:24}, 28  ] 29  } 30 }) 31 </script>
32 </body>
33 </html>

View Code

注意數組方法

一、調用$set方法： this.arr.$set(index, val); 1 二、調用splice方法： this.arr.splice(index, 1, val); 1 2、合併數組： this.arr = this.arr.concat(anotherArr); 1 3、清空數組： this.arr = []; 1 4、主要的數組方法： 一、變異方法（修改了原始數組），vue爲觸發視圖更新，包裝瞭如下變異方法： push() pop() shift() unshift() splice() //不管什麼時候，使用該方法刪除元素時注意數組長度有變化，bug可能就是由於她 sort() reverse() 1 2 3 4 5 6 7 二、非變異方法（不會修改原始數組而是返回一個新數組），如concat()、filter()，使用時直接用新數組替換舊數組，如上面的合併數組例子。 5、注意： //如下操做均沒法觸發視圖更新 this.arr[index] = val; this.arr.length = 2; 1 2 3 詳細瞭解請參考vue官方文檔數組變更檢測。

View Code

數組變化---視圖是否變化---數組是否變化規則

vue監視對象是否發生變化，不監視對象內部。數組方法已被重寫爲vue變異方法

https://blog.csdn.net/fengjingyu168/article/details/79782957 一、數組變化-視圖更新-原始數組變化 push() pop() shift() unshift() splice() sort() reverse() 二、數組變化-視圖更新-原始數組不變 filter() concat() slice() 三、數組變化-視圖不變 經過索引直接設置項 this.items[2] = {name: 'abc'} 1 解決方式1：使用$set this.$set(app.items, 2, {name: 'abc'}) 1 解決方式2：使用splice() this.items[2].splice(2, 1, {name: 'abc'}) 1 修改數組長度 this.items.length = 2 1 解決方法： this.items.splice(2)

View Code

case2

添加刪除與更新方法，注意vue變異方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">

  <ul>
      <!-- index值隨頁面變化而變化，刪除0號，原1號的index變爲0 -->
      <!-- key值這裏選了index，實際最好選擇不變的數據id -->
    <li v-for="(person,index) in persons" :key="index"> {{index}}--{{person.name}}--{{person.age}} <button @click="deleteP(index)">刪除</button>
        <button @click="updateP(index,{name:'zz',age:25})">更新</button>
    </li>
  </ul>

</div>

<script>
new Vue({ el:'#demo', data:{ persons:[ {name:'n1',age:18}, {name:'n2',age:20}, {name:'n3',age:22}, {name:'n4',age:24}, ] }, methods:{ deleteP:function (index) { this.persons.splice(index,1) }, updateP (index,newP){ // this.persons[index]=newP 數組變化，頁面不變，詳見Vue變異方法說明
            this.persons.splice(index,1,newP) } } }) </script>
</body>
</html>

View Code

v-for遍歷對象（比較少用）

case3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">

  <ul>
      <!-- index值隨頁面變化而變化，刪除0號，原1號的index變爲0 -->
      <!-- key值這裏選了index，實際最好選擇不變的數據id -->
    <li v-for="(person,index) in persons" :key="index"> {{index}}--{{person.name}}--{{person.age}} <button @click="deleteP(index)">刪除</button>
        <button @click="updateP(index,{name:'zz',age:25})">更新</button>
    </li>
  </ul>

    <hr>
<ul>
    <li v-for="(item,key) in persons[1]" :key="key"> {{key}}:{{item}} </li>
</ul>


</div>

<script>
new Vue({ el:'#demo', data:{ persons:[ {name:'n1',age:18}, {name:'n2',age:20}, {name:'n3',age:22}, {name:'n4',age:24}, ] }, methods:{ deleteP:function (index) { this.persons.splice(index,1) }, updateP (index,newP){ // this.persons[index]=newP 數組變化，頁面不變，詳見Vue變異方法說明
            this.persons.splice(index,1,newP) } } }) </script>
</body>
</html>

View Code

6.2 列表搜索排序

補充，filter方法

https://blog.csdn.net/bossxu_/article/details/80756563 https://blog.csdn.net/tang15886395749/article/details/65629898 filter(item => item) filter((item,index,arr)=>{ return item>2 })

View Code

case

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo2">
    <input type="text" v-model="searchname">
    <ul>
        <!--<li v-for="(person,index) in persons">-->
            <!--{{index}}&#45;&#45;{{person.name}}&#45;&#45;{{person.age}}-->
        <!--</li>-->
        <li v-for="(person,index) in filterpersons"> {{index}}--{{person.name}}--{{person.age}} </li>

    </ul>
    <button @click="setOrderType(1)">age升序</button>
    <button @click="setOrderType(2)">age降序</button>
    <button @click="setOrderType(0)">原順序</button>


</div>

<script>
new Vue({ el:'#demo2', data:{ searchname:'', orderType:0, // 0原順序， 1升序， 2降序
 persons:[ {name:'n1',age:28}, {name:'n2',age:20}, {name:'n3',age:22}, {name:'n4',age:24}, ] }, computed:{ filterpersons(){ // let retperson; // retperson=this.persons.filter(person=>person.name.indexOf(this.searchname)!==-1);
 const {searchname,persons,orderType}= this; let retperson; retperson=persons.filter(person => person.name.indexOf(searchname)!==-1); if (orderType!==0){ retperson.sort(function (person1,person2) { //負數p1在前
                    if(orderType===1){ return person1.age-person2.age; }else{ return person2.age-person1.age; } }) } return retperson } }, methods:{ setOrderType(type){ this.orderType=type; } } }) </script>
</body>
</html>

View Code

7. 事件處理

綁定監聽

多種綁定方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
<button @click="test1()">bt1</button>
<button @click="test2('abc')">bt2</button>
<button @click="test3">bt3</button>
  
</div>

<script> let vm = new Vue({ el:'#demo', data:{ test1(){ alert(1); }, test2(a){ alert(a); } }, methods:{ test3(){ alert(3); } } }) </script>
</body>
</html>

View Code

$event

經常使用event

event.target.nodeName 　　 //獲取事件觸發元素標籤name

event.target.id　　　　　　　//獲取事件觸發元素id

event.target.className　　 //獲取事件觸發元素classname

event.target.innerHTML

event.target.value // input值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
<button @click="test5">bt5</button>   <!--能夠省略$event -->
<button @click="test6(6,$event)">bt6</button>

</div>

<script> let vm = new Vue({ el:'#demo', data:{ test5(event){ alert(event.target.innerHTML); }, test6(num,event){ alert(num + event.target.innerHTML); } } }) </script>
</body>
</html>

View Code

事件修飾符（如@click）

@click.stop='xxx' 中止冒泡。不然顯示inner後再顯示out

@click.prevent='xx' 默認行爲阻止

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
<div style="width: 200px;height: 200px;">" @click="sp1"> <div style="width: 50px;height:50px;">" @click.stop="sp2"></div>
</div>

  <a href="http://www.baidu.com" @click.prevent="sp3">點擊</a>

</div>

<script> let vm = new Vue({ el:'#demo', data:{ sp1(){ alert('out'); }, sp2(){ alert('inner'); }, sp3(){ alert('333'); }, }, }) </script>
</body>
</html>

View Code

按鍵修飾符

需求：按鍵enter時觸發

@keyup.enter="test" 鍵盤按鍵的修飾符，監聽enter。不加.enter會監聽全部按鍵。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
  <input type="text" @keyup="sp4">
  <input type="text" @keyup.13="sp5">
  <input type="text" @keyup.enter="sp5">  <!-- 少數特殊key直接寫名稱 -->

</div>

<script> let vm = new Vue({ el:'#demo', data:{ sp4(event){ if(event.keyCode===13) { alert(event.target.value + event.key + event.keyCode) } }, sp5(event){ alert(event.target.value); } }, }) </script>
</body>
</html>

View Code

8.表單數據的自動收集

html 表單中的name改成v-model 。

form頭的 onSubmit改成@submit.prevent

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demoform">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用戶名</span><input type="text" v-model="username"><br>
    <span>密碼</span><input type="text" v-model="pwd"><br>
    <span>性別></span>
    <input type="radio" v-model="gender" value="女" id="female"><label for="female">女</label>
    <input type="radio" v-model="gender" value="男" id="male"><label for="male">男</label><br>
    <span>愛好</span>
    <input type="checkbox" v-model="hobbit" value="basket" id="basket"><label for="basket">籃球</label>
    <input type="checkbox" v-model="hobbit" value="foot" id="foot"><label for="foot">足球</label><br>
    <span>城市</span>
    <select v-model="yourcity">
      <option value="">未選擇</option>
      <option :value="city.id" v-for="(city,index) in citys" :key="index">{{city.name}}</option>
    </select><br>
    <span>介紹</span>
    <textarea v-model="intro" id="" cols="30" rows="10"></textarea>
    <input type="submit" value="註冊 ">
  </form>



</div>

<script>
new Vue({ el:'#demoform', data:{ username:'', pwd:'', gender:'男', hobbit:['foot'], citys:[{id:1,name:'上海'},{id:2,name:'北京'},{id:3,name:'廣州'}], yourcity:3, intro:'', }, methods:{ handleSubmit(){ console.log(this.username,this.hobbit,this.yourcity); } } }) </script>
</body>
</html>

View Code

9. vue 生命週期

10. 過渡&動畫

實際操做css的transition和animation

效果及狀態詳細https://cn.vuejs.org/v2/guide/transitions.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
  <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s;
} .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0;
}

  </style>
</head>
<body>
<div id="demo">

  <button @click="show=!show">toggle</button>
  <p v-show="show">內容1</p>

  <transition name="fade">  <!--name 用於css樣式名 -->
    <p v-if="show">內容2</p>
  </transition>


</div>

<script>
new Vue({ el:'#demo', data:{ show:true, } }) </script>
</body>
</html>

View Code

11.過濾器（格式化）

時間格式化

1. moment插件http://momentjs.cn/

2. Vue.filter功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
  <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s;
} .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0;
}

  </style>
</head>
<body>
<div id="demo">

  <p>{{date1}}</p>
  <p>{{date1 | dateStr}}</p>
    <p>{{date1 | dateStr('YYYY-MM-DD')}}</p>


</div>

<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script> Vue.filter('dateStr',function (val,formatstr='YYYY-MM-DD HH:mm:ss a') { return moment(val).format(formatstr); // return moment(val).format(formatstr || 'YYYY-MM-DD HH:mm:ss a')
 }); new Vue({ el:'#demo', data:{ date1:new Date(), } }) </script>


</body>
</html>

View Code

12. 指令補遺

列表

v-text 更新textConten

v-html 更新元素InnerHTML

v-if ,v-show，v-else，v-for，

v-on，簡寫爲 @

v-bind 簡寫爲：

v-model雙向綁定

ref 惟一標識

v-cloak 防止閃現表達式

內容顯示標籤

v-model

通常位於input等form標籤中，放在span中不能令span產生內容。v-text v-html改變span標籤內內容

雙向綁定

v-text v-html比較

v-text 原樣顯示

v-html 會解析標籤，無含義的標籤同html無效果。但v-html容易受XSS攻擊。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="demo">

    <span v-text="msg"></span><br>
    <span v-html="msg2"></span>

</div>

<script>
    new Vue({ el: '#demo', data: { msg: '<b>aaa</b>', msg2: '<a>bbb</a>', } }) </script>

</body>
</html>

View Code

{{}}與 v-text比較

都是單向綁定，數據對象改變影響頁面值改變，反之不行。基本相同。

{{}}視做v-text簡寫形式。

當網速過慢時頁面顯示暴露{{}}

v-text與 v-once單次綁定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="demo">

    <span v-text="msg">{{msg}}</span><br>
    <span v-once>{{msg2}}</span>
    <button @click="change">點擊改變</button>

</div>

<script>
    new Vue({ el: '#demo', data: { msg: 'aaa', msg2: 'bbb', }, methods:{ change(){ this.msg+='msg1'; this.msg2+='msg2'; }, } }) </script>

</body>
</html>

View Code

ref

標識符，能夠方便定位，經過textContent 或者innerHTML獲取標籤內容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="demo2">

<p ref="mycontent">{{msg}}</p>
<button @click="hint">點擊提示其餘標籤</button>
</div>

<script>
    new Vue({ el: '#demo2', data: { msg: 'aaa', msg2: 'bbb', }, methods:{ hint(){ console.log(this.$refs.mycontent.textContent) }, } }) </script>

</body>
</html>

View Code

v-cloak

利用解析完成後再也不存在特性，設置style display none 等

自定義指令

局部與全局指令定義位置與生效區間不一樣。

案例略

13 插件

自定義插件 vue-mypluginnamexxx.js。注意須要向外暴露 window.xxx

引用時放在vue.js的引用以後。

script實際使用時，Vue.use(xxx)

14. 組件components

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.js"></script>
</head>
<body>



<div id="app">
    <parent></parent>
</div>


<script> let child={ template:'<div>{{myMsg}}</div>', props:{myMsg:String} }; let parent={ template:'<div><child :my-msg="key1"></child></div>>', components:{child}, data(){ return { 'key1':'abc' } } }; new Vue({ el:'#app', components:{parent} }) </script>




</body>
</html>