這篇文章為大家帶來了關於前端vue的相關知識，聊聊什麼是內容渲染指令以及屬性綁定指令等等，感興趣的朋友，下面一起來看一下吧，希望對需要的朋友有所幫助！
內容渲染指令是用來輔助開發者渲染DOM 元素的文字內容。常用的內容渲染指令有3種。
範例
<div id="app"> <!-- 把 username 对应的值，渲染到第一个 p 标签中 --> <p v-text="username"></p> <!-- 把 gender 对应的值，渲染到第二个 p 标签中 --> <!-- 注意：第二个 p 标签中，默认文本会被gender值覆盖 --> <p v-text="gender">性别</p> </div> <!-- 导入 vue 的库文件 --> <script src="./lib/vue.js v2.7.13.js"></script>
//创建vue 的实例对象
const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'zs',
gender: '男'
}
});{{}}雙大括號在實際開發中應用較多，不會覆寫原有渲染
範例
<div id="app">
<p>姓名：{{username}}</p>
</div>const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'zs',
gender: '男',
}
});#可以把標籤的的字串，渲染成真正的html 內容
範例
<div id="app"> <div v-html="info"></div> </div>
const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
info: '<h4 style="color: red; font-weight: bold;"> 欢迎学习 vuejs</h4>'
}
});注意：插值表達式只能用在元素內容節點中，不能用在元素的屬性節點
在屬性前加上屬性指令v-bind: 為元素動態綁定值，vue 規定v-bind 可以簡寫成: ,範例
<input type="text" v-bind:placeholder="tips"> <img :src="photo" style="width: 150px;">
在vue 提供的範本渲染語法中，除了支援綁定簡單的資料值之外，也支援javascript 表達式的運算，例如
{{ number + 1 }};
{{ ok ? 'YES' : 'NO'}};
{{ message.split('').reverse().join('')}};
<div v-bind:id="'list-' + id"></div>注意在簡寫v-bind 屬性綁定期間，如果綁定內容需要進行動態拼接，則字串外應包裹單引號，例如
<div :title="'box' + index">!!!!!</div>
v-on 綁定事件指令，輔助程式設計師為DOM元素綁定監聽事件，格式如下
<p>count的值是: {{count}}</p>
<!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
<button v-on:click="addCount">+1</button> const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data:{
count: 0,
},
// 定义事件的处理函数
methods:{
add: function () {
// console.log(vm);
// vm.count += 1;
// this === vm
this.count += 1;
}
// 也可简写成
add () {
// console.log(vm);
this.count += 1;
}
}
});v-on: 也可以簡寫@
<button @click="sub">-1</button>
注意：原生DOM 物件有onclick、oninput、onkeydown 等原生事件，替換成vue的事件綁定形式後，分別為： v-on:click 、v-on:input、v-on:keydown
vue 提供了內建固定的變數$event ，它就是原生DOM 的事件物件e
<!-- 如果 count 为偶数，则按钮背景变为蓝色，否则，取消背景 --> <!-- vue 提供了内置固定的变量 $event ，它就是原生 DOM 的事件对象 e--> <button @click="add(1, $event)">+n</button>
const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data:{
count: 0,
},
// 定义事件的处理函数
methods:{
add (n, e) {
this.count += 1;
// 判断 this.count 的值是否为偶数
if (this.count%2 === 0) {
//偶数
e.target.style.backgroundColor = 'blue';
console.log(e);
} else {
// 奇数
e.target.style.backgroundColor = '';
}
}
}
});在事件處理函數中呼叫event.preventDefault() 或event.stopPROpagation() 是非常常見的需求。因此， vue 提供了事件修飾的概念，輔助程式設計師更方便的**對事件的觸發進行控制。常用5種修飾符如下：
| 事件修飾符 | #說明 |
|---|---|
.prevent
|
阻止預設行為（例如：阻止a 連結跳轉、阻止表單提交等） |
.stop |
阻止事件冒泡 |
.capture |
以捕獲模式觸發當前的事件處理函數 |
.once |
#綁定事件只觸發一次 |
.self |
只有在event.target 是當前元素本身時觸發事件處理函數 |
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data:{},
// 定义事件的处理函数
methods:{
show () {
// e.preventDefault();
console.log("点击了 a 链接");
}
}
});vue.js影片教學》
以上是一文詳解vue指令及其過濾器（附程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
