亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 29
粉絲 1
評論 0
訪問量 43598
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
初識(shí) vue 以及幾個(gè)常用的 v-指令的介紹
祥子弟弟
原創(chuàng)
2040人瀏覽過

一、導(dǎo)入 vue

使用 vue 渲染頁面要先進(jìn)行 vue 庫的導(dǎo)入，和 jQuery 一樣，可以通過 script 標(biāo)簽引入，可以在vue 官網(wǎng)上找到

  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

使用 vue 進(jìn)行頁面渲染時(shí)第一步時(shí)先將 vue 加載進(jìn)來，上邊已經(jīng)做過了，接下來在 html 文檔中創(chuàng)建一個(gè) Vue 根節(jié)點(diǎn)

  1. <h2 class="title">{{words}}</h2>

然后使用 vue 對頁面進(jìn)行渲染

  1. <script>
  2.   // 創(chuàng)建一個(gè)vue實(shí)例
  3.   const vm = new Vue({
  4.     // 當(dāng)前Vue的配置項(xiàng)
  5.     // 掛載點(diǎn)
  6.     // el: document.querySelector('.app'),
  7.     // Vue中可以識(shí)別選擇器的
  8.     el: ".app",
  10.     // 數(shù)據(jù)注入
  11.     data: {
  12.       words: "Hello World!",
  13.     },
  14.   });
  15. </script>

如果說是需要對 vue 中的原始數(shù)據(jù)進(jìn)行訪問，則需要通過在數(shù)據(jù)前加上 “$” 來進(jìn)行訪問，比如說是要訪問上邊例子中的 data 里邊的 words 數(shù)據(jù)

  1. <script>
  2.   console.log(vm.$data.words);
  3.   // 輸出 "Hello World!";
  4. </script>

使用 vue 對頁面進(jìn)行渲染時(shí)，dom 元素中是不會(huì)存在文本的，所有的文本數(shù)據(jù)都是通過 vue 實(shí)例添加上去的。所以當(dāng) vue 中的數(shù)據(jù)發(fā)生變化時(shí)，相應(yīng)的頁面中的數(shù)據(jù)也會(huì)發(fā)生變化。vue 中數(shù)據(jù)渲染到頁面上的過程叫做 “數(shù)據(jù)注入”。

二、vue 中幾個(gè)常用到的 v-指令

1. v-text, v-html 指令
使用以下示例作為演示

  1. <div class="app">
  2.   <p></p>
  3. </div>
  4. <script>
  5.   const vm = new Vue({
  6.     // 轉(zhuǎn)換效率最高
  7.     // el:document.querySelector('.app'),
  8.     el: ".app",
  9.     // vue的掛載點(diǎn)不能掛到body或者h(yuǎn)tml上，因?yàn)樗麄兙哂形ㄒ恍?/span>
  10.     data: {
  11.       userName: "我的名字就是這么長，驚不驚喜意不意外！",
  12.     },
  13.   });
  14. </script>

v-text, v-html 在 html 中是不存在這樣的屬性的，它是專門由 Vue 實(shí)例管理的自定義屬性，稱之為“指令”。

v-text 指令 ====> innerText，textContent,它會(huì)覆蓋掉原來的文本內(nèi)容。

  1. <p v-text="userName"></p>

可以看到的是，當(dāng)前的 html 文檔中是沒有文本存在的，所有的文本數(shù)據(jù)都是從 vue 實(shí)例中添加進(jìn)去的。

v-html 指令 ====> innerHTML, 它里邊就不僅僅是純文本了，還可以是 html 字符串

  1. <p v-text="userName"></p>
  2. <script>
  3.   vm.userName =
  4.     "<em style='color:red'>我的名字就是這么長，驚不驚喜意不意外！</em>";
  5. </script>

使用 v-html 指令，它里邊的內(nèi)容可以是純文本，也可以是 html 字符串

2. v-bind, v-on 指令
v-bind 指令是一個(gè)高頻指令，它的作用是動(dòng)態(tài)地綁定一個(gè)或多個(gè) 屬性，或一個(gè)組件 prop 到表達(dá)式。它可以簡寫成 “:”。

示例

  1. <style>
  2.   .active {
  3.     color: violet;
  4.   }
  5.   .bigger {
  6.     font-size: 2rem;
  7.   }
  8. </style>
  9. <body>
  10.   <div class="app">
  11.     <!-- <p style="color: pink">style: {{site}}</p> -->
  12.     <!-- v-bind不僅可以綁定行內(nèi)樣式，對于類樣式也是可以綁定的 -->
  13.     <p :style="style">style: {{site}}</p>
  15.     <!-- 綁定類class屬性 -->
  16.     <p :class="class1">class1: {{site}}</p>
  17.     <p :class="{active : isActive, bigger : isBigger}">class2: {{site}}</p>
  18.     <p :class="[`active`, `bigger`]">class3: {{site}}</p>
  19.   </div>
  21.   <script>
  22.     const vm = new Vue({
  23.       el: ".app",
  24.       // 數(shù)據(jù)
  25.       data: {
  26.         site: "php中文網(wǎng)",
  27.         style: "color: pink",
  28.         class1: "active bigger",
  29.         isActive: true,
  30.         isBigger: false,
  31.       },
  32.     });
  33.   </script>
  34. </body>

v-on 指令：綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。v-on 指令同樣是一個(gè)高頻指令，它可以簡寫成 “@”

示例

  1. <body>
  2.   <div class="app">
  3.     <p>
  4.       <a href="https://php.cn" @click.prevent="show"
  5.         >顯示網(wǎng)站名稱,阻止默認(rèn)行為</a
  6.       >
  7.     </p>
  8.     <p>
  9.       <a href="https://php.cn" @click.prevent="show"
  10.         >顯示網(wǎng)站名稱,冒泡行為演示</a
  11.       >
  12.     </p>
  13.     <!-- 事件修飾符stop：阻止冒泡行為 -->
  14.     <p>
  15.       <a href="https://php.cn" @click.prevent.stop="show"
  16.         >顯示網(wǎng)站名稱,阻止冒泡行為</a
  17.       >
  18.     </p>
  19.     <!-- 事件的回調(diào)函數(shù)僅允許執(zhí)行一次 -->
  20.     <p>
  21.       <a href="https://php.cn" @click.once.stop.prevent="show"
  22.         >顯示網(wǎng)站名稱,事件的回調(diào)函數(shù)僅允許執(zhí)行一次</a
  23.       >
  24.     </p>
  26.     <!-- 事件方法的傳參 -->
  27.     <!-- 事件對象的參數(shù)名必須是 $event -->
  28.     <button @click="handle($event,1,2)">click</button>
  29.   </div>
  30.   <script>
  31.     const vm = new Vue({
  32.       el: ".app",
  33.       // 數(shù)據(jù)
  34.       data: {
  35.         site: "php中文網(wǎng)",
  36.         style: "color: pink",
  37.         class1: "active bigger",
  38.         isActive: true,
  39.         isBigger: false,
  40.       },
  41.       // 方法（函數(shù)）
  42.       methods: {
  43.         show() {
  44.           // 在當(dāng)前的Vue實(shí)例中，this就是vue實(shí)例對象
  45.           alert(this.site);
  46.         },
  47.         handle(ev, a, b) {
  48.           console.log(ev.type, ev.target);
  49.           console.log("a + b = %d", a + b);
  50.         },
  51.       },
  52.     });
  53.   </script>
  54. </body>

事件修飾符

  • .stop

調(diào)用 event.stopPropagation(),阻止冒泡行為;

  • .prevent

調(diào)用 event.preventDefault(),禁用事件的默認(rèn)行為;

  • .once

只觸發(fā)一次回調(diào);

除了這幾個(gè)修飾符之外還有好多的事件修飾符，具體請到vue 官網(wǎng)中查看

3. v-model 雙向綁定指令
一般情況下頁面上的數(shù)據(jù)都是響應(yīng)式的，也就是單向綁定，就是頁面中的數(shù)據(jù)隨著 vue 實(shí)例中的數(shù)據(jù)變化而變化，而 v-model 指令的作用就是在表單控件或者組件上創(chuàng)建雙向綁定。只要任何一方的數(shù)據(jù)發(fā)生變動(dòng)，另一方的數(shù)據(jù)也會(huì)發(fā)生變化。

示例

  1. <body>
  2.   <div class="app">
  3.     <!-- 頁面中的數(shù)據(jù) -->
  4.     <!-- 響應(yīng)式：當(dāng)前頁面中的數(shù)據(jù)始終跟著模型數(shù)據(jù)的變化而變化 -->
  5.     <p>模型中的數(shù)據(jù)：{{site}}</p>
  6.     <>雙向綁定：<input type="text" v-model="site" /></>
  7.     <!-- 懶加載事件修飾符lazy，防止頁面刷新頻繁 -->
  8.   </div>
  9.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  10.   <script>
  11.     const vm = new Vue({
  12.       el: ".app",
  13.       data: {
  14.         // 模型中的數(shù)據(jù)
  15.         site: "php中文網(wǎng)",
  16.         num: 0,
  17.       },
  18.     });
  19.     // vm.site = "php.cn";
  20.   </script>
  21. </body>

這樣在頁面端的數(shù)據(jù)發(fā)生變化時(shí)，vue 實(shí)例中的數(shù)據(jù)也會(huì)發(fā)生變化

4. v-for
v-for:簡單來說就是遍歷一個(gè)數(shù)組/對象，不過在 vue 中的 v-for 不是那么簡單，它可以用來動(dòng)態(tài)的生成列表。
v-for 的默認(rèn)行為會(huì)嘗試原地修改元素而不是移動(dòng)它們。要強(qiáng)制其重新排序元素，你需要用特殊屬性 key 來提供一個(gè)排序提示。key 只能是整數(shù)或是不重復(fù)的字符串，只有唯一，它才可以作為排序時(shí)的關(guān)鍵信息。

示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>v-for,key指令</title>
  6.   </head>
  7.   <body>
  8.     <div class="app">
  9.       <!-- key指令可以干涉diff算法，key一定是穩(wěn)定且唯一的，vue通過key來判斷這個(gè)節(jié)點(diǎn)是否需要重新渲染，以提升效率 -->
  11.       <!-- 遍歷一個(gè)數(shù)組 -->
  12.       <ul>
  13.         <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
  14.       </ul>
  16.       <!-- 遍歷一個(gè)對象 -->
  17.       <ul>
  18.         <li v-for="(item,prop,index) in user" :key="index">
  19.           {{prop}}--{{index}}--{{item}}
  20.         </li>
  21.       </ul>
  22.       <!-- key只能是整數(shù)或是不重復(fù)的字符串 -->
  24.       <!-- 遍歷一個(gè)對象數(shù)組 -->
  25.       <ul>
  26.         <li v-for="(user,index) in users" :key="user.id">
  27.           {{user.id}}--{{user.name}}--{{user.age}}
  28.         </li>
  29.       </ul>
  31.       <span v-for="n in 10">{{n}}</span>
  32.     </div>
  33.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  34.     <script>
  35.       const vm = new Vue({
  36.         el: ".app",
  37.         data: {
  38.           //數(shù)組
  39.           items: ["小紅", "小綠", "小藍(lán)"],
  40.           // 對象
  41.           user: {
  42.             name: "小蘭",
  43.             age: 18,
  44.           },
  45.           // 對象數(shù)組，使用最頻繁的，數(shù)據(jù)表的查詢結(jié)果就是一個(gè)這樣的二維JSON
  46.           users: [
  47.             { id: 1, name: "皮卡丘", age: 2 },
  48.             { id: 2, name: "噴火龍", age: 4 },
  49.             { id: 3, name: "皮皮蝦", age: 6 },
  50.           ],
  51.         },
  52.       });
  53.     </script>
  54.   </body>
  55. </html>

下圖是對 vue 中數(shù)據(jù)的遍歷情況

下圖是生成的元素與遍歷情況的對應(yīng)

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)