VUE知识体系:

1、computed与methods的区别
在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用,必须加()。
两种方式在缓存上也大有不同,利用computed计算属性是将 reverseMessage与message绑定,只有当message发生变化时才会触发reverseMessage,而methods方式是每次进入页面都要执行该方法,但是在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式
2、指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。
(1) v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;
(2)v-show用于根据条件展示元素的选项。用法大致一样:<h1 v-show="ok">Hello!</h1>;不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。注意,v-show 不支持 <template> 元素,也不支持 v-else。
(2)v-if vs v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
(3)v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
(4)v-for 类似JS的遍历,用法为 v-for="item in items", items是数组,item为数组中的数组元素。
(5)v-bind 这个指令用于响应地更新 HTML 特性,比如绑定某个class元素或元素的style样式。可以用 v-bind 来动态地将 prop 绑定到父组件的数据
(6)v-on 用于监听指定元素的DOM事件,比如点击事件。
(7)v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。
(8)v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定
(9)v-html 指令,双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用v-html 指令
(8)vm (ViewModel 的缩写) 这个变量名表示 Vue 实例
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。只有当实例被创建时 data 中存在的属性才是响应式的。除了数据属性,还有实例属性与方法,它们都有前缀 $,以便与用户定义的属性区分开来。
(9)可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解:https://segmentfault.com/a/1190000011381906
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。

(12)指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
(13)参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 属性:<a v-bind:href="url">...</a>,在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:<a v-on:click="doSomething">...</a>在这里参数是监听的事件名。我们也会更详细地讨论事件处理。
(14)修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():<form v-on:submit.prevent="onSubmit">...</form>
(15)缩写
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

二、属性
(1)计算属性
(2)计算属性缓存 vs 方法
(3)计算属性 vs 侦听属性
(4)计算属性的 setter
(5)侦听器。虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
(6)使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。除了 watch 选项之外,您还可以使用命令式的 vm.$watch

三、样式
(1)class:变量、数组、对象
(2)style:变量、数组、对象

四、列表渲染
(1)一个数组对应的v-for
v-for 指令根据一组数组的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法。
v-for 块对父作用域属性的完全访问权限。
v-for 还支持一个可选的第二个参数为当前项的索引。
你也可以用 of 替代 in 作为分隔符:

(2)一个对象对应的 v-for。
用第一个参数为对象的属性值来迭代。
用第二个参数为对象的属性名来迭代。
用第三个参数为对象的索引来迭代。

Vue.js 定义组件模板的七种方式:https://laravel-china.org/articles/4382/seven-ways-to-define-a-component-template-by-vuejs

评论 ( 1 )
最新评论
lawrence 2018-03-26 16:19:27 1F

楼主react搞么?