11.Vue小小结

1. Vue实例:每个 Vue 应用程序都是通过 Vue 函数创建出一个新的 Vue 实例开始的
image.png

在创建一个 Vue 实例时,你会传入一个选项对象(options object)

选项对象:一般地,当模板内容较简单时,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。

2. Vuejs中关于computed、methods、watch的区别
  • computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例;

  • methods:methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例;

  • watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

通俗来讲:

1.computed是在HTML DOM加载后马上执行的,

2.如赋值;而methods则必须要有一定的触发条件才能执行,如点击事件;

3.watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。

所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。

computed可以添加很多实例属性,这些属性可以通过实例直接获取到,是通过将作用函数作为属性的getter,通过访问属性就能调用getter来返回值 所以使用的是属性,而不是属性声明的函数;

image.png

所以在上面代码中模板中computedde调用的是属性所以不带括号,而methods定义的是方法所以在使用的时候要加 ( )computed 属性会基于它所依赖的数据进行缓存

computed中属性定义的时候,若只定义一个函数则默认为getter函数, 若要定义setter可以使用{}声明多个属性方法

image.png

调用setter函数的方法是vm.newProperty = 'newValue' 直接参数赋值即可

3. 在 <template> 上使用 v-if 进行条件分组

由于 v-if 是一个指令,因此必须将其附加到一个单独的元素上。但是如果我们想要切换多个元素,可以将 <template> 元素,作为多个元素的无形容器(invisible wrapper),然后在这个容器上使用 v-if。最终渲染结果将不会包含 <template>元素。

image.png

v-else 元素必须紧跟在 v-ifv-else-if 元素之后 - 否则无法识别它。

image.png

v-else-if,顾名思义,就是 v-if 之后的“else-if 块”。可以多次链式地调用,和 v-else 类似,v-else-if 元素必须紧跟在 v-ifv-else-if 元素之后。

4. 使用 props 向子组件传递数据,使用 events 向父组件发送消息
5.与 components 和 props命名可以自动转换,但触发的事件名称必须与监听时的名称完全匹配,建议总是使用串联式命名(kebab-cased)来命名事件名称
6. 通过调用全局方法 Vue.use() 使用插件
7. vue1中,el属性可以是标签,id;然而2.0却只能用id,并且body内部的id (Vue2.0在业务里面对HTML,body标签做了限制)
8. el,template,render属性优先性:

当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通过将template模板编译生成渲染函数,然后再渲染DOM树,而当Vue选项对象中既没有render渲染函数,也没有template模板时,会通过el属性获取挂载元素的outerHTML来作为模板,并编译生成渲染函数。 换言之,在进行DOM树的渲染时,render渲染函数的优先级最高,template次之且需编译成渲染函数,而挂载点el属性对应的元素若存在,则在前两者均不存在时,其outerHTML才会用于编译与渲染

9.
image.png
10.vue文件中 在methods中的方法中通过this调用的方法,如this.addNum(this.choosedId)是action中的方法,action中的addNum中又通过commit调用了mutations的方法,mutations中的方法就会去改变store中的数据,从而导致组件重新渲染
image.png
image.png
image.png
image.png
11. Mulation相当于芝士网使用的reat,redux,redux-saga中的reducer
12. Action的commit(.vue文件中this.$store.commit('REMBER_TIME');) 就像saga中的 yield put(onRequestDataSuccess({json, orderList}));
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,048评论 0 29
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,210评论 0 25
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,015评论 4 129
  • 一、概念 先来了解营业费用:是指企业在销售产品和提供劳务等日常经营过程中发生的各项费用以及专设销售机构的各项经费。...
    伟大与平凡阅读 4,838评论 3 8
  • 小时侯最喜欢 背着母亲一针一线 缝的歪歪曲曲的布包 里面塞着昨晚未完成的作业 还有一颗温热的鸡蛋 和小朋友们蹦蹦跳...
    叫我梅芳就好阅读 244评论 2 0