本篇文章给大家带来了关于前端vue的相关知识，聊聊什么是内容渲染指令以及属性绑定指令等等，感兴趣的朋友，下面一起来看一下吧，希望对需要的朋友有所帮助！
vue 指令与过滤器内容渲染指令内容渲染指令是用来辅助开发者渲染 dom 元素的文本内容。常用的内容渲染指令有3种。
v-text示例
<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: '男',    }});
v-html可以把带标签的的字符串，渲染成真正的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在属性前加属性指令 v-bind: 为元素动态绑定值，vue 规定 v-bind 可以简写成: ,示例
<input type="text" v-bind:placeholder="tips"><img :src="photo" style="width: 150px;">
使用 javascript 表达式在 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 绑定事件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.js视频教程》
以上就是一文详解vue指令及其过滤器（附代码示例）的详细内容。