Vue 框架介绍(不花时间理解原理与概念，也走不了多远）

姚希瑶

3899人浏览 · 2018-07-23 20:35:43

姚希瑶 · 2018-07-23 20:35:43 发布

Vue 框架诞生于2014年，其作者为中国人--尤雨溪。
Vue用于构建交互式的Web界面的库，是一个构建数据驱动的Web界面渐进式框架，该框架遵循CMD规范，并且提供的设计模式为MVVM模式。
（Model-View-View-Model）,和一个可组合的组合型组件系统，具有简单的、灵活的API接口。
该框架继承了React的虚拟DOM技术和Angular的双向数据绑定技术，是一款较新的功能性框架。
那什么是虚拟DOM和双向数据绑定呢？
1、虚拟DOM:虚构的DOM树，当我们用传统的原生API或者jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。
为了解决浏览器性能问题，虚拟DOM就被设计出来了，其核心算法是DIFF算法。它会将一次操作过程中对真实DOM所有更新的diff内容保存到本地的一个js对象中，等更新完成后，再将最终的js对象映射成真实的DOM，交由浏览器去绘制。，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，避免了大量的无谓的计算量。
用js对象模拟DOM节点的好处是：页面的更新可以先全部反应在js对象上，操作内存中的js对象的速度要快很多。

2、双向数据绑定：
单向数据绑定：把Model绑定到View上，当我们用Java代码更新Model时，View就会自动更新了。
那么双向数据绑定就是，不仅具有上面的单向转换，而且用户更新了View，Model的数据也会自动被更新（Model<-->View）。

那View什么时候可以由用户更新呢？
举个例子，填写表单，当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那么就相当于我们把Model和View做了双向数据绑定。
其原理是我们要对input进行value 的属性绑定（v-bind：value=”...”）

将Model中的变量绑定到View上（Model->View）

以及当用户对input进行操作时，进行事件监听（v-on：input=”...”）

将View上的更新传回Model中（View->Model）

从而实现双向数据绑定，在Vue中，以上操作过于繁琐，便提供了v-model直接实现双向数据绑定的效果。

在进行Vue项目开发过程中，我们可以通过标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。

并且通过new Vue（）进行新建一个Vue的实例对象，其下有很多属性，包括el、data、methods、computed、watch等等，el为指向页面的节点元素，data存储数据，数据类型包括simple datatype（简单数据类型），以及complex datatype（复杂数据类型）。

用插值表达式{{}}显示，在插值显示的时候，不需要写上data，methods内存储方法，通过fn（）的形式调用方法，computed内存储也是方法，但是其为计算数据，复杂逻辑的应该存储在computed中。

计算属性是基于它们的依赖进行缓存的，由于computed带有一层缓存，所以只有在它的相关依赖发生改变时才会重新运行，而methods则是调用一次生成一次，computed中的方法调用时不需要加（）的。

watch为监听，监控，监听data中的属性值也可以监控对象，存在两个参数（currentValue当前值和prevValue之前值）。

在Vue中，html的任何属性都不能用{{}}（插值表达式）来进行设置

要用v-bind：来进行属性绑定，v-bind：可以简写为：

当我们需要对事件进行监听的时候需要用v-on：来进行事件绑定，v-on：可以简写为@，v-once单次渲染，v-html渲染html

在input、select、textarea中我们可以用v-model：进行双向数据绑定，可以用v-for进行数据循环，v-if/v-else-if/v-else进行数据判断

利用v-show显示与隐藏DOM节点，在Vue中还存在很多修饰符如取消事件冒泡（.stop），回车键（.enter），空格键（.space），取消默认事件（.prevent）等等，可以对DOM设置ref属性进行本地指向，类似于id

当我们对一个对象进行v-for循环时要对该对象设置key值，起到标识唯一性，便于检测以及提高性能的作用。

在Vue的实例对象下面还存在很多钩子函数，总体分为三大块（创建、更新、销毁）：

1、创建阶段，存在beforeCreate(){}、created(){}、beforeMount(){}、mounted(){}等钩子函数；

2、更新阶段，存在beforeUpdate(){}、updated(){}等钩子函数；

3、销毁阶段，存在beforeDestroy(){}、destroyed(){}等钩子函数；上述钩子函数不包括全部，一个生命周期内存在很多钩子函数，不能一一列举。

Vue.js框架：
Vue.js是一套构建用户界面的渐进式框架
Vue只关注图层，采用自底向上增量开发的设计
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

Vue第一个实例Hello World

<!DOCTYPE html>
<html>

<body>
<div>
<p>{{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^