一、vue 基础介绍
是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层（MVVM），最大程度上解放了 DOM 操作，Vue主要实现的是VM层。
对MVVM的理解
Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来
数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据
1. vue起步
1.1 安装Vue
-
直接下载源码然后通过路径引入
开发版本：https://vuejs.org/js/vue.js
生产版本：https://vuejs.org/js/vue.min.js
CDN
- 使用 npm 下载（默认安装最新稳定版) 然后通过路径引入
npm init -y
npm i vue
Vue.js 不支持 IE8 及其以下版本
1.2 HelloWorld
作用:将数据应用在html页面中
1. body中,设置Vue管理的视图
2. 引入vue.js
3. 实例化Vue对象new Vue({选项:值});
4. 设置Vue实例的选项:如el、data...
5. 在中通过{{ }}使用data中的数据
{{msg}}
1.3 Vue实例的选项
el
作用:当前Vue实例所管理的html视图
值:通常是id选择器(或者是一个 HTMLElement 实例)
data
- Vue 实例的数据对象，是响应式数据(数据驱动视图)
methods
其值为可以一个对象
可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的
this自动绑定为 Vue 实例。
代码演示
{{msgA}} -- {{fn1()}}
除了以上常用的三个Vue实例选项, 还有很多选项,比如生命周期钩子函数，计算属性等。
2. vue 常见术语解释
插值表达式
作用:会将绑定的数据实时的显示出来:
通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
{{js表达式、三目运算符、方法调用等}}
不能写 var a = 10; 分支语句 循环语句
{{message}}
{{message}}
{{message+'啦啦啦'}}
{{age>18?'成年':'未成年'}}
{{message.split("")}}
{{var a = 10}}
插值表达式中不能写js语句, 如var a = 10;
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
{{message}}
现在你看到我了
3.Vue常用指令
扩展了html标签的功能、大部分的指令的值是js的表达式
取代DOM操作
3.1v-text和v-html
很像innerText和innerHTML
v-text:更新整个标签中的内容(只显示文本)
v-html:更新标签中的内容/标签（可显示渲染后的html代码）
{{str}}
我是p标签中的内容
我是p标签中的内容
3.2 v-if和v-show
作用:根据表达式的bool值进行判断是否渲染该元素。
v-if
用于条件性地渲染一块内容。
Renya is awesome!
Oh no
v-else-if
A
B
Not A/B/
v-show
v-show 只是简单地切换元素的 CSS property display。
Hello!
3.3 v-on
作用:使用
v-on指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。语法: v-on:事件名.修饰符 = "methods中的方法名"
-
修饰符
.once- 只触发一次回调。.prevent- 调用event.preventDefault()。.enter - 只有在
key是Enter时调用
简写: @事件名.修饰符 = 'methods中的方法名'
上面的按钮被点击了 {{ count }} 次。
3.4 v-for
用 v-for 把一个数组对应为一组元素
v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染.
建议尽可能在使用 v-for 时提供 key attribute.
根据一组数组或对象的选项列表进行渲染。
v-for指令需要使用item in items形式的特殊语法
(v,k,i)in 对象
v:值
k:键
i:对象中每对key-value的索引 从0开始
注意: v,k,i是参数名,见名知意即可!
-
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
v-for 还支持一个可选的第二个参数，即当前项的索引。
- {{ index }} - {{ item.message }}
还可以用第三个参数作为索引：
{{ index }}. {{ name }}: {{ value }}
new Vue({ el: '#v-for-object', data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10' } } })
3.5 v-bind
作用: 可以绑定标签上的任何属性。
可以简化为 :，简化语法更常用 。
如：
3.5.1 绑定 HTML Class
对象语法和数组语法。
对象语法
如果isActive为true，则返回的结果为
.active {
color: red;
}
hei
数组语法
渲染的结果
hei
3.5.2 绑定内联样式style
对象语法和数组语法。
对象语法
渲染的结果
文本内容
数组语法
abc
3.6 v-model
作用: 表单元素的绑定
特点: 双向数据绑定
-
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在data选项中声明初始值。 - 本质是v-bind和v-on的语法糖
// 等同于
绑定文本框
效果:当文本框的值发生变化后，div中的内容也会发生变化
{{message}}
绑定多行文本框
{{ message }}
注意：多行文本框中使用插值表达式 无效
绑定复选框
-
绑定一个复选框
checked是布尔类型的数据
{{ checked }}
-
绑定多个复选框
此种方式需要input标签提供value属性
v-model绑定的是数组
Checked names: {{ checkedNames }}
-
绑定单选框
需要input提供value属性的值
{{sex}} -
绑定下拉框
您选择的是: {{selected}}
4. 计算属性和侦听器
计算属性computed
- 计算属性:是Vue实例的一个选项 computed:{}
- 作用:在计算属性中去处理data里的数据
- 使用场景:任何复杂逻辑，都应当使用计算属性
- 本质: 计算属性的其实就是一个属性,用法和data中的属性一样,但计算属性的值是一个带有返回值的方法
- 当data中的属性一发生变化, 会自动调用计算属性的方法。
+
=
侦听属性watch
- 观察和响应 Vue 实例上的数据变动
- 需要在data中先定义好要监听的属性
+
=
computed 和 watch 的区别以及应用场景
computed 依赖其他的值,且具有缓存,缓存变化才会更新
- 只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 进行数值计算，并且依赖于其它数据。
watch 没有缓存，监听某一个值，变化时进行一些操作
- 数据变化时执行异步或开销较大的操作时用。
5.组件基础
什么是组件？
组件系统是 Vue 的另一个重要概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。
几乎任意类型的应用界面都可以抽象为一个组件树：例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
- 组件是可复用的 Vue 实例，且带有一个名字
- 组件的选项:
- 组件与
new Vue接收相同的选项:例如data、computed、watch、methods以及生命周期钩子等。 - 仅有的例外是像
el这样根实例特有的选项
- 组件与
- 另外, 组件也有自己的选项 template，components等
- 组件的特点：
- 每用一次组件，就会有一个它的新实例被创建
- 组件中的data要求必须是一个函数,且需要返回一个对象
- template 每个组件模板有且只有一个根元素
- 组件是一种封装，复用已有的html、css、js
组件的使用
- 注册组件
- 通过组件名字使用组件
全局注册一个组件：
// 1.定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {//data为函数
return {
count: 0
}
},
//可以使用模板字符串``
template: ``
})
在一个通过 new Vue 创建的 Vue 根实例中使用，作为根实例的子组件：
组件通信
- 父->子(在子组件中使用父组件数据) props : 不可修改 单向数据传递
- 子->父(在父组件中使用子组件数据) 自定义事件!
父->子(在子组件中使用父组件数据)
目的: 要在子组件中使用父组件中data中的属性值
关键点:通过Props给子组件传值
步骤:
- 在子组件中通过props声明自定义属性，如'slap'
- 注册局部组件(全局注册可忽略)
- 使用子组件时,设置props选项, 通过自定义属性获取父组件的值
子->父(在父组件中使用子组件数据)
子组件通过$emit方法把自己的第一个参数eventName传递给父级，父级把eventName当成一个事件，触发这个事件接收子级传给自己的数据或执行操作。
下面会显示一条来自子组件的值:
{{msgFromChild}}
6.生命周期
初始化 (create)--- 组件挂载(mount)-----组件更新 (update)--- 销毁(destroy)
| 生命周期 | 发生了什么 |
|---|---|
| beforeCreate | 初始化界面前 : 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问 |
| created | 初始化界面后 : 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数,也就是不会更新视图，SSR可以放这里。 |
| beforeMount | 挂载前 ：完成模板编译，虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated |
| mounted | 挂在完成 ： 将编译好的模板挂载到页面 (虚拟DOM挂载) ，可以在这进行异步请求以及DOM节点的访问，在vue用$ref操作 |
| beforeUpdate | 更新数据前 ： 组件数据更新之前调用，数据都是新的,页面上数据都是旧的 组件即将更新,准备渲染页面 , 可以在当前阶段进行更改数据，不会造成重渲染 |
| updated | 组件更新后 ： render重新渲染 , 此时数据和界面都是新的 ,要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新 |
| beforeDestroy | 组件卸载前 : 实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器 |
| destroyed | 组件卸载后 ： 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。 |
| activited | keep-alive 专属 , 组件被激活时调用 |
| deactivated | keep-alive 专属 , 组件被销毁时调用 |
二、vue cli 脚手架工具
https://cli.vuejs.org/zh/guide/
简介
可以快速创建vue项目结构,而不需要我们一点点的去创建/管理项目所需要的各种文件夹/文件，就像后端使用maven创建项目。
目的： 1.快速管理依赖； 2.可通过vue cli 确定项目结构
使用步骤
安装 Node.js 8.9 或更高版本 (推荐 8.11.0+) https://nodejs.org/en/
-
使用node 安装vue-cli
# 安装 Vue CLI 脚手架 # 如果已经安装过则不需要 # 这里安装的是最新版本 3版本 npm install -g @vue/cli # 执行vue --verson查看是否安装成功， # 显示vue的版本，就是安装成功了 vue -V -
创建项目
- 使用命令行
# 使用脚手架工具初始化项目 vue create hello-world # 自动或手动选择一些配置 # 进入你初始化好的项目 cd 项目路径 # 启动项目 npm run serve- 使用图形化界面，根据向导配置。
vue ui
一般会用到Babel、router、Linter（最好不装，不然总是报错）、配置文件，有的会用到vuex。
使用图形化界面就直接搜插件，安装即可。
使用命令行：
#安装babel 插件
vue add babel
# 安装路由插件
vue add router
#安装elementUI，选择按需导入
vue add element
# 安装axios依赖
vue add axios
此时目录结构为：
├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─README.md
├─src
| ├─App.vue
| ├─main.js
| ├─views
| | ├─About.vue
| | └Home.vue
| ├─router
| | └index.js
| ├─plugins
| | ├─axios.js
| | └element.js
| ├─components
| | └HelloWorld.vue
| ├─assets
| | └logo.png
├─public
| ├─favicon.ico
| └index.html
Element UI的使用
上面已经使用vue add element安装过了，在element.js中可按需导入要使用的组件：
- import 组件名 from 'element-ui'
- Vue.use(组件名)
import {
Button,
Tag
} from 'element-ui'
Vue.use(Button)
Vue.use(Tag)
如果是全局引入：
import ElementUI from 'element-ui';
Vue.use(ElementUI);
3.在后缀名为.vue的文件中使用
el-button
标签一
三、Vue学习视频推荐
vue2.5入门
学 Vue.js 看这个就够了
前端基础必会教程-4个小时带你快速入门vue