vue框架讲解
1、前端三大框架
- Vue
- React
- Angular
MVC和MVVM
MVC：
Model：服务器数据
V：View（视图、页面）
C: Controller逻辑层
# 一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View
MVVM的定义:
M：Model（服务器上的业务逻辑操作）
V：View（页面）
VM：ViewModel（Model与View之间核心枢纽，比如Vue.js）
SPA (Single Page Web Application)
- SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。
- 它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。
- 能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
- 服务器只用出数据就可以，不用管展示逻辑和页面合成，提高性能；
2、双向数据绑定
-
Vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty去劫持数据,并去更新数据 -
React是单向数据流，并没有双向数据绑定，需要手动去get和set到数据层和视图层 -
Angular通过脏数据检查的机制，有变动时，会去检查视图层和数据层，并更新对应的数据和视图
3、Vue简介
- 作者：尤雨溪
- Vue 被设计为可以自底向上逐层应是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，易于上手
- Vue专注于数据层,通过数据的双向绑定,最终表现在DOM层面, 减少了DOM操作。
- Vue使用了组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发。
- 虚拟DOM： dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
4、Vue项目的创建
1）CDN引入
// 开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// 生产环境版本，优化了体积和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2）脚手架工具搭建项目
// 1. cmd 命令安装脚手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
// 2. 指令创建项目,可以选择自己需要的模板进行创建
// 例如： vue create hello-world
vue create [项目名]
// 3.也可以使用UI视图界面创建项目
vue ui
5、Vue的生命周期
beforeCreate
组件创建阶段
created
在实例创建完成后被立即调用。组件创建完成的阶段，可以进行数据请求等初始化操作
beforeMount
在挂载开始之前被调用,还未渲染到dom结构上
mounted
实例被挂载后调用，只代表当前组件已挂载到dom结构上，mounted不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted内部使用 vm.$nextTick
beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用 计算属性 或 watcher 取而代之。
activated
被 keep-alive 缓存的组件激活时调用。
deactivated
被 keep-alive 缓存的组件停用时调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
一般来说会在此处清除本组件创建的 定时器 或者关闭一些 socket长连接 等
6、Vue项目的使用
1) 声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
2) html的元素绑定
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
- 绑定的省略写法,可以直接使用
:来代替v-bind<div id="app-2"> <span :title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>
3) JavaScript 表达式
<div>{{ ok ? 'YES' : 'NO' }}</div>
<div>{{ message.split('').reverse().join('') }}</div>
<!-- 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效. -->
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
4) 指令操作
你看到的
v-bindattribute 被称为指令。指令带有前缀v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。-
v-for循环指令, 可以绑定数组的数据来渲染一个项目列表：<!-- 将li标签按照todos数组进行循环，key值标记了li标签的唯一性，数据变动时会按照key去找对应的标签变更数据 --> <div id="app3"> <ul> <li v-for="(item, index) in todos" :key="index"> {{ item.text }} </li> </ol> </div>var app4 = new Vue({ el: '#app3', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) -
v-if判断指令,来移除或者插入dom. 此外可以在 Vue 插入/更新/移除元素时自动应用过渡效果<div id="app4"> <p v-if="seen === 1">现在你看到1了</p> <p v-else-if="seen === 2">现在你看到2了</p> <p v-else="seen">现在你看到其它了</p> </div>var app3 = new Vue({ el: '#app4', data: { seen: 1 } }) -
v-show和v-if效果一样，都是用来控制界面元素的显示和隐藏的,区别在于v-if是直接移除和插入dom元素，移除后dom内不存在该dom元素。而v-show是显示和隐藏dom，隐藏后dom元素还是一直存在的<h1 v-show="ok">Hello!</h1>new Vue({ data: { ok: true } }) -
可以用
v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。<div id="example"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <!-- v-on可以进行简写为 @ --> <div id="example"> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button> </div>new Vue({ el: '#example', methods: { say: function (message) { alert(message) } } }) -
v-model双向数据绑定指令- 可以用
v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
<div id="example"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div>new Vue({ el: '#example', data: { message: '' } }) - 可以用
5) methods方法
// 里面回放置所有的事件方法，用来处理业务逻辑
new Vue({
el: '#example',
methods: {
say1() {
console.log('我是方法')
// 可在方法里面通过this. 来调用另外一个方法
this.say2()
},
say2() {
console.log('我是方法')
}
}
})
6) 计算属性
<!-- 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：-->
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
<!-- 所以，对于任何复杂逻辑，你都应当使用计算属性。 -->
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
-
不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
计算属性会缓存结果，当计算属性再次被调用时，如果数据没有发生改变，那么回去直接去缓存内拿去值，不需要再次进行计算。而方法的执行时从上到下依次执行的，每次调用都会从上而下执行一遍。
7) filters 过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
<!-- 在双花括号中 -->
{{ message | capitalize }}
// 你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
// 或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
7、ES6 常用语法简介
1) 声明方式
- ES5 var来声明变量
- ES6 声明方式
- const 声明常量的关键字
- let 声明变量的关键字
2) 函数
// ES5 函数
var demo = function() {
// TODO
}
// ES6 箭头函数
const demo = () => {
// TODO
}
3) 字符串拼接
var str1 = '我是'
// ES5 拼接
var str3 = str1 + 'demo'
// ES6 模板字符串
const str4 = `${str1}demo`
4) 对象的使用
var value = '我是value'
// ES5写法
var obj1 = {
value: value
}
// ES6写法
const obj2 = {
value
}
5) 数组扩展运算符
var arr = [1,2,3,4,5]
// ES5写法
arr.toString()
// ES6写法
...arr
Q1: SPA是什么意思？
Q2: v-if 和 v-show有什么区别？
Q3: v-bind和v-on可以简写成什么形式？
Q4: 计算属性和方法有什么区别？
Q5: 使用过滤器的符号是什么？
