带你学习Vue-总结篇
目前前端流行的三大框架React,Angular,Vue,那我们应该学习哪一个呢。通过对三个框架的了解,Vue相对来说入门比较简单,容易学习,但是要想达到精通还是需要一定时间和精力去学习和探索,还要通过实战项目不断积累开发经验。
首先我们要了解Vue,这个框架能做什么,能为我们开发提供哪些便利,开发的环境需要哪些等等?
Vue官网:https://cn.vuejs.org/v2/guide/
Vue开发的两种模式
1.直接<script>引入
通过在页面引入CDN vue.js,也可以下载文件 vue.js
2.命令行工具(CLI)
通过安装 vue-cli,使用模板创建项目开发,参考 Vue-cli 文档指南。
vue init webpack my-demo
注:使用vue-cli环境构建开发,需要 node 的构建环境,比较复杂。建议新手学习直接通过页面引入方式学习。
Vue实例
创建 vue 实例,传入选项对象(data:数据对象,methods:方法,computed:计算属性,mounted:生命周期钩子,watch:监视器等)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">{{message}}</div>
</body>
</html>
<script>
// 创建 vue 实例
var vm = new Vue({
el: '#app',
data: {
showMsg: false,
message: 'Hello Vue!',
title: 'demo',
rawHtml: "<a href='https://cn.vuejs.org/v2/guide'>超链接</a>"
}
})
</script>
模板语法
使用双大括号({{ xxx }})对文本内容进行数据绑定。
<h1>{{message}}</h1>
指令
v-bind:用于HTML标签的属性上面,也可以使用表达式。
<div v-bind:title="title">demo</div>
<div v-bind:title="title + '_test'">demo_test</div>
v-html:用于插入原始的 html。
<div><span v-html="rawHtml"></span></div>
v-on:用于监听DOM事件。
<input type="button" v-on:click="fun();" value="提交">
v-if,v-else,v-else-if:用于根据条件值渲染一块内容。
<h1 v-if="showMsg">{{message}}</h1>
<h3 v-else>{{message}} demo</h3>
v-show:用于根据条件显示或隐藏元素,元素始终保留在DOM中,是通过css属性 display 实现。
<h6 v-show="showMsg">{{message}} hidden</h6>
v-for:通过一个数组来渲染一个列表。
// html 数据绑定
<div>
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
// vue 实例 data 定义
data: {
list: [
{ id: 1, name: 'name 1' },
{ id: 2, name: 'name 2' }
]
}
v-model:在表单元素input,textarea,select元素上实现双向数据绑定。
<input v-model="message" placeholder="please input text">
计算属性
计算属性是用于简单计算的,减少模板中的逻辑,是基于响应式依赖进行缓存,相关响应式依赖发生改变就会重新计算。
// html 绑定
<span> {{ count }}</span>
// vue 实例
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
title: 'demo',
rawHtml: "<a href='https://cn.vuejs.org/v2/guide'>超链接</a>",
num: 0
},
// 计算属性
computed: {
count() {
return this.num + 1;
}
},
// 方法
methods: {
fun() {
this.num++;
}
}
})
监听器
当数据变化时执行异步或者开销较大,使用 watch 监听属性来响应数据变化。如果监听对象内部数据变化,需添加属性 deep: true 。
// html 数据绑定
<div>
<input v-model="lastName" placeholder="please input lastName">
<p>{{fullName}}</p>
</div>
// 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
<div v-bind:class="{ active: isActive }"></div>
// 使用数组
<div v-bind:class="[activeCls, errorCls]"></div>
// 使用对象赋值 v-bind:style
<div v-bind:style="{ color: activeColor}"></div>
// 使用数组
<div v-bind:style="[styles]"></div>
// 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:实例销毁后调用。
- 点赞
- 收藏
- 关注作者
评论(0)