Vue2框架
Vue2框架
Vue定义
Vue.js是一种构建用户界面的渐进式框架，提供了MVVM模型数据绑定和一个可组合的组件系统，具有简单灵活的API，采用自底向上逐层应用
Vue安装
/ 浏览器安装Vue Devtools 可以在界面审查金额调试Vue应用/
安装方法：新手推荐用script引用
1.直接用<script>引入---Vue注册为全局变量
开发版本--vue.js文件(包含完整的警告和调试模式)
生产版本--Vue.min.js(删除了警告)
2.NPM安装-构建大型应用推荐使用
npm install vue
3.命令行工具(CLI)--Vue脚手架
为单页面应用(SPA)快速搭建脚手架--具体查看Vue CLI文档
Vue插值
Mustache语法：{{ }}
页面插值：1.`v-text`
2.`{{}}`：绑定文本类型的值或单个表达式
3.`v-once`
4.`v-html`
5.`v-bind`
指令：
1.`v-text`：绑定元素内容
2.`v-once`：只渲染元素或组件一次
3.`v-html`：将数据作为html内容绑定
4.`v-bind`：绑定属性
绑定属性：`<div v-bind:id="myId"></div>` -- myId动态
绑定属性名：`<div bind:[key]="val"></div>` -- key和val动态，vue2.6.0+支持
5.`v-show`：通过css中的display属性显示或隐藏元素
6.`v-if v-else-if v-else`：通过销毁或重建显示或隐藏元素
7.`v-for`：遍历循环
8.`v-on`：绑定事件
9.`v-slot`：插槽
10.`v-cloak`：绑定到元素上只到对应的实例编译完成
11.`v-model`：表单内容绑定
12.`v-pre`：不需要编译
Vue生命周期--钩子函数
创建Vue对象 new Vue()--->
/执行beforeCreate事件钩子 /--->
开始监控Data对象数据变化 --->
Vue内部初始化事件init Events--->
/ 执行created事件钩子(可以执行ajax请求) /--->
判断有无el挂载选项 ---？
无--->当Vm.$mount(el)被调用执行下一步
有--->判断有无模块选项---？
无--->编译外部HTML作为模块
有--->执行模块渲染函数
--->
/ 开始执行beforeMount事件钩子/--->
将模块编译好的html内容替换el挂载指向的DOM对象或标签内容--->
/ 开始执行mounted事件钩子(此时挂载完成)/--->
进入Mounted监控数据变换实时更新DOM---<
--[当data数据改变]--->
/执行beforeUpdate事件钩子 /--->
--[虚拟DOM重新渲染页面]--->
/执行Updated事件钩子/ --->
>---->
当vm.$destriy()被调用--->
/开始执行beforeDestory事件钩子 /--->
销毁监控，子模块和事件监听--->
Destroyed--->
/ 开始执行destroyed事件钩子/
Vue条件与循环
#条件：
(1)v-if控制切换一个元素是否显示(根据v-for后面的表达式是否为true或false显示内容)
eg:
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
(2)v-else 是v-if的语句块，当v-if为false显示的内容，不需要表达式，但前面必须出现v-if或v-else-if
eg:
<div v-if="Math.random() > 0.5">Now you see me</div>
<div v-else> Now you don't </div>
(3)v-show是根据表达式之真假值，切换元素的 CSS中display属性
#注意 v-if和v-show的区别
v-show是通过元素的display属性控制内容显示与隐藏，而v-if是销毁或重建元素控制内容显示,而且v-show用于切换频繁时使用
#循环
v-for基于源数据多次渲染元素或模板块,渲染的参数可以是：Array | Object | number | string | Iterable
语法：v-for="(item,[index,key] in list"
参数：
eg: <div v-for="(item, index) in items"></div>
<div v-for="(item,index) in array"></div>---值，下标
<div v-for="(val, name, index) in object"></div>---值，名，索引
#注意 v-for 的默认行为会尝试原地修改元素而不是移动它们，要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示
eg:<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
Vue事件绑定
v-on指令---简写@
用法：在元素绑定事件：<div v-on:click="fun()"></div>
//<div @click="fun()"></div>
fun()应该在Vue实例的methods中进行定义
绑定动态事件：<div v-on:[event]="fun()"></div>
v-on修饰符:
.stop---阻止事件冒泡 eg: <a v-on:click.stop="doThis"></a>
.prevent---阻止事件默认行为 eg:<form v-on:submit.prevent="onSubmit"></form>
.capture---添加事件侦听器时使用 capture 模式
.self---只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once---只触发一次回调
.passive---(2.3.0) 以 { passive: true } 模式添加侦听器
.{keyCode | keyAlias} - ---只当事件是从特定键触发时才触发回调
Vue Class与Style绑定
`v-bind`绑定样式 简写为`:`
#绑定class
1.以对象的形式绑定class:<h1 v-bind:class="{active:isActive}">
active就是类名，isActive是一个布尔值，表示active是否生效
2.以数组的形式绑定class:<h1 :class="[a,b]">
a和b是data中的数据，也可以直接写类的名字
也可以在数组中使用三元运算符：<h1 :class="[isActive ? 'active' : '']">
#绑定style
1.以对象的形式绑定：<h1 :style="{color:'blue',fontSize:font+'px'}"> -- 属性名就是样式名，font是data中的变量
<h1 :style="styleObj"> -- styleObj是一个样式对象
2.以数组的形式绑定：<h1 :style="[styleObj,styleObj2]">-本质绑定多个样式对象
Vue表单绑定
v-model指令：只用于<input><select><textarea>标签和components模块
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
v-mode修饰符：
.lazy--->为在事件结束之后进行同步，不实时更新
eg:<input v-model.lazy="msg">
.number--->自动将用户的输入值转为数值类型
eg：<input v-model.number="age" type="number">
.trim--->自动过滤用户输入的首尾空白字符
Vue基础组件
组件注意规范：
# （1） 组件的data必须是一个函数，该函数返回一个对象----由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题
# （2）组件名：1.短横线分隔法：`my-component` 2.大驼峰命名法：`MyComponent` -- 在调用时，直接在DOM中无效，需要使用短横线分隔法调用,可以在template中使用
# （3）组件中的模板只能有一个根元素，需要用一个标签包含模块内容
全局组件
<div id="components-demo">
<button-counter></button-counter>
</div>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
局部组件
用于实例中创建
let component = {
template:"",
data:function(){
return {
msg:"Hello"
}
}...
}
父子组件
第一种：props+$emit()
第二种：回调函数
第三种：$parent+$children
第四种：provide+inject
第五种：$attrs+$listeners
第六种：ref+$refs
组件传值
`父传子--prop`
1.传静态值
<child-component msg="Hello"></child-component> -- 父
props:["msg"],
调用：同data中的值一样 -- 子
2.传动态值
<child-component v-bind:mg="msg"></child-component>
-- msg就是父组件中一个动态值
注意：1.如果要传递一个具体的数字值，那么要使用v-bind形式，否则会被当成字符串传递
2.如果要传递一个具体的值，并希望值的类型不被改变，那么就要使用v-bind形式，或者使用动态传值的形式
`子传父:子触发事件，父监听事件`
单向数据流：父子prop之间是单向下行绑定
1.子触发事件：vm.$emit("事件名"[,args...])
2.父监听事件：v-on:事件名="事件处理函数" -- args会作为回调函数的参数被父接收
`兄弟传值:父传子，子传父`
Vue过滤器filter
定义和调用
`定义`
//全局过滤器
Vue.filter("过滤器名",function(data[,args...]){
//code
return 格式化之后的文本;
})
//局部过滤器，vue实例的filters选项
filters:{
filterName(data){
//code
}
}
`调用`
//1.在{{}}使用
{{val | filterName}} -- 只有一个过滤器，并且没有第二个参数
{{val | filterName1 | filterName2}} -- 有多个过滤器
{{val | filterName(arg1,arg2...)}} -- 过滤器有参数
//2.在v-bind中使用
<div :attrName="val | filterName"></div>
Vue插槽slot
定义：将元素作为承载分发内容的出口
Vue计算属性computed
Vue混入
混入基础
混入(mixin)：混入可用包含任意组件选项，当混入对象被组件使用时，所有混入对象的选项都将被混合到改组件中的选项
eg:
//定义一个混入对象
var Mymixin ={
created:function(){
this.hello()
},
methods:{
hello(){
console.log(888)
}
}
}
//定义一个使用混入对象的组件
var component=vue.extend({
mixins:[Mymixin]
})
var component =new Component();//888
选项合并
`混入组件选项属性同名时,数据对象在内部会递归合并，当发生冲突时会以组件数据优先，同名的钩子函数将合并为一个数组，混入对象的钩子将在组件自身钩子之前被调用`
全局混入
混入可用在全局注册中，当会影响每一个之后被创建的Vue实例
Vue操作DOM
1.给DOM绑定vue变量，然后通过改变vue变量的值，来操作DOM
2.给DOM或组件绑定ref属性，然后在实例中可以通过vm.$refs获取到对应的属性，这个属性会指向DOM或者组件
3.可以通过JQ操作DOM：npm i jq -S
import $ from "jq"
4.直接写原生JS
Vue特殊属性
(1)key 主要用在Vue的虚拟DOM算法，key会重新排列元素顺序，有相同的父元素的子元素必须有独特的key，重复的key会造成渲染错误,经常与v-for结合使用
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
(2)ref 用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，用在普通的DOM对象，引用指向DOM元素，用在子组件上，引用就指向组件实例
<p ref="p">hello</p>---DOM
<child-component ref="child"></child-component>---子组件
Vue内置的组件
(1)component
(2)keep-alive
缓存组件的内容，组件内容比较简单可以用v-show实现，复杂的用keep-alive
(3)slot
Vue的hash和history模式
hash模式的改变方法
第一种：
window.onhashchange事件，事件对象中的location.hash获取到当前hash路径，在页面标志的url中有"#"号
第二种：
手动更改在网页url路径中加'#',浏览器中前进后退按钮
第三种:
location.href中连接地址加上'#'
history模式的改变方法
第一种：
history.pushState()事件切换url路径
Vue路由
Vue路由安装
第一种：#直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js(opens new window)
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
第二种：#NPM
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此 (手动安装)。
第三种：#Vue CLI
如果你有一个正在使用 Vue CLI (opens new window)的项目，你可以以项目插件的形式添加 Vue Router。CLI 可以生成上述代码及两个示例路由。它也会覆盖你的 App.vue，因此请确保在项目中运行以下命令之前备份这个文件：vue add router
Vue路由基本配置
配置：
<!--引入vue.js-->
<script src="vue.js"></script>
<!--引入Vue-router.js-->
<script src="vue-router.js></script>
DOM样式中
<!--使用router-link组件导航 to直接指定链接-->
<div id='app'>
<router-link to='/foo'>go to foo</router-link>
<router-link to='/foo'>go to foo</router-link>
<!--将路由匹配组件渲染-->
<router-view><router-view>
</div>
js中
<!--定义路由组件-->
let Foo={template:'<div>foo</div>'},
let Bar={templte:'<div>bar</div>'}
<!--创建router实例，配制routes属性-->
const router =new VueRouter({
routes:[
{path:'/foo',component:FOO},
{path:'/bar',component:bar},
.......
],//可缩写routes
mode: 'history',//路由模式，hash模式网址带有#
base: '/base/',// 该属性在path路径加个基础路径
linkActiveClass: '',// 给全局的router-link被激活时写样式用到的属性
linkExactActiveClass: '',
})
<!--创建和挂载根实例-->
const app=new Vue({
el:'#app',//或通过app.$mount('#app')挂载
router:router,//第二个为router实例名
})
基础路由
第一步：定义路由组件(可用import导入进来)
const foo={template:`<div>foo</div>`}
第二步：定义路由
const routes={
path:'/foo',//路由渲染的路径--to
component:foo,//这个foo为路由组件名
props:[],
children:[],
.....
}
第三步：创建路由实例，配置路由参数
const router=new VueRouter({
routes:routes,//第二个routes为路由名
})
第四步：创建和挂载根实例
const app=new Vue({
el:'#app'
router:router,//第二个为路由实例名
})
编程式导航
router.push()方法：会向history栈添加一个新记录，当浏览器点后退按钮时，会回到之前的URL
动态路由
动态路由传参
传参模式：
第一种:路径参数使用`:`
1.router对象的path中：
path:"user/:uid/:uname" -- 表示有两个路径参数，一个为uid，一个为uname
2.URL：user/1/yss -- uid=1&uname=yss
3.获取：路径参数默认保存在：this.$route.params中
4.页面中获取参数：{{$route.params.uid}}
注意：实例属性方法在实例中，通过this调用；在实例外，通过实例名调用；在模板中，则是直接调用
第二种：路由组件传参
将路径参数由$route获取变为props获取
1.router对象的配置中，添加props属性
{
path:"user/:uid",
component:User,
props:true
}
2.组件中，设置props属性
export default {
props:["uid"]
}
3.模板中获取参数：{{uid}}
导航守卫
全局守卫--路径拦截
局部守卫
beforeRouteEnter(to,from,next)
路由懒加载
好处：1.缩短路由渲染的时间，网页只需要加载对应的js文件
Vue文件的懒加载
eg:router/index.js
const routes=[
{...},{...},
{path:'/hhh',name:hhh,
component:()=>{
import('../views/Home.Vue')
}
}
]
Vue cli
目录结构
build目录:webpack相关配置目录
config目录:项目配置目录
--index.js --项目相关设置
--dev:开发环境相关设置
--build:生产环境相关设置
node_modules目录:项目依赖第三方包--源代码中一般不包含，通过npm install命令安装
src目录:源文件目录
--assets目录:静态资源目录--文件会被压缩
--components目录:组件目录
--router目录:路由目录
--index.js文件:导出路由对象--路由相关设置
--App.vue文件:根组件
>template 组件
>sctript js
>style css样式 --scoped 表示只在当前组件中生效
--main.js文件:根实例所在文件
static目录：项目使用的静态资源
--.babelrc:转码器配置文件
--.deitorconfig:编辑器配置文件
--.gitignore:git会忽略的文件
--.postcssrc.js:兼容所有浏览器的兼容写法
--index.html:入口文件
--package.json:项目设置
--package-lock.json:记录包的来源与版本
安装依赖
一:Sass文件
安装scss
npm install node-sass -D
npm install sass-loader -D
安装不成功，错误排除原因
-->1.使用国内镜像
2.更改电脑计算机用户的.npmrc文件添加如下内容
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirr
registry
如果编译不成功，排除是否是版本问题：
建议sass-loader安装7.3.1的版本
npm install sass-loader@7.3.1 -D
npm install node-sass@4.14.1 -D
二：ElementUI
安装：基于Vue2.0的桌面端端口
跨域请求与预检请求
/跨域/
1.服务器端允许跨域
node.js中设置header:
res.header("Access-Control-Allow-Origin", "*");
//添加content-type,解决跨域请求头content-type类型不符
res.header("Access-Control-Allow-Headers", "content-type,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
2.服务端不允许跨域，通过本地代理实现
在本地设置服务器，通过本地的服务器请求跨域资源，这样就将跨域的服务器资源变成了本地资源，然后请求本地资源
vue-cli：config/index.js
dev:{
proxyTable:{
"/api":{
target:"http://域名:端口号/",
changeOrigin:true,
pathRewrite:{
"^/api":""
}
}
}
}
/预检/
1.当请求不是简单请求时就是预检请求
2.表现形式：一个ajax请求会发送两次，但是一次是preflight，从后台来看请求类型是OPTIONS
3.简单请求：满足三个条件
1.请求类型只能是：GET,POST,HEAD
2.请求头的content-type只能是：text/plain,application/x-www-form-urlencoded(表单默认数据编码格式)，multipart/form-data(表单上传文件时需要的编码格式)
3.请求时没有自定义的Head
VueX
vuex概述
（一）定义：VueX是实现组件全局状态（数据）管理的机制，可以方便的实现组件之间数据共享
特点：1.能够在Vuex中集中管理共享数据，易于开发和维护
2.存储在Vuex的数据是响应式的，能够实时保持数据与页面的同步
3.能够高效实现组件之间的数 据共享
Vuex的基本使用
1.安装：1.使用<script>标签引入
2.npm install vuex -S
2.将需要共享的状态(state)保存到仓库(store)中
store.js：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state:{ //共享的状态（数据）
msg:""
},
mutations:{
//在组件中更改store状态的方法，state作为第一个参数，data是传递的参数
changeMsg(state,data){
state.msg = data;
}
}
})
export default store
3.在根组件上应用vuex,实现在所有的组件中都可以访问store
main.js:
import store from "./store.js"
new Vue({
...
store:store //通过store选项将状态挂载
})
4.组件中访问：1.this.$store.state.msg -- 实例中访问
2.$store.state.msg -- 模板中访问
3.this.$store.commit("changeMsg","test")
-- 组件中更新store的值
4.computed:{ //通过计算属性监听msg变化
msg(){
return this.$store.state.msg;
}
}
5.watch:{
msg(newVal){
//监听store中的值
}
}
浙公网安备 33010602011771号