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}));
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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