vue 过滤器和自定义指令、组件
来源:互联网 发布:淘宝的数据分析 编辑:程序博客网 时间:2024/05/24 03:07
1.过滤器filter
作用:
用于一些常见的文本格式化,用在哪里就在哪里过滤
用处 :双花括号插值 {{ message | capitalize }}
v-bind 表达式 <div v-bind:id="rawId | formatId"></div>
定义:
全局:
Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })
局部:
filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }
过滤器可以串联 {{ message | filterA | filterB }}
message经过A过滤后将结果传给B再次过滤
过滤器是Javascript函数,所以可以接收参数
{{ message | filterA('arg1', arg2) }}
filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数
2.自定义指令v-自定义
作用:可以自己定义一个想要的指令方法,实现某些功能
用法 : <input v-focus>
定义:
全局:
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})
局部:
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}
钩子函数
指令定义对象提供的内部函数
bind : 只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。
钩子函数的参数
el:指令所绑定的元素,可以用来直接操作 DOM
binging:一个对象包含(只读)
name 指令名(不带v-前缀)
value 指令的绑定值
vnode: (只读)
Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode:(只读)
上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用
3.计算属性#computed
计算属性缓存VSmathods方法
计算属性可以缓存,只要值不发生改变就不需要重新计算
mathodes方法是每次都需要重新计算的
所以,计算属性性能更高
用法:
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})
4.跨域
jsonp
cors
vue-resource
vue与后台Api进行交互通常是利用vue-resource(其中的一种方法)来实现的,本质上vue-resource是通过http来完成Ajax请求响应的
5.定义组件
定义组件的方式有两种
1.先定义模板,再注册组件
var 模板名=Vue.extend({template: 定义的模板}) Vue.component( '组件名',定义的模板名 )
2.在定义模板的同时注册组件
Vue.component(’组件名’,{template:定义的模板})
定义模板的方式有三种
template: "<p>222222222222</p> "
放在body的内部,作用域的外部,使用template标签,
template:"#p3" <template id="p3"> <div> <p>333333333</p> </div> </template>
放在 body的内部,作用域的外部,使用script标签
template:"#p4" <script type="x-template" id="p4"> <div> <p>4444444444</p> </div> </script>
定义模板的时候,每一种方式都必须要有一个根节点
定义好的组件要使用,必须写在vue作用域中,否则不会解析显示
定义组件名的时候,使用驼峰命名
6.使用组件
1.子组件只能在父组件的模板作用域中使用
2.组件跟组件之间的作用域是相互独立的
3.组件跟组件之间所有的属性都是独立的,都是基于组件本身的作用域的
4.使用组件的标签名将驼峰拆分为-
5.构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外:data必须是函数
7.组件之间相互传递值
父组件给子组件传值 (props)
组件实例的作用域是孤立的,这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据,父组件的数据需要通过props 才能下发到子组件中
<head> <script src="../vue.js"></script> </head> <body> <div id="app"> <child :msg="message"></child> </div> <script> Vue.component('child',{ props:['msg'], template:'<h1>{{ msg }}</h1>' }) new Vue({ el:'#app', data:{ message:'222' } }) </script> </body>
- vue 过滤器和自定义指令、组件
- Vue过滤器和自定义过滤器
- vue学习(二) vue生命周期 vue自定义指令和过滤器
- vue内置指令、自定义指令及自定义过滤器
- vue学习(一) vue指令和过滤器
- angularJS自定义过滤器、服务和指令
- vue全局自定义指令和局部自定义指令
- Vue自定义过滤器
- Vue自定义过滤器
- Vue---自定义过滤器
- Vue自定义过滤器
- Vue之自定义过滤器
- vue自定义过滤器
- vue 2.0 自定义过滤器
- vue组件化挖矿之旅(三):vue-cli 自定义过滤器的使用
- Vue2 自定义全局指令Vue.directive和指令的生命周期
- vue自定义指令-vue-reclick
- vue自定义组件和列表循环--vue学习笔记
- Python之路【第十三篇】jQuery案例-Form表单&插件及扩展
- hosts配置路径:
- 有符号字符和无符号字符的对应关系(C语言)
- AngularJS-directive参数详解
- 将自己的手机卡设置成空号
- vue 过滤器和自定义指令、组件
- 机器学习的一些算法
- A记录和CNAME记录的区别
- Tomcat发布项目去掉端口和项目名
- 《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL
- 用yum在centos7.3上安装mysql
- log4j配置实例,简单实用,我用来做模板的
- numpy.meshgrid
- NeedDownloadError: Need ffmpeg exe. 问题解决