第六章前端开发——Vue框架
第六章前端开发学习——Vue框架
⼀、Vue介绍
⼆、Vue实例
三、Vue视图
四、Vue组件
五、Vue过度动画
⼀、Vue介绍
1.前端框架介绍
A）前端框架有
React      Facebook
Angular  Google
Vue        全世界
B）Angular、Vue、React的区别
Vue与React
React与Vue 都采⽤虚拟DOM
核⼼功能都在核⼼库中，其他类似路由这样的功能则由其他库进⾏处理
React的⽣态系统更庞⼤，由ReactNative来进⾏混合App开发; Vue更轻量
React由独特的JSX语法; Vue是基于传统的Web计数进⾏扩展(HTML、CSS、JavaScript)，更容易学习
Vue与Angular
Angular1和Angular2以后的版本是完全不同的两个框架；⼀般Angular1被称作Angular.js, Angular之后的版本被称作 Angular Vue与Angular的语法⾮常相似
Vue没有像Angular⼀样深⼊开发，只保证了基本功能。 Angular过于笨重
Vue的运⾏速度⽐Angular快得多
Angular的脏检查机制带来诸多性能问题
2.什么是Vue（what）：
Vue 是⼀套⽤于构建⽤户界⾯的渐进式框架
使⽤Vue框架，可以完全在浏览器端渲染页⾯，服务端只提供数据
使⽤Vue框架可以⾮常⽅便的构建单页⾯应⽤ (SPA)
Vue与JQuery的区别：
jQuery 仍然是操作DOM的思想，主要jQuery ⽤来写页⾯特效
Vue是前端框架(MVVM) ，对项⽬进⾏分层。处理数据
Vue优点：
jquery是什么功能组件
不存在依赖
轻便（25k min）
适⽤范围⼴(⼤中⼩型项⽬、PC、移动端、混合开发)
本⼟框架，社区⾮常活跃
语法简单、学习成本低
双向数据绑定（所见即所得）
MVVM
M 模型层 Model
V 视图层 View
VM (控制层) VIEW-MODEL
3.多页⾯应⽤与单页⾯应⽤
A）多页⾯应⽤（MultiPage Application，MPA）
多页⾯跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常⽤于 app 或客户端等
B）单页⾯应⽤（SinglePage Web Application，SPA）
只有⼀张Web页⾯的应⽤，是⼀种从Web服务器加载的富客户端，单页⾯跳转仅刷新局部资源，公共资源(js、css等)仅需加载⼀次，常⽤于PC端官⽹、购物等⽹站
两者对⽐：
4.Vue⼊门
A）安装
⽅式⼀：直接<script>引⼊
开发环境版本包含完整的警告和调试模式
⽣成环境版本删除了警告、进⾏了压缩
⽅式⼆：CDN
cdn.jsdelivr/npm/vue@2.5.16/dist/vue.min.js
cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js
# 以⼿动指定版本号
⽅式三：NPM
在⽤ Vue 构建⼤型应⽤时推荐使⽤ NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使⽤。同时 Vue 也提供配套⼯具来开发单⽂件组件。
npm install vue
⽅式四：构建⼯具 (CLI)
npm install -g @vue/cli
vue create my-project
⼆、Vue实例
1.创建实例
A）创建实例
var app = new Vue({
el: '#app',
})
每个 Vue 应⽤都是通过⽤ Vue 函数创建⼀个新的 Vue 实例开始的
⼀个 Vue 应⽤由⼀个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复⽤的组件树组成。
B）挂载元素
2.数据与⽅法
A）添加数据data
Vue({
data: {
}
})
当⼀个 Vue 实例被创建时，它向 Vue 的响应式系统中加⼊了其 data 对象中能到的所有的属性。当这些属性的值发⽣改变时，视图将会产⽣“响应”，即匹配更新为新的值。
只有当实例被创建时 data 中存在的属性才是响应式的
如果你知道你会在晚些时候需要⼀个属性，但是⼀开始它为空或不存在，那么你仅需要设置⼀些初始值
B）实例⽅法
Vue 实例还暴露了⼀些有⽤的实例属性与⽅法。它们都有前缀 $，以便与⽤户定义的属性区分开来
vm.$el
vm.$data
vm.$watch(dataAttr, fn)
3.计算属性和侦听器
A）添加⽅法methods
Vue({
methods: {
}
})
methods⽤来装载可以调⽤的函数，你可以直接通过 Vue 实例访问这些⽅法，或者在指令表达式中使⽤。⽅法中的 this ⾃动绑定为 Vue 实例。
B）添加计算属性computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
p {
border:1px solid #ccc;
padding: 20px;
width: 400px;
}
</style>
</head>
<body>
<div id="app">
<h1>Vue计算属性</h1>
<hr>
firstName: <input type="text" v-model='firstName'> <br>
lastName: <input type="text" v-model='lastName'> <br>
<p>
{{ fullName }}
</p>
</div>
<script src="../vue.js"></script>
<script>
//创建Vue实例
let vm = new Vue({
el:'#app',
data: {
firstName:'',
lastName:''
},
computed: {
fullName: function(){
return this.firstName + this.lastName
}
}
});
//console.log(vm.fullName)
//console.log(typeof vm.fullName)
</script>
</body>
</html>
计算属性应⽤
Vue({
computed: {
属性名: function(){
}
}
})
模板内的表达式⾮常便利，但是设计它们的初衷是⽤于简单运算的。在模板中放⼊太多的逻辑会让模板过重且难以维护，这时候应该使⽤计算属性
C）添加侦听属性watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
p {
border:1px solid #ccc;
padding: 20px;
width: 400px;
}
</style>
</head>
<body>
<div id="app">
<h1>Vue计算属性</h1>
<hr>
请输⼊全名： <input type="text" v-model='fullName'>
<p>
lastName： {{ lastName }}
</p>
<p>
firstName： {{ firstName }}
</p>
</div>
<script src="../vue.js"></script>
<script>
//创建Vue实例
let vm = new Vue({
el:'#app',
data: {
fullName:'',
firstName:'',
lastName:''
},
watch: {
fullName: function(){
this.firstName = this.fullName.split(' ')[0]
this.lastName = this.fullName.split(' ')[1]
}
}
})
</script>
</body>
</html>
侦听属性应⽤
Vue({
watch: {
属性: function(){
}
}
})
虽然计算属性在⼤多数情况下更合适，但有时也需要⼀个⾃定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了⼀个更通⽤的⽅法，来响应数据的变化。当需要在数据变化时执⾏异步或开销较⼤的操作时，这个⽅式是最有⽤的
D）⽅法，计算属性，侦听属性的区别
它们三者都是以函数为主体，但是它们之间却各有区别。
计算属性与⽅法：
我们可以将同⼀函数定义为⼀个⽅法⽽不是⼀个计算属性。两种⽅式的最终结果确实是完全相同的。
然⽽，不同的是计算属性是基于它们的依赖进⾏缓存的。计算属性只有在它的相关依赖发⽣改变时才会重新求值。这就意味着只要 message 还没有发⽣改变，多次访问 reversedMessage 计算属性会⽴即返回之前的计算结果，⽽不必再次执⾏函数。
相⽐之下，每当触发重新渲染时，调⽤⽅法将总会再次执⾏函数。
计算属性与侦听属性：
watch擅长处理的场景：⼀个数据影响多个数据
computed擅长处理的场景：多个数据影响⼀个数据
4.delimiters
作⽤：改变纯⽂本插⼊分隔符。
5.⽣命周期
A）⽣命周期钩⼦函数（红⾊重要常⽤）
(1)beforeCreate
在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调⽤。
(2)created：
数据创建成功 data methods computed watch
在这⾥从服务器获取数据
在实例创建完成后被⽴即调⽤。在这⼀步，实例已完成以下的配置：数据观测（data observer）、属性和⽅法的运算、watch/event 事件回调。然⽽，挂载阶段还没开始，$el 属性⽬前不可见。
(3)beforeMount
在挂载开始之前被调⽤，相关的 render 函数将⾸次被调⽤。
注意：该钩⼦在服务器端渲染期间不被调⽤。
(4)mounted：此时，Vue实例已经挂载到元素上。操作DOM请在这⾥。
el 被新创建的 vm.el替换，并挂载到实例上去之后调⽤该钩⼦。如果root实例挂载了⼀个⽂档内元素，当mounted被调⽤时vm.el 也在⽂档内。页⾯渲染完成后初始化的处理都可以放在这⾥。
注意：mounted 不会承诺所有的⼦组件也都⼀起被挂载。
(5)beforeUpdate
数据更新时调⽤，发⽣在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩⼦中进⼀步地更改状态，这不会触发附加的重渲染过程。
(6)updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调⽤该钩⼦。
当这个钩⼦被调⽤时，组件 DOM 已经更新，所以你现在可以执⾏依赖于 DOM 的操作。然⽽在⼤多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使⽤计算属性或 watcher 取⽽代之。
注意：updated 不会承诺所有的⼦组件也都⼀起被重绘。
(7)activated
keep-alive 组件激活时调⽤。
(8)deactivated
keep-alive 组件停⽤时调⽤。
(9)beforeDestroy
实例销毁之前调⽤。在这⼀步，实例仍然完全可⽤。
(10)destroyed
Vue 实例销毁后调⽤。调⽤后，Vue 实例指⽰的所有东西都会解绑定，所有的事件会被移除，所有的⼦实例也会被销毁。
B）⽣命周期图⽰
三、Vue视图
1.基本模板语法
A）⽂本
数据绑定最常见的形式就是使⽤“Mustache”语法 (双⼤括号) 的⽂本插值
v-text指令也可以⽤于数据绑定，如果要更新部分的 textContent ，需要使⽤插值。
通过使⽤v-once指令，你也能执⾏⼀次性地插值，当数据改变时，插值处的内容不会更新
B）原始HTML
双⼤括号会将数据解释为普通⽂本，⽽⾮ HTML 代码。为了输出真正的 HTML，你需要使⽤ v-html 指令
Tips：你的站点上动态渲染的任意 HTML 可能会⾮常危险，因为它很容易导致 XSS 攻击。请只对可信内容使⽤ HTML 插值，绝不要对⽤户提供的内容使⽤插值。
C）属性
Mustache语法不能作⽤在 HTML 特性上，遇到这种情况应该使⽤ v-bind 指令
在布尔属性的情况下，它们的存在即暗⽰为 true，如果值是 null、undefined 或 false，则属性不会被包含在渲染出来的
D）使⽤JavaScript表达式（不建议）
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
{{ var a = 1 }}    <!-- 这是语句，不是表达式 -->
{{ if (ok) { return message } }}    <!-- 流控制也不会⽣效，请使⽤三元表达式 -->
E）防⽌刷新或加载闪烁
v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以
2.指令
A）指令
指令 (Directives) 是带有 v- 前缀的特殊属性。
指令特性的值预期是单个 JavaScript 表达式
指令的职责是，当表达式的值改变时，将其产⽣的连带影响，响应式地作⽤于 DOM。
B）指令列表
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once
C）缩写
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
3.条件渲染与列表渲染
A）条件渲染
相关指令
v-if
v-else
v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue条件渲染</title>
<style>
.box {
border:1px solid #ccc;
padding: 10px;
width: 600px;
}
</style>
</head>
<body>
<div id="app">
<h1>条件渲染</h1>
<hr>
<button @click="isShow = !isShow">改变</button>
<!-- <div class="box" v-if="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quo saepe, eum nisi. Atque, pariatur ad sapiente alias, dignissimos tempora iusto ullam veritatis, obcaecati ipsa dicta sunt dolorem ducimus eos!        </div> -->
<template v-if="isShow">
<h2>锄⽲</h2>
<p>锄⽲⽇党务</p>
<p>锄⽲⽇党务</p>
<p>锄⽲⽇党务</p>
</template>
<div class="box" v-else>
HELLO 同志
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。