摘要:用法如下注册全局的指令注册一个全局自定义指令当绑定元素插入到中。具体代码如下当组件中需要用到其他的组件时,需要使用属性去创建一个哈希表。具体用法如下包含组件引入组件在中添加组件的哈希表收尾除了上面这些属性,还有一些杂项详情请看官网
后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失,最后变得像挨了锤的牛一样。
——王小波
三、组件对象
在组件中被包裹的代码可以看成是一个对象,也就是vue实例。下面将简单介绍vue实例的属性:
1. 数据
这里的数据可以看做是MVVM中的model层,用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
关于MVVM,可阅读此文章:
http://www.cnblogs.com/SanMao...
按照vue官网的归类,可将以下属性归类到数据类属性当中:
data
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。(是通过getter和setter来修改和获取数据的)。
注意:angular中双向数据绑定的实现原理是对DOM或xhr事件做了定制,在里面触发digest(脏检查)流程,去检查所有的watcher,从而更新数据。VUE则是使用ES5提供的Object.defineProperty() 方法,监控对数据的操作,从而可以自动触发数据同步,更加的精准,省事。
props
props 可以是数组或对象,用于接收来自父组件的数据。也就是之前说过的父传子的prop方法。
propsData
此属性只用于 new 创建的实例中。在创建实例时传递 props。主要作用是方便测试。
/*通过VUE实例创建一个子类Comp,这个子类有一个props属性*/ var Comp = Vue.extend({ props: ["msg"], template: "{{ msg }}" }) /*new一个Cmop对象的时候,我希望把props传过去(模仿父级的操作),但是又没有父级,就可以以下面的方式实现*/ var vm = new Comp({ propsData: { msg: "hello" } })
computed
计算属性,此属性是一个对象,用于定义对data中的数据进行操作的方法。分为读取和设置,也就对应了data的getter和setter。这个对象的方法中的this都是指向vue实例的data属性。
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取,值只须为函数 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { // get方法返回处理后的数据,不会改变原本的data return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // -> 2 vm.aPlus = 3 vm.a // -> 2 vm.aDouble // -> 4
methods
methods和computed都是用来提供操作数据的方法的属性,两者的区别在于computed中有在相关的数据发生改变时才会再次触发computed,而在模版重新渲染时,而相关数据没有变化时并不会触发。methods在重新渲染时就会触发,在应用场景中提现:
比如当需要求和时,使用计算属性更加贴切,在angular中,通常都是直接在html中以{{a+b+c}}的形式来展示和,vue的计算属性可以说就是为了让模版中不该出现逻辑而提供的属性。
methods主要是事件触发方法,表单提交,页面控制等场景时使用。
watch
watch属性用于监听数据的变化,当数据发生变化时,需要做什么操作。和computed(计算属性)很相似,都是当相关的数据发生变化时执行。当你想要在数据变化响应时,执行异步操作或开销较大的操作,应该使用watch。使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。
2.DOM
除了在*.vue文件的中声明之外,还可以通过el"、template、render来增加模版
el
只能在创建一个VUE实例的时候使用
new Vue({ el: "#some-element", // 选项 })
template
在注册组件的时候使用,其效果和*.vue文件中的template效果是一样样的。
Vue.component("my-component", { template: "A custom component!" })
render
render是一个方法,让你发挥最大的编程能力去编写一个html模版,类似于react的jsx语法,减少html中冗长的代码。
Vue.component("anchored-heading", { render: function (createElement) { return createElement( "h" + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } })
3.生命周期钩子
咱们说,组件有他的生命周期,从创建到销毁,那么我们有没有办法监听到组件的生命周期呢?答案是有的,就是生命周期钩子。为组件增加对应的生命周期钩子,就可以对组件的创建销毁做到可控制了。
beforeCreate: 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
create: 实例已经创建完成之后被调用,在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount: 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
activated: keep-alive 组件激活时调用。
deactivaed: keep-alive 组件停用时调用。
beforeDestory: 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed: Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
其中,只有beforeCreate和Create在服务器端渲染期间可以使用,而其他钩子均不能使用。
用法如下:
export default { name: "test", methods: { goPage: function () { this.$router.push("/") } }, components: { // 同样要注入Bus Bus }, data () { return { whiteSay: "nihao" } }, created: function() { // 在组件被创建时候将会执行此函数 相当于进入页面的自执行 var _self = this; // 将当前作用域保存在变量中,和$on()的作用域区分开来 Bus.$on("whiteSay", function(data) { // 使用$on方法监听white属性并执行一个回调函数 _self.whiteSay = data console.log(_self.whiteSay) }); } }
4.资源
在angular中,有指令、过滤器等好用的方法,VUE中同样也存在,并把他们归类到了资源当中。
directive: 除了v-bind,v-model等vue自带的指令之外,也允许注册自定义的指令。用法如下:
注册全局的指令:
// 注册一个全局自定义指令 v-focus Vue.directive("focus", { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })
注册局部的指令:
export default { data: () { return { whiteSay: "nihao" } }, directives: { focus: { // 指令的定义--- } } }
然后在html中使用:
关于自定义指令的详细内容请参考:https://cn.vuejs.org/v2/guide...
filter:vue2.0舍弃的自带的过滤器,提供了fitler属性来自定义过滤器。具体代码如下:
new Vue({ filters: { capitalize: function (value) { if (!value) return "" value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
components: 当组件中需要用到其他的组件时,需要使用components属性去创建一个哈希表。
具体用法如下:
收尾
除了上面这些属性,还有一些杂项,详情请看官网:
http://cn.vuejs.org/v2/api/#p...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81749.html
摘要:在离开过渡被触发时生效,在完成之后移除。可以链式的多次使用和用法相同,但是的元素会始终渲染并保存在中,只是改变值。用法如下对应前面的数据 在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。 ——王小波上一章研究了vue中组件的通信,算是对vue的组件通信有了大致的了解。综合上三章对搭建项...
摘要:我在中写了这段代码在组件被创建时候将会执行此函数相当于进入页面的自执行使用方法监听属性并执行一个回调函数按道理在元素被创建的时候,会将监听到的值赋给并且打印。 天地不仁以万物为刍狗,宇宙无义视众生如蝼蚁 ——萧鼎和我 上一节列出了5个关键点,第一个路由已经解决了,接下来解决第二个问题: 组件的通信问题 一、组件的关系 组件之间的关系无非就是两种父子关系...
摘要:先看看兼容性创建连接构造函数接收两个参数这里的不能是或者而是对应的或者和是定义的两种方案,类似于类似于协议名称,是可选的。服务端和客户端的协议名称必须一致。协议有三种注册协议,开放协议,自定义协议。限制以内就是在构造函数中选传的参数。 愿天下所有的情侣,都是失散多年的兄妹 ——好妹妹webScoket是html5提出的一个协议,咱们用的http是无状态...
摘要:为安装文件,无需再配置环境变量。连接操作有以下包作者并未查到除此之外的包,但不代表没有。等于是每个默认配置的主键属性,属性名为可自己定义一个来覆盖此属性。需要注意的是,在新版本的文档中,为。通过创建限于篇幅,本小节暂时写到这里。 我的琴声呜咽,我的泪水全无。我把远方的远归还草原。 - 海子《九月》 mongodb安装 什么是Mongodb?就是一个基...
摘要:主要表现在复杂的语句事务支持等。仅支持,在等浏览器中,会出现样式布局混乱的情况。将群群对应的聊天记录保存在数据库。用户进入群聊,则将其加入到对应的中。文件大小不能超过通过模块操作登录注册将用户名作为唯一值。登录支持自动登录,将密码保存在中。 showImg(https://segmentfault.com/img/bV4jYr?w=402&h=710);showImg(https://...
阅读 1597·2021-11-02 14:42
阅读 492·2021-10-18 13:24
阅读 890·2021-10-12 10:12
阅读 1780·2021-09-02 15:41
阅读 3160·2019-08-30 15:56
阅读 2861·2019-08-29 16:09
阅读 2012·2019-08-29 11:13
阅读 3587·2019-08-28 18:06