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标签

//obj.value指令的值

}

调用 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',