首頁 >web前端 >Vue.js >Vue指令入門之聊六大常用內建指令

Vue指令入門之聊六大常用內建指令

青灯夜游轉載: 2022-06-09 12:06:562879瀏覽

這篇文章帶大家了解一下Vue指令，介紹一下Vue六大常用內建指令，希望對大家有幫助！

Vue指令入門之聊六大常用內建指令

指令分類

#（Directives），是vue為開發者提供的範本語法 ，用於輔助開發者渲染頁面的基本結構。（學習影片分享：vuejs影片教學

）

所用到的資料定義在實例的data 中，事件定義在實例的
中
內容渲染指令：輔助開發者渲染DOM元素的文字內容
屬性綁定指令：輔助開發者為元素的屬性動態綁定屬性值
事件綁定指令：輔助開發者為元素綁定事件
雙向綁定指令：輔助開發者在不操作DOM的前提下，快速取得表單資料（資料來源的變更會同步到頁面上，頁面上的變更也會同步到資料來源）

條件渲染指令

：輔助開發者按需控制DOM的顯示與隱藏

列表渲染指令

：輔助開發者基於一個陣列來循環渲染一個列表結構#一、內容渲染指令

v-text

#只能渲染純文字內容，會覆寫

標籤內部原本的內容

<p v-text="gender">性别</p>

{{ }} 插值表達式

只能渲染純文字內容，不會覆寫

標籤內部原本的內容

<p>性别：{{ gender }}</p>

v-html

能將標籤的字串渲染成html內容，

會覆寫 標籤內部原本的內容

<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->

二、屬性綁定指令

v-bind ：或：

為元素的屬性動態

綁定屬性值

<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->

注意：插值表達式

和

v-bind 也支援javascript表達式的運算

{{ 1 + 2 }}  //一元运算
{{ ok ? &#39;YES&#39; : &#39;NO&#39;}}  //三元运算
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}  //字符串的反转

<div :id="&#39;list-&#39; + id"></div>  <!--字符串和变量的拼接-->

#三、事件綁定指令

v-on：或@

為元素綁定事件<pre class="brush:js;toolbar:false;"><button v-on:click="add">+1</button>  <button @click="add">+1</button>  ----------------------------------------------------------- <script> //创建vue的实例对象 const vm = new Vue({ methods:{ add(){ this.count ++; //相当于vm.count ++; } } }) </script></pre>

event

，它是一個對象，裡面的target屬性指向的是當前綁定事件的DOM元素傳一個參：event則會被覆蓋，為了能用自己傳的參又能保留event，則可以手動再傳一個實參

$event

，形參隨意

<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{                    
            add(n,event){
                //修改
                this.count +=n;

                //判断
                if(this.count % 2 === 0)
                    event.target.style.color = &#39;red&#39;;
                else
                    event.target.style.color = &#39;&#39;;
            }                    
        }
    })
</script>

##事件修飾符只要是事件，就能使用的修飾符，以下列舉5個常用的#事件修飾符##說明#.prevent阻止預設行為（例：阻止a連結的跳轉、封鎖表單的提交）.stop阻止事件冒泡.capture以擷取模式觸發目前的事件處理函數.once綁定的事件只觸發一次.self

只有在event.target是當前元素本身時觸發事件處理函數

<!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>

按鍵修飾符按鍵修飾符說明##.esc.enter

只能在觸發鍵盤事件時，使用的修飾符，以下列舉2個常用的

按下鍵盤esc鍵時

按鍵盤enter鍵時

<!--举个例子-->
<!--keyup是事件名称     .esc是按键修饰符     clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">

四、雙向綁定指令

v-model

快速取得表單資料（只套用於表單元素，如：input、textarea、select）

<input type="text" v-model="username">

<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

專屬修飾符只能給v-model使用的修飾符#專屬修飾符說明#.number.trim.lazy



會自動將使用者輸入的值轉為數值類型
自動過濾使用者輸入的首尾空白字元

在失去焦點時才自動更新資料（一般情況下都是即時更新的）############

<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

五、条件渲染指令

v-show

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

<p v-show="flag">这是被 v-show 控制的元素</p>

v-if

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

<p v-if="flag">这是被 v-if 控制的元素</p>

v-else-if

配合 v-if 指令一起使用，否则将不会被识别

<div v-if="type === &#39;A&#39;">优秀</div>
<div v-else-if="type === &#39;B&#39;">良好</div>
<div v-else-if="type === &#39;C&#39;">一般</div>
<div v-else>差</div>

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

item是 被循环的每一项 ，名字随意
items是 待循环的数组 ，名字随意

<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>

    <tbody>
        <!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
        <!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
        <tr v-for="(item,index) in list">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
       </tr>
    </tbody>
</table>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:&#39;张三&#39;, gender:&#39;男&#39; },
                { id: 2, name:&#39;李四&#39;, gender:&#39;女&#39; },
                { id: 3, name:&#39;王五&#39;, gender:&#39;男&#39; }
            ]
        }
    })
</script>

注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）
key 的属性值只能是 字符串/数字 类型，否则报错
key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系）

<tr v-for="(item,index) in list" :key="item.id">

（学习视频分享：web前端开发、编程基础视频）

以上是Vue指令入門之聊六大常用內建指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html if for select 字符串循环值类型 Event 形参实参 number 对象事件 dom display input 键盘事件

陳述：

本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除

上一篇：手把手帶你利用vue3.x繪製流程圖下一篇：手把手帶你利用vue3.x繪製流程圖

看更多

Vue指令入門之聊六大常用內建指令

指令分類

：輔助開發者按需控制DOM的顯示與隱藏

<input v-bind:placeholder="tips">  <input :placeholder="tips"> 注意：插值表達式

五、条件渲染指令

六、列表渲染指令

相關文章

<input v-bind:placeholder="tips">  <input :placeholder="tips"> 
注意：插值表達式