目前前端流行的三大框架React，Angular，Vue，那我们应该学习哪一个呢。通过对三个框架的了解，Vue相对来说入门比较简单，容易学习，但是要想达到精通还是需要一定时间和精力去学习和探索，还要通过实战项目不断积累开发经验。

首先我们要了解Vue，这个框架能做什么，能为我们开发提供哪些便利，开发的环境需要哪些等等？

Vue官网：https://cn.vuejs.org/v2/guide/

Vue开发的两种模式

1.直接

模板语法

使用双大括号（{{ xxx }}）对文本内容进行数据绑定。

{{message}}

指令

v-bind：用于HTML标签的属性上面，也可以使用表达式。

v-html：用于插入原始的 html。

v-on：用于监听DOM事件。

v-if，v-else，v-else-if：用于根据条件值渲染一块内容。

{{message}}

{{message}} demo

v-show：用于根据条件显示或隐藏元素，元素始终保留在DOM中，是通过css属性 display 实现。

{{message}} hidden

v-for：通过一个数组来渲染一个列表。

// html 数据绑定

// vue 实例 data 定义 data: { list: [ { id: 1, name: 'name 1' }, { id: 2, name: 'name 2' } ] }

v-model：在表单元素input，textarea，select元素上实现双向数据绑定。

计算属性

计算属性是用于简单计算的，减少模板中的逻辑，是基于响应式依赖进行缓存，相关响应式依赖发生改变就会重新计算。

// html 绑定 {{ count }} // vue 实例 var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!', title: 'demo', rawHtml: "超链接", num: 0 }, // 计算属性 computed: { count() { return this.num + 1; } }, // 方法 methods: { fun() { this.num++; } } })

监听器

当数据变化时执行异步或者开销较大，使用 watch 监听属性来响应数据变化。如果监听对象内部数据变化，需添加属性 deep: true 。

// html 数据绑定

// vue 实例 var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!', fullName: "", lastName: "" }, watch: { lastName: function(newVal, oldVal) { this.fullName = "Li " + newVal; } } })

样式绑定

操作元素的 class 和内联样式使用 v-bind 处理，通过表达式计算出字符串结果就可以实现绑定。

使用：v-bind:class，v-bind:style

// 使用对象赋值 v-bind:class

// 使用数组 // 使用对象赋值 v-bind:style // 使用数组 // vue 实例的数据对象 data: { isActive: true, activeCls: 'active', errorCls: 'error', activeColor: 'red', styles: {color: 'red'} }

生命周期

在创建Vue 实例时都要经过一系列的初始化过程，例如：需要编译模板、设置数据监听、将实例挂载到 DOM 并在数据变化时更新 DOM 等。在这个过程会执行一些生命周期钩子的函数。

beforeCreate：实例初始化之后，在数据和事件配置之前调用。

created：实例创建完成之后被调用，数据，方法，属性和事件已配置完成。

beforeMount：在挂载开始之前被调用，还未生成HTML到页面中。

mounted：挂载完成之后调用，模板中的html渲染到了HTML页面中。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

updated：数据更改导致的虚拟 DOM 重新渲染和打补丁。

beforeDestroy：实例销毁之前调用，此时实例还可以使用。

destroyed：实例销毁后调用。

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。