Vue 其他知识点
过滤器
- 作用:处理数据格式
- 使用位置:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
- 分类:局部注册和全局注册
1. 局部注册
- 在vm对象的选项中配置过滤器filters:{}
- 过滤器的名字: (要过滤的数据)=>{return 过滤的结果}
- 在视图中使用过滤器: {{被过滤的数据 | 过滤器的名字}}
<div id="app"> <!-- 3. 调用过滤器 --> <p>{{ msg | upper | abc }}</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'kfc' }, // 1. 设置vm的过滤器filters选项 filters: { upper: function(v) { // 2. 在过滤器的方法中操作数据并返回结果 return v.toUpperCase(); } } }); </script> 复制代码
注意: 局部注册的过滤器只适用于当前vm对象
2. 全局注册
- 在创建 Vue 实例之前定义全局过滤器Vue.filter()
- Vue.filter('该过滤器的名字',(要过滤的数据)=>{return 对数据的处理结果});
- 在视图中通过{{数据 | 过滤器的名字}}或者v-bind使用过滤器
<div id="app"> <!-- 3. 调用过滤器: (msg会自动传入到toUpper中)--> <p>{{msg | toUpper}}</p> </div> <script src="./vue.js"></script> <script> // 1. 定义全局过滤器 Vue.filter('toUpper', (value) => { console.log(value); // 2. 操作数据并返回 value = value.charAt(0).toUpperCase() + value.substr(1).toLowerCase(); console.log(value); return value; }); new Vue({ el: '#app', data: { msg: 'hello' }, methods: { } }); </script> 复制代码
注意: 全局注册的过滤器, 不同的vm对象都可以使用
- 过滤器是可以串联使用的, 比如 {{msg | upper1 | upper2}}
- 过滤器是可以传参数的,比如{{msg | upper1(自己传的参数)}}
ref 操作 DOM
- 解决的问题: 在vue中操作DOM元素
- 使用步骤:
- 给DOM元素设置ref属性的值
- 在Vue中的mounted选项下通过this.$refs.属性 获取到要操作的DOM
<div id="app"> <!-- 1. 给要操作的DOM元素设置ref属性 --> <input type="text" ref="txt"> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', // mounted当页面加载完毕执行 mounted() { console.log(this.$refs.txt); // 2. 用this.$refs.属性 去操作DOM this.$refs.txt.focus(); }, }); </script> 复制代码
自定义指令
- 使用场景:需要对普通 DOM 元素进行操作，这时候就会用到自定义指令
- 分类:全局注册和局部注册
1. 局部注册
- 在vm对象的选项中设置自定义指令 directives:{}
- directives:{'指令的核心名称':{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }}
- 在视图中通过标签去使用指令
<div id="app"> <!-- 3. 在视图中通过标签去使用指令 --> <input v-focus type="text"> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', // 1. 在vm对象的选项中设置自定义指令 directives:{} directives: { // 2. directives:{'指令的核心名称':{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }} focus: { // 指令的定义 inserted: function(el) { el.focus(); } } } }); </script> 复制代码
2. 全局注册
1. 在创建 Vue 实例之前定义全局自定义指令Vue.directive() 2. Vue.directive('指令的名称',{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } ); 3. 在视图中通过"v-自定义指令名"去使用指令 复制代码
<div id="app"> <!-- 3. 在视图中通过标签去使用指令 --> <input v-focus type="text"> </div> <script src="./vue.js"></script> <script> // 全局自定义指令 // 1.在创建 Vue 实例之前定义全局自定义指令Vue.directive() // 2. Vue.directive('指令的核心名称',{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } } ); Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时,inserted会被调用 inserted: (el) => { // el 就是指令所在的DOM对象 el.focus(); } }); var vm = new Vue({ el: '#app' }); </script> 复制代码
Vue.directive(自定义指令名) 不需要加v- 使用自定义指令时需要加v-
inserted: 当被绑定的元素插入到 DOM 中时,会被调用
