四、vue.js 核心知识点

1、vue.js的两个核心是什么?

1、数据驱动,也叫双向数据绑定。

Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

2、组件系统。

.vue组件的核心选项:

1、模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

2、初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

3、接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。

4、方法(methods):对数据的改动操作一般都在组件的方法内进行。

5、生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

6、私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

等等。

2、对Vue 是一套构建用户界面的渐进式框架的理解

渐进式代表的含义是:没有多做职责之外的事。

vue.js只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。

像vuex、vue-router都属于围绕 vue.js开发的库。

比如说,你要使用Angular,必须接受以下东西:

必须使用它的模块机制

必须使用它的依赖注入-

必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。

比如说,你要使用React,你必须理解:

函数式编程的理念,

需要知道什么是副作用,

什么是纯函数,

如何隔离副作用

它的侵入性看似没有Angular那么强,主要因为它是软性侵入。

Vue与React、Angular的不同是,但它是渐进的:

你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;

也可以整个用它全家桶开发,当Angular用;

还可以用它的视图,搭配你自己设计的整个下层用。

你可以在底层数据逻辑的地方用OO和设计模式的那套理念,

也可以函数式,都可以,它只是个轻量视图而已,只做了最核心的东西。

3、vue几种常用的指令

v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

v-show:根据表达式之真假值,切换元素的 display CSS 属性。

v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。

v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。

v-on:用于监听指定元素的DOM事件,比如点击事件。绑定事件监听器。

v-model:实现表单输入和应用状态之间的双向绑定

v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

待续

你可能感兴趣的:(四、vue.js 核心知识点)