带你学习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）