vue內部指令學習經(jīng)驗-創(chuàng)新互聯(lián)

一、走起Vue2.0

一、下載Vue2.0的兩個版本：

官方網(wǎng)站：http://vuejs.org/

創(chuàng)新互聯(lián)網(wǎng)站建設公司是一家服務多年做網(wǎng)站建設策劃設計制作的公司,為廣大用戶提供了做網(wǎng)站、成都網(wǎng)站設計，成都網(wǎng)站設計，廣告投放，成都做網(wǎng)站選創(chuàng)新互聯(lián)，貼合企業(yè)需求，高性價比，滿足客戶不同層次的需求一站式服務歡迎致電。

· 開發(fā)版本：包含完整的警告和調試模式

· 生產(chǎn)版本：刪除了警告，進行了壓縮

二、編寫第一個HelloWorld代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <script type="text/javascript" src="../assets/js/vue.js"></script>

   <title>Helloworld</title>

</head>

<body>

   <h2>Hello World</h2>

   <hr>

   <divid="app">

       {{message}}

   </div>

   <script type="text/javascript">

       var app=new Vue({

           el:'#app',

           data:{

               message:'hello Vue!'

           }

       })

   </script>

</body>

</html>

二、v-if  v-else  v-show 指令

一、v-if:

v-if:是vue 的一個內部指令，指令用在html中。

v-if用來判斷是否加載html的DOM，比如我們模擬一個用戶登錄狀態(tài)，在用戶登錄后現(xiàn)實用戶名稱。

關鍵代碼

1

<divv-if="isLogin">hello 合東！</div>

完整html代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <script type="text/javascript" src="../assets/js/vue.js"></script>

   <title>v-if & v-show & v-else</title>

</head>

<body>

   <h2>v-if 判斷是否加載</h2>

   <hr>

   <divid="app">

       <divv-if="isLogin">你好：JSPang</div>

       <divv-else>請登錄后操作</div>

   </div>

   <script type="text/javascript">

       var app=new Vue({

           el:'#app',

           data:{

              isLogin:false

           }

       })

   </script>

</body>

</html>

這里在vue的data里定義了isLogin的值，當它為true時，網(wǎng)頁就會顯示：你好：合東，如果為false時，就顯示請登錄后操作。

2、v-show ：

調整css中display屬性，DOM已經(jīng)加載，只是CSS控制沒有顯示出來。

1

<div v-show="isLogin">你好：合東</div>

3、v-if 和v-show的區(qū)別：

· v-if： 判斷是否加載，可以減輕服務器的壓力，在需要時加載。

· v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。

三、v-for指令 ：解決模板循環(huán)問題

一、基本用法：

模板寫法

1

2

3

<liv-for="item in items">

       {{item}}

</li>

js寫法

1

2

3

4

5

6

var app=new Vue({

    el:'#app',

    data:{

        items:[20,23,18,65,32,19,54,56,41]

    }

})

完整代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <script type="text/javascript" src="../assets/js/vue.js"></script>

   <title>V-for 案例</title>

</head>

<body>

   <h2>v-for指令用法</h2>

   <hr>

   <divid="app">

     <ul>

         <liv-for="item in items">

               {{item}}

         </li>

     </ul>

   </div>

   <script type="text/javascript">

       var app=new Vue({

           el:'#app',

           data:{

               items:[20,23,18,65,32,19,54,56,41]

           }

       })

   </script>

</body>

</html>

這是一個最基礎的循環(huán)，先在js里定義了items數(shù)組，然后在模板中用v-for循環(huán)出來，需要注意的是，需要那個html標簽循環(huán)，v-for就寫在那個上邊。

二、排序

三、已經(jīng)順利的輸出了定義的數(shù)組，但是需要在輸出之前給數(shù)組排個序，那就用到了Vue的computed:屬性。

1

2

3

4

5

computed:{

   sortItems:function(){

         return this.items.sort();

   }

}

在computed里新聲明了一個對象sortItems，如果不重新聲明會污染原來的數(shù)據(jù)源，這是Vue不允許的，所以要重新聲明一個對象。

如果不重新聲明報錯：

vue內部指令學習經(jīng)驗

如果一切順利的話，已經(jīng)看到了結果，但是這個小程序還是有個小Bug的，現(xiàn)在把數(shù)組修改成這樣。

1

items:[20,23,18,65,32,19,5,56,41]

把其中的54修改成了5，我們再看一下結果，發(fā)現(xiàn)排序結果并不是想要的

vue內部指令學習經(jīng)驗

可以自己編寫一個方法sortNumber，然后傳給的sort函數(shù)解決這個Bug。

1

2

3

 function sortNumber(a,b){

           return a-b

 }

用法

1

2

3

4

5

computed:{

   sortItems:function(){

   return this.items.sort(sortNumber);

   }

}

經(jīng)過一番折騰終于實現(xiàn)了真正的數(shù)字排序。

三、對象循環(huán)輸出

上邊循環(huán)的都是數(shù)組，那來看一個對象類型的循環(huán)是如何輸出的。

先定義個數(shù)組，數(shù)組里邊是對象數(shù)據(jù)

1

2

3

4

5

6

students:[

 {name:'合東',age:32},

 {name:'Panda',age:30},

 {name:'PanPaN',age:21},

 {name:'King',age:45}

]

在模板中輸出

1

2

3

4

5

<ul>

 <liv-for="student in students">

      {{student.name}} - {{student.age}}

 </li>

</ul>

加入索引序號：

1

2

3

4

5

<ul>

 <li v-for="(student,index) in students">

   {{index}}：{{student.name}} - {{student.age}}

 </li>

</ul>

排序，先加一個原生的對象形式的數(shù)組排序方法：

1

2

3

4

5

6

7

8

//數(shù)組對象方法排序:

function sortByKey(array,key){

   return array.sort(function(a,b){

     var x=a[key];

     var y=b[key];

     return ((x<y)?-1:((x>y)?1:0));

  });

}

有了數(shù)組的排序方法，在computed中進行調用排序

1

2

3

sortStudent:function(){

   return sortByKey(this.students,'age');

}

注意：vue低版本中 data里面的items和computed里面可以一樣，但是高版本，是不允許相同名稱。

四、v-text & v-html

已經(jīng)會在html中輸出data中的值了，已經(jīng)用的是{{xxx}},這種情況是有弊端的，就是當網(wǎng)速很慢或者javascript出錯時，會暴露的{{xxx}}。Vue提供的v-text,就是解決這個問題的。代碼：

1

<span>{{ message }}</span>=<spanv-text="message"></span><br/>

如果在javascript中寫有html標簽，用v-text是輸出不出來的，這時候就需要用v-html標簽了。

1

<spanv-html="msgHtml"></span>

雙大括號會將數(shù)據(jù)解釋為純文本，而非HTML。為了輸出真正的HTML，需要使用v-html 指令。

需要注意的是：在生產(chǎn)環(huán)境中動態(tài)渲染HTML是非常危險的，因為容易導致XSS***。所以只能在可信的內容上使用v-html，永遠不要在用戶提交和可操作的網(wǎng)頁上使用。

完整代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <script type="text/javascript" src="../assets/js/vue.js"></script>

   <title>v-text & v-html 案例</title>

</head>

<body>

   <h2>v-text & v-html 案例</h2>

   <hr>

   <divid="app">

       <span>{{ message }}</span>=<spanv-text="message"></span><br/>

       <spanv-html="msgHtml"></span>

   </div>

   <script type="text/javascript">

       var app=new Vue({

           el:'#app',

           data:{

               message:'hello Vue!',

               msgHtml:'<h3>hello Vue!</h3>'

           }

       })

   </script>

</body>

</html>

五、v-on：綁定事件監(jiān)聽器

v-on 就是監(jiān)聽事件，可以用v-on指令監(jiān)聽DOM事件來觸發(fā)一些javascript代碼。

一、使用綁定事件監(jiān)聽器，編寫一個加分減分的程序。

效果如圖

vue內部指令學習經(jīng)驗

程序代碼

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <script type="text/javascript" src="../assets/js/vue.js"></script>

   <title>v-on事件監(jiān)聽器</title>

</head>

<body>

   <h2>v-on 事件監(jiān)聽器</h2>

   <hr>

   <divid="app">

      本場比賽得分： {{count}}<br/>

     <buttonv-on:click="jiafen">加分</button>

     <buttonv-on:click="jianfen">減分</button>

   </div>

   <script type="text/javascript">

       var app=new Vue({

           el:'#app',

           data:{

               count:1

           },

           methods:{

               jiafen:function(){

                   this.count++;

               },

               jianfen:function(){

                   this.count--;

               }

           }

       })

   </script>

</body>

</html>

v-on 還有一種簡單的寫法，就是用@代替。

1

<button@click="jianfen">減分</button>

除了綁定click之外，還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,增加一個輸入框，然后綁定回車事件，回車后把文本框里的值加到count上。

綁定事件寫法：

1

<inputtype="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript代碼：

1

2

3

onEnter:function(){

   this.count=this.count+parseInt(this.secondCount);

}

因為文本框的數(shù)字會默認轉變成字符串，所以需要用parseInt()函數(shù)進行整數(shù)轉換。也可以根據(jù)鍵值表來定義鍵盤事件：

vue內部指令學習經(jīng)驗

六、v-model指令

v-model指令，理解為綁定數(shù)據(jù)源。就是把數(shù)據(jù)綁定在特定的表單元素上，可以很容易的實現(xiàn)雙向數(shù)據(jù)綁定。

一、看一個最簡單的雙向數(shù)據(jù)綁定代碼：

html文件：

1

2

3

4

5

<divid="app">

   <p>原始文本信息：{{message}}</p>

   <h4>文本框</h4>

   <p>v-model:<inputtype="text" v-model="message"></p>

</div>

javascript代碼：

1

2

3

4

5

6

var app=new Vue({

 el:'#app',

 data:{

      message:'hello Vue!'

 }

})

二、修飾符

· .lazy：取代 imput 監(jiān)聽 change 事件。

· .number：輸入字符串轉為數(shù)字。

· .trim：輸入去掉首尾空格。

三、文本區(qū)域加入數(shù)據(jù)綁定

1

<textarea  cols="30" rows="10" v-model="message"></textarea>

四、多選按鈕綁定一個值

1

2

3

<h4>多選按鈕綁定一個值</h4>

<inputtype="checkbox" id="isTrue" v-model="isTrue">

<labelfor='isTrue'>{{isTrue}}</label>

五、多選綁定一個數(shù)組

1

2

3

4

5

6

7

8

9

10

      <h4>多選綁定一個數(shù)組</h4>

      <p>

           <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">

           <labelfor="JSP">JSPang</label><br/>

           <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">

           <labelfor="JSP">Panda</label><br/>

           <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">

           <labelfor="JSP">PanPan</label>

           <p>{{web_Names}}</p>

      </p>

六、單選按鈕綁定數(shù)據(jù)

1

2

3

4

5

6

<h4>單選按鈕綁定</h4>

<input type="radio" id="one" value="男" v-model="sex">

<labelfor="one">男</label>

<input type="radio" id="two" value="女" v-model="sex">

<labelfor="one">女</label>

<p>{{sex}}</p>

七：、v-bind 指令

v-bind是處理HTML中的標簽屬性的，例如<div></div>就是一個標簽，<img>也是一個標簽，綁定<img>上的src進行動態(tài)賦值。

html文件：

1

2

3

<divid="app">

   <imgv-bind:src="imgSrc"  width="200px">

</div>

在html中我們用v-bind:src=”imgSrc”的動態(tài)綁定了src的值，這個值是在vue構造器里的data屬性中找到的。

js文件：

1

2

3

4

5

6

var app=new Vue({

   el:'#app',

   data:{

         imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'

    }

})

在data對象在中增加了imgSrc屬性來供html調用。

v-bind 縮寫

1

2

3

4

<!-- 完整語法 -->

<av-bind:href="url"></a>

<!-- 縮寫 -->

<a:href="url"></a>

綁定CSS樣式

在工作中我們經(jīng)常使用v-bind來綁定css樣式：

在綁定CSS樣式是，綁定的值必須在vue中的data屬性中進行聲明。

1、直接綁定class樣式

1

<div:class="className">1、綁定classA</div>

2、綁定classA并進行判斷，在isOK為true時顯示樣式，在isOk為false時不顯示樣式。

1

<div:class="{classA:isOk}">2、綁定class中的判斷</div>

3、綁定class中的數(shù)組

1

<div :class="[classA,classB]">3、綁定class中的數(shù)組</div>

4、綁定class中使用三元表達式判斷

1

<div :class="isOk?classA:classB">4、綁定class中的三元表達式判斷</div>

5、綁定style

1

<div :style="{color:red,fontSize:font}">5、綁定style</div>

6、用對象綁定style樣式

1

<div :style="styleObject">6、用對象綁定style樣式</div>

1

2

3

4

5

6

7

8

9

var app=new Vue({

  el:'#app',

  data:{

      styleObject:{

          fontSize:'24px',

          color:'green'

           }

       }

})

八、其他內部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳過vue的編譯，直接輸出原始值。就是在標簽中加入v-pre就不會輸出vue中的data值了。

1

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

這時并不會輸出message值，而是直接在網(wǎng)頁中顯示{{message}}

v-cloak指令

在vue渲染完指定的整個DOM后才進行顯示。它必須和CSS樣式一起使用，

1

2

3

[v-cloak] {

 display: none;

}

1

2

3

<divv-cloak>

 {{ message }}

</div>

v-once指令

在第一次DOM時進行渲染，渲染完成后視為靜態(tài)內容，跳出以后的渲染過程。

1

2

<divv-once>第一次綁定的值：{{message}}</div>

<div><inputtype="text" v-model="message"></div>

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡助力業(yè)務部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調度，確保服務器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務器買多久送多久。

當前名稱：vue內部指令學習經(jīng)驗-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article46/idheg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站設計、網(wǎng)站設計、自適應網(wǎng)站、網(wǎng)站營銷、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站