天天看點
傳回

Vue基礎 ---指令系統Vue指令系統

Vue指令系統

vue 指令是什麼？

指令 (Directives) 是帶有 v- 字首的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表達式 (v-for 是例外情況，稍後我們再讨論)。指令的職責是，當表達式的值改變時，将其産生的連帶影響，響應式地作用于 DOM。

vue常用指令：

1.資料綁定

非表單元素_單向資料綁定_：div span ul li h1-h6 p等

{{}} v-html v-text

模闆文法：

Vue.js 使用了基于 HTML 的模闆文法，允許開發者聲明式地将 DOM 綁定至底層 Vue 執行個體的資料。所有 Vue.js 的模闆都是合法的 HTML，是以能被遵循規範的浏覽器和 HTML 解析器解析。

如果你熟悉虛拟 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模闆，直接寫渲染 (render) 函數，使用可選的 JSX 文法。

{{}} 模闆文法 優點：簡單 友善 缺點：不能解析标簽，首屏會出現閃屏問題

v-html 優點：可以解析标簽 缺點：不友善

v-text 優點：可以解決首屏閃屏問題 缺點：不友善，不能解析标簽

<div id="app">
        <h1>模闆文法</h1>
        <div>{{msg}}</div>
        <!-- {{}}内部js解析，{{}}外面 html解析 -->
        <div>hello, {{name}}</div>
        <!-- {{}} 内部必須遵循js的文法 -->
        <div>{{'hello,'+name}}</div>
        <!-- {{}} 三元 -->
        <div>{{n>10?name:'王昭君'}}</div>
        <!-- {{}} 方法 -->
        <div>價格：{{price.toFixed(2)}}</div>
        <div>{{strHTML}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"畫畫的baby,畫畫的baby",
                name:"妲己",
                n:10,
                price:19.90,
                strHTML:"<em>哈哈哈哈</em>"
            },
            methods:{}
        })
    </script>

表單元素_雙向資料綁定_:Input、textarea、select-option …

v-model:雙向資料綁定

<div id="app">
        <!-- 視圖 -->
        <h2>{{name}}</h2>
        <input type="text" v-model="name">
        <button v-on:click="login()">送出</button>
    </div>
    <script>
        // 4.執行個體化vue對象
        new Vue({
            //element
            el:"#app",
            data:{//資料 模型
                //雙向資料綁定
                //MVVM模式： M-model模型 V-view視圖  VM-viewModel視圖模型
                //模型通過 視圖模型 控制視圖，視圖又可以 通過視圖模型 修改模型，視圖模型是模型和視圖之間的橋梁
                //MVVM模式
                name:"張三"
            },
            methods:{
                login(){
                    console.log(this.name);
                }
            }
        })
    </script>

2.屬性綁定

媒體元素：img video

v-bind 簡寫

：

v-bind 指令将該元素的 href attribute 與表達式 url 的值綁定。

<div id="app">
        <!-- 屬性綁定 v-bind,可以綁定已經存在的屬性，也可以綁定自定義屬性  -->
        <!-- v-bind 後面的内容必須滿足js的文法 -->
        <a v-bind:href="compony.url"  v-bind:title="compony.name">
            <img v-bind:src="compony.logo" alt="易烊千玺">
        </a>
        <!-- 屬性可以自己定義 -->
        <div v-bind:sum="x+y+'aa'">這是自己定義的</div>

        <!-- 簡寫 : -->
        <a :href="compony.url" :title="compony.name">
            <img :src="compony.logo" alt="">
        </a>
        <div :sum="x+y+'aa'">這是自己定義的</div>
    </div>
			<script>
        // 3.執行個體化
        new Vue({
            el:"#app",//挂載點
            data:{//屬性
                compony:{
                    name:"易烊千玺",
                    url:"https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
                    logo:"https://bkimg.cdn.bcebos.com/pic/9825bc315c6034a881b02393c413495409237656?x-bce-process=image/resize,m_lfit,h_500,limit_1"
                },
                x:10,
                y:20
            },
            methods:{//方法

            }
        })
    </script>

動态屬性

動态class=>：class 
<!-- 第一種方式： :class="變量" -->
    <h3 :class="class1">天道酬勤</h3>
    <!-- 第二種方式 ： :class="[三元]" 就隻有兩種情況 -->
    <h3 :class="[aa?'red blue':'yellow purple']">人道酬善</h3>
    <!-- 第三種方式 :class="{'類名1':boolean,'類名2':boolean}" -->
    <h3 :class="{'red':isRed,'yellow':isYellow,'lime':isLime,'purple':isPurple,'blue':isBlue}">商道酬信</h3>
    
	<div v-bind:class="{ active: isActive }"></div>
	<script>
		new Vue({
	        el:"#app",//挂載點
	        data: {
				isActive: true,
				hasError: false
			}
	    })
	</script>
動态style:=>：style

v-bind:style 的對象文法十分直覺——看着非常像 CSS，但其實是一個 JavaScript 對象。CSS property 名可以用駝峰式 或短橫線分隔來命名

<!-- 動态style  :style="json" -->
	<div v-bind:style="styleObject"></div>
	<!-- 動态style  :style="[數組文法]" -->
	<div v-bind:style="[baseStyles, overridingStyles]"></div>
	<button v-on:click="changeColor()">點選字型顔色改為orange</button>
	
	<script>
 		new Vue({
            el:"#app",//挂載點
            data: {
			  styleObject: {
			    color: 'red',
			    fontSize: '13px'
			  }
			},
			methods:{//方法
                changeColor(){
                    this.json.color="orange"
                }
            }
        })
       </script>

3.條件渲染

v-if v-show v-else

相同點：

v-if 和v-show 都是true顯示，false 消失

不相同點：

v-if false 不加載節點-惰性加載

v-show false 加了display:none；

使用場景：

頻繁切換，建議使用v-show,不頻繁切換，建議使用v-if.

補充：v-else

v-else必須接着v-if

v-if v-else

<h2 v-if="isShow">優秀是一種習慣</h2>
  	<h2 v-else>認真是一種态度</h2>
 	<div id="app">
        <!-- v-if 條件渲染，true 出現，false消失。 -->
        <h3 v-if="false">畫畫的baby 畫畫的baby</h3>
        <!-- 0為假，非0即為真 -->
        <h3 v-if="-1">奔馳的小野馬和帶刺的玫瑰</h3>

        <h3 v-if="a">優秀是一種習慣</h3>
        <h3 v-if="b">認真是一種态度</h3>

        <button v-on:click="toggle()">切換</button>
        <h3 v-if="isshow">堅持是一種品格</h3>
        
        <h3 v-if="comment.length==0">暫無資料</h3>
        <h3 v-if="comment.length>0">有資料</h3>
        <hr>
        <h3 v-if="comment.length==0">暫無資料</h3>
        <h3 v-else>有資料</h3>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                a: true,
                b: '123',
                isshow: true,
                comment:["物美價廉",'特别好',"推薦"]
            },
            methods: {
                toggle() {
                    /*
                    if (this.isshow) {
                        this.isshow = false
                    } else {
                        this.isshow = true;
                    }*/ 
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>

v-show

<div id="app">
       <!-- v-show true 出現，false 消失 -->
        <h3 v-show="false">畫畫的baby 畫畫的baby</h3>
       
        <button v-on:click="toggle()">切換</button>
        <h3 v-show="isshow">堅持是一種品格</h3>

    </div>
    <script>
        new Vue({
            //element
            el: "#app",
            data: {
                isshow: true
            },
            methods: {
                toggle() {
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>

4.清單渲染

v-for

v-for 指令基于一個數組來渲染一個清單。 v-for 指令需要使用 item in items 形式的特殊文法，其中 items 是源資料數組，而 item 則是被疊代的數組元素的别名。

<div id="app">
        <ul>
            <li v-for="(item,index) in comment">{{index+1}}-{{item}}</li>
        </ul>
        <div>
            <a :href="item.url" :title="item.name" v-for="(item,index) in website">
                <img :src="item.logo" alt="">
            </a>
        </div>
        <div class="box">
            <div class="item" v-for="x in goods">
                <img :src="x.img" alt="">
                <h3>{{x.title}}</h3>
                <p>{{x.info}}</p>
                <p>{{x.num}}</p>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                comment: ["物美價廉", '特别好', "推薦", "物美價廉", '特别好', "推薦"],
                website: [{
                        name: "京東",
                        url: "http://jd.com",
                        logo: "http://img1.360buyimg.com/da/jfs/t1/17098/23/11599/160999/5c90a484E27dd5514/7287f0d182775168.gif"
                    },
                    {
                        name: "淘寶",
                        url: "http://taobao.com",
                        logo: "http://img.alicdn.com/tfs/TB1UDHOcwoQMeJjy0FoXXcShVXa-286-118.png"
                    },
                    {
                        name: "百度",
                        url: "http://baidu.com",
                        logo: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
                    },
                ],
                goods: [{
                        img: "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_360x360xzq90.jpg_.webp",
                        title: "大豆家  方頭奶奶鞋",
                        info: "一腳蹬設計，友善日常的穿脫。",
                        num: "378人都說好"
                    },
                    {
                        img: "https://img.alicdn.com/tfscom/i3/2459354798/TB2IyE5eUhnpuFjSZFpXXcpuXXa_!!2459354798.jpg_360x360xzq90.jpg_.webp",
                        title: "大豆家  方頭奶奶鞋",
                        info: "一腳蹬設計，友善日常的穿脫。",
                        num: "358人都說好"
                    },
                    {
                        img: "https://img.alicdn.com/tfscom/i4/654230132/O1CN011CqUjXBxyNTXTMy_!!654230132.jpg_360x360xzq90.jpg_.webp",
                        title: "大豆家  方頭奶奶鞋",
                        info: "一腳蹬設計，友善日常的穿脫。",
                        num: "58人都說好"
                    },

                ]
            }
        })
    </script>

vue的v-for更新的時候采用的是“就地更新”原則，如果更新的時候想要提高更新的性能，我們需要給vue一個辨別，作為對比條件，這個辨別必須是唯一的，是以一般使用id.

在腳手架中必須加上key，不然報錯

<ul>
           <li v-for="(a,b) in people" :key="a.id">
               <h3>{{b}}姓名：{{a.name}}</h3>
               <p>金額：{{a.money}} <button v-on:click="add(b)">++</button> </p>
           </li>
       </ul>

5.事件處理

v-on 指令監聽 DOM 事件，并在觸發時運作一些 JavaScript 代碼。

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

6.表單修飾符 

<!-- .lazy 失去光标才修改模型資料，優化 -->
       <input type="text" v-model.lazy="name">

       <!-- .number 将綁定的資料 的資料類型轉換為number -->
       <input type="text" v-model.number="age" v-on:blur="blur()">

       <!-- .trim 去空格 -->
       <input type="text" v-model.trim="name">

7.事件處理

事件修飾符，.stop .prevent .capture .self .once .passive

按鍵修飾符，:keyup.enter :keydown.down

按鍵碼，.enter .tab .delete (捕獲“删除”和“倒退”鍵) .esc .space .up .down .left .right

系統修飾鍵，.ctrl .alt .shift .meta

滑鼠按鈕修飾符.left .right .middle，

新增：.exact 修飾符- 修飾符允許你控制由精确的系統修飾符組合觸發的事件。

<div id="app">
        <!--1. .prevent 阻止預設事件 -->
        <div class="box" @contextmenu.prevent="yj"></div>
        <!-- 案例 -->
        <input type="text" @keydown.38.prevent="up">
        
        <!--2 .stop 阻止事件傳播 -->
        <div class="outer" @click="outerClick">
            <div class="inner" @click.stop="innerClick"></div>
        </div>
        <!-- 案例 -->
        <button @click="isshow=true">删除</button>
        <div class="mask" v-if="isshow" @click="isshow=false">
            <div class="con" @click.stop="conClick()">
                <h3>你确定要删除嗎？</h3>
                <button @click="isshow=false">取消</button>
                <button>确定</button>
            </div>
        </div>

        <!-- 3. .self 觸發的目标元素是自身，才執行 -->
        <button @click="isshow2=true">删除2</button>
        <div class="mask" v-if="isshow2" @click.self="isshow2=false">
            <div class="con" >
                <h3>你确定要删除嗎2？</h3>
                <button @click="isshow2=false">取消</button>
                <button>确定</button>
            </div>
        </div>

        <!--4 .left .right .up .down .enter .13   -->
        <input type="text" 
        @keydown.up="up2"
        @keydown.down="down"
        @keydown.enter="enter"
        @keydown.left.prevent="left"
        @keydown.right="right"
        >

        <!--5 .capture 捕獲 -->
        <div class="outer" @click.capture.stop="outerClick">
            <div class="inner" @click.capture="innerClick">捕獲</div>
        </div>

        <!-- 6. .native 解決元件綁定不上事件 -->
       <hello @click.native="outerClick"></hello>
       
       <!-- 新增：7.點選事件将隻會觸發一次 -->
		<a v-on:click.once="yj"></a>

    </div>
    <script>
        new Vue({
            el: "#app",//挂載點
            data: {//屬性
                isshow:false,
                isshow2:false
            },
            methods: {//方法
                yj() {
                    console.log("右鍵了");
                },
                outerClick() {
                    console.log("outer click");
                },
                innerClick() {
                    console.log("inner click");
                },
                up() {
                    console.log("按了上鍵");
                },
                conClick(){},
                up2(){
                    console.log("上鍵");
                },
                down(){
                    console.log("下鍵");
                },
                enter(){
                    window.open("http://baidu.com")
                },
                left(){
                    console.log("left");
                },
                right(){
                    console.log("right");
                },
            }
        })
    </script>

6.MVVM模式

适用：大量的資料增删改查的操作

M-model 模型 V-view 視圖 VM-viewModel 視圖模型 (控制器)

模型通過控制器決定了視圖，

視圖可以通過控制器修改模型，

視圖模型是模型和視圖之前的橋梁。

總結：常用指令

表單元素：v-model

非表單元素： {{}} v-html v-text

屬性綁定：v-bind=》： v-on=》@

條件渲染：v-if v-else v-show

清單渲染：v-for

vue指令系統 vue事件處理 前端 vue html
上一篇: [Branch Prediction]處理器分支預測文獻筆記(1)
下一篇: Linux檢視程序檔案絕對路徑

繼續閱讀