本篇内容主要讲解“vue指令及其过滤器怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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: '<h5 style="color: red; font-weight: bold;"> 欢迎学习 vuejs</h5>'
}
});
注意:插值表达式只能用在元素内容节点中,不能用在元素的属性节点
在属性前加属性指令 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 是当前元素自身时触发事件处理函数 |
示例1:
<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指令及其过滤器怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。