带你学习Vue-总结篇

网友投稿 598 2022-05-30

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

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

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

带你学习Vue-总结篇

Vue开发的两种模式

1.直接

模板语法

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

{{message}}

指令

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

demo
demo_test

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 数据绑定

  • {{ item.name }}
// 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 数据绑定

{{fullName}}

// 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小时内删除侵权内容。

上一篇:Python 进阶_OOP 面向对象编程_类属性和方法
下一篇:Eclipse常用快捷键
相关文章