Vue总结
vue简介
vue是一款mvvm做单页面应用的渐进式js框架
vue的使用
1.
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
2.
<script>
new Vue({
el:"#app",
data:{msg:"你好"}
})
</script>
vue模板标签
{{}} ：可以理解为可执行简单js解析data数据的地方
v-text ：把data数据显示出来
v-html： 把data数据显示出来（解析HTML字符串）
v-bind：属性 绑定html标签属性 (v-bind可以省略)
v-bind：”title=“ti” = :title="ti"
条件渲染
v-show=“表达式”：当表达式为真显示，为假不显示
v-if=“表达式” v-else：当表达式为真显示，为假不显示
v-show 通过css的方式隐藏
v-if 通过移除html标签隐藏
列表渲染
<p v-for="(item,index) in list" :key="index">{{index+1}} ---{{item}}</p>
循环显示列表元素
事件绑定
v-on:事件名称 v-on:click="show"
@:事件名称 @click="show"
事件修饰符
定义:修饰事件处理
事件修饰符：
.once
.stop：停止事件冒泡
body>div>p>button
事件从最小元素发生逐级向上冒泡通知事件
.stop停止事件
.prevent
a默认有跳转到链接事件
.prevent阻止默认事件
### 按键修饰符
.enter：回车键被触发
.left/.right/.up/.down
.esc
.space
表单绑定 V-model
text：通常是字符串
checkbox：
1.不给值：选中为true 不选中为false加粗样式
2.给值-一组：data数据绑定为一个数组
radio：
单个值（name属性）
:disabled=""
表单不可用 布尔值
实例属性
el:vue模板范围
data:vue数据存放中心
methods:vue方法存放中心
computed：定义：从现有数据计算出新的数据
computed{
olist(){ return this.list.filter(item=>item.age>18);}
}
watch：定义：实时检测一个数据的变化，只要数据发生任何改变，都能检测
watch:{
"检测的数据名":{
handler:function(nval,oval){//数据变化时的操作}
}}
created：数据在模板里渲染完毕，组件创建完毕 回调函数
directive指令：定义：能让我们获取当前指令所在的html元素
模式：inserted/bind/updated/默认bind和updated
myfocus:function(el,obj){
//el指令所在的html标签
}
调用 v-focus="flag"
vue动画
transition：动画指令
1.name动画的名称
2.mode：动画模式 先进（in-out）还是先出（）
3.enter-action-class：进入时调用类名
4.leave-action-class：离开时调用类名
transition-group：动画组指令
1.定义：在动画指令里面，如果有元素的显示或隐藏会自动添加相应的类名
动画组-需要指定key
默认class名
1.v-enter-active 进入过程
v-enter
进入初始状态
v-enter-to
进入结束状态
2.v-leave-active 离开过程
v-leave
离开初始状态
v-leave-to
离开结束状态
css
关键帧动画
定义动画
@keyframes fadeIn {
from{opacity: 0;}
to{opacity: 1;}
}
调用动画
animate:fadeIn 1s ease;
过渡动画
定义：从一个状态过渡到另一个状态
transition:过渡的属性 过渡时间 缓动函数
transition:all 1s ease
transfrom 转换
scale 缩放
translate（x,y）位移
skew(deg)倾斜
rotate（deg）旋转
组件
定义与使用
定义
let child={template:'<div>...</div>'}
注册
components:{child}
使用
当html标签
<child></child>
<child></child>
组件的数据
data:function(){return {num:1}}
组件的传参（父向子）
默认数据&数据类型限定
props:{
"pnum":{default:1,type:[String,Number,Boolean,Array]}
}
调用组件的时候 用属性方式传递
<child :pnum="5">
在组件内部接受参数
props:["pnum"]
当数据使用了单项数据流
解释:父亲组件传递给子组件的数据 需要只读（父亲的数据可能传递给多个子组件的）
需要修改父亲传递过来的数据呢
定义数据：data:function(){return{num:0}}
接受父亲的数据props:{"pnum"}
重新赋值定义好的数据created(){this.num=this.pnum}
组件的插槽
作用：可以让组件产生嵌套关系
使用
1.定义child组件用 template=“<div><slot></slot></div>”
2.调用组件<child>中间的内容会被放入组件template里面的slot标签里</child>
命名插槽
作用：特殊的内容去特殊的位置
使用
1.在嵌套时
<h1 slot="title">
<p slot="foot">
组件内部接收
<slot name="title">
<slot name="foot">
<slot></slot>
没有命名默认会被放入slot标签里面
cmd
切换磁盘：磁盘名: d:
cd: 切换目录
/ 根目录，../上级目录，cd目录名:cd Users
dir 查看当前目录和文件
上下箭头 命令历史记录
md 创建文件夹
cls 清屏
ipconfig 查看当前ip
ping 主机名 查看和另外一台电脑是否联通
help 帮助文档
ctrl+C 强制结束
json方法
对象转字符串
JSON.stringify(obj)
字符串转对象
JSON.parse(str)
本地存储
localStorage.setItem(k,v)
存-字符串
localStorage.getItem(k)
路由
cli-方式写组件
组件的构成
模板
template
业务逻辑
script
样式
style
样式组件的使用
1. 创建组件.vue
2. 导入并注册组件
3. 使用组件
路由与视图
页面.vue
配置 router.js
路由对应的地址
path:"/cart"
路由的名称
name：“cart”
路由地址对应的组件
component：Cart
路由指令
路由链接（切换路由）
router-link
切换的地址
to="路由地址"
路由视图显示 url对应的组件的
router-view
路由的参数
1. router.js配置
path:"/product/:id"
2. 组件内部获取到参数
{{$route.params.id}}
路由编程跳转
返回
$router.go(-1)
$router.back()
跳转
$router.push("/")
$router.push("/cart")
$router.replace("/cart")
跳转页面不留历史记录
目标
购物车页面
cart.vue
存放页面内容
router.js
配置购物车 /cart
切换路由的指令
<router-link :to="/cart">购物车</router-link>
vue中使用ajax
1. 安装
cmd下安装，安装到项目下
yarn add axios
2. 挂载到vue
import axios from ‘axios’
Vue.prototype.$http = axios
3. 使用
this.$http.get(url)
.then(res=>{
})
目标 模拟段子app
说明：咱们后端同header 头信息 允许跨域
目标
点完更多加载新的一页
getJok()
1. url 要动态传入参数page
2. 数据jok 和以前的合并 concat
3. 更新数据page++
上线 打包
yarn build
项目目录下会多一个 dist
vue组件的生命周期
定义：一个组件从创建到销毁会经历多个步骤，把这些步骤称为组件的生命周期
组件的每个生命周期都会，触发固定的回调函数，我们把回调函数称为 生命周期钩子函数
生命周期
创建前后
created()
创建完毕
做一些初始化
beforeCreate
创建完毕前
渲染前后
mounted
第一次渲染完毕
html DOM已经渲染 操作页面中的元素
beforeMount
渲染完毕前
更新前后
updated
更新完毕
beforeUpdate
更新前
销毁前后
destroyed
销毁完毕
beforeDestroy
销毁前
导航守卫
组件内部守卫
定义：当进入页面或离开页面进行判断
进入页面
重定向别的页面
额外的事情
beforeRouterEnter
路由进入前
to
要进入的路由
from
从哪个路由来的
next
将要去哪儿
next 必须要被调用
beforeRouterLeave
路由离开前
路由配置 全局守卫
beforeEach
路由独享守卫
beforeEnter
需求
1. 设置购物车页面需要登录 才可以访问
2. 如果没有登录 跳转到登录页面
3. 在登录页面登录成功，跳转到 它之前进入的页面
实现登录
1. 登录接口
1. 编写 login.vue 页面
发起登录
2. 发送数据
3. 保持登录会话
目标 用户页面 注销&登录
user.vue 用户页面
注销
用户信息展示
登录保持
cookie存储
https://github.com/js-cookie/js-cookie
localStorage存储
注册
regist.vue
注册成功跳转登录
注册成功-后端实现登录
跳转到首页、用户页面
案例：小米商城
1.目标
获取首页数据，渲染出来
页面缓存
缓存组件 <keep-alive>
特别组件需要缓存 meta:{keepalive:true}
组件间通信
1. 父传子
a， 父组件通过属性方式传入
<swiper :gallery="galleryPic"/>
data(){return {galleryPic:[...]}
b , 子组件通过props 方式接收
props:["gallery"]
2. 子获取父亲的data数据
this.$parent.showTab
3. bus方式传递
（不论，父子还兄弟，还是子父）
1. 定义 bus.js
import Vue from ’vue‘
export default new Vue();
2. 如果要获取数据
import bus from "bus.js"
bus.$on(事件名,data=>{ // data 就是数据名称})
3. 如果要发送数据
import bus from "bus.js"
bus.$emit("事件名",数据)
4.子传父
<swiper @swevent="处理函数($event)" / >
<swiper @numchange = “changeHd($event)”/>
methods:{
changeHd(e){
// e 就是swiper 传递过来的数据 15
}
}
this.$emit("numchaneg",15)
5. 路由传递
params
配置
{path:"/product/:id"}
获取
{$route.params.id}
query
push("/login?redirect=/about")
获取
$route.query.redirect
6. vuex(最高级)
组件的缓存
1. 定义元信息 .router/index.js
{name:"cart",
meta:{keep:true}}
2. keep-alive进行缓存
:include="'cart'"
<keep-alive>
<router-view v-if="$route.meta.keep"/>
</keep-alive>
<router-view v-if="!$route.meta.keep"/>
jsonp数据
axios 不支持jsonp
jsonp的原理？
为什么jsonp ?ajax 请求有同源测试
经常需要跨域名请求数据
后端允许 Access-Control-Allow-Origin:*
后端允许 函数名(数据)
jp({name:"mumu",age:18})
<script src="数据的地址">
（调用方法）
前端先定义一个方法
function jp(data){
console.log(data);
}
（定义方法）
jsonp使用步骤
1. 安装jsonp
yarn add jsonp
2. 导入jsonp
import jsonp from 'jsonp'
3 jsonp方法
jsonp(url, opts, fn)
前端项目
基本nodejs
xxx.vue xxx.js xxx.css
webpack 服务
1.打包分离 压缩
跨域-代理跨域
请求地址-本地服务-获取文件->目标浏览器
1. 在项目目录 配置一个 vue.config.js
module.exports = {
devServer: {
/**
* 这一块是devServer的配置，可以参考https://webpack.js.org/configuration/dev-server/
* (可选，根据自己情况来设置)
*/
open: true, //浏览器自动打开页面
host: "localhost", //本地服务器访问的路径
port: 8080, //本地服务器访问的端口
/**
* vue-cli3跨域的全配置！
*/
proxy: {
/**
* (推荐这种方式)
* 这里是域名后面需要访问的部分(最原始的跨域方式！),！
* 跨域域名https://baike.baidu.com/后面的访问目录！
* 在axios路径中写入/article目录下要访问的具体内容路径即可，如果：/article/d4666d640e2e478d283d8c7f.htm即可
*
*/
'/motor': {
//你要跨域的域名(包含host、端口号,切记：一定要带上http头);
//同一个域名只能设置一次跨域，否则重复报错！
target: 'https://m.dcdapp.com',
changeOrigin: true, //是否跨域，设置为true;(必须)
/* 对应的axios路径设置：
axios.get( "/motor/d4666d640e2e478d283d8c7f.htm" )
.then( function ( response ) {
console.log( response.data );
} )
.catch( function ( error ) {
throw error;
} );
*/
}
}
},
publicPath: './'
}
商品内容
product.vue
this.$http.get("http://biger.applinzi.com/product.php?id="+this.$route.params.id)
category.vue
@click="$router.push('/product/'+product.action.path)"
router/index.js
path: '/product/:id',
