初始化脚手架
看同文集下 搭建vue开发环境
脚手架结构
-
main.js整个项目的入口文件
//引入Vue import Vue from 'vue' //引入App组件 即所有组件的父组件 import App from './App' //引入路由 import router from './router' //关闭Vue的生产提示 Vue.config.productionTip = false //创建Vue实例对象--vm /* eslint-disable no-new */ new Vue({ //相当于尾部的（看下面↓） el: '#app', router, components: { App }, template: '<App/>' })//.$mount('app') -
index.html<!--针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面--><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--开启移动端的理想视口--> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!--配置页签图标--> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!--配置网页标题--> <title><%= htmlwebpackPlugin.options.title %></title>
render函数
用于不能使用template配置项的情况
-
vue.js与vue.runtime.xxx.js的区别-
vue.js是完整版的Vue,包含:核心功能+模板解析器。 -
vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器。
-
-
vue.runtime.xxx.js没有模板解析器不能使用
template配置项需要使用
render函数接收到的createElement函数去指定具体内容。
修改默认配置
-
执行
vue inspect > output.js看Vue脚手架的默认配置。 -
使用
vue.config.js可以对脚手架进行个性化定制，详见: https://cli.vuejs.org/zh
ref属性与props配置
ref属性
-
被用来给元素或子组件注册引用信息（id的替代者)
-
应用在
html标签上获取的是真实DOM元素应用在组件标签上是组件实例对象(vc)
-
使用方式
-
打标识:
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School> -
获取:
this.$refs.xxx
-
props配置
-
功能
让组件接收外部传过来的数据
-
传递数据:
<Demo name="xxx"/> -
接收数据:
-
第一种方式（只接收）
props: [ 'name '] -
第二种方式（限制类型)
props:{ name :Number } -
第三种方式（限制类型、限制必要性、指定默认值)
props:{ name:{ type:String，//类型 required:true，//必要性 default:'老王’ //默认值 } }
-
-
-
备注:
props是只读的Vue底层会监测对
props的修改，如果进行了修改,就会发出警告若业务需求确实需要修改，那么可复制
props的内容到data中一份，然后去修改data中的数据。
mixin混入
混合 = 复用配置
组件里如果有很多相同的配置，可以把相同的配置拎出来单独放，组件想要的时候直接引用就好 以达到高复用率
-
功能
可以把多个组件共用的配置提取成一个混入对象
-
使用方式
-
定义混合
例如
{ data(){...}, methods:{....} .... } -
使用混入
-
全局混入
Vue.mixin(xxx)全局混入的话要写在
main.js文件里，先import，然后调mixin，再然后所有组件就都有这东西了 -
局部混入
mixins: ['xxx']局部混入的话就哪个组件用哪个组件import，然后在vc里和data同级写一下mixins
-
-
插件 - plugins
本质上就是个对象 但是硬性要求必须包含一个install方法
-
语法
Vue.use(插件名)记得先引入嗷！
-
功能
用于增强Vue
-
本质
包含
install方法的一个对象install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据 -
定义插件:
对象.install = function (Vue,options){ //1.添加全局过滤器 vue.filter(....) //2.添加全局指令 Vue.directive(....) //3．配置全局混入(合) Vue.mixin(.. ..) //4。添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx }
scoped样式
如果不同组件里有相同类名 style可能会出现冲突
两条裙子有一模一样的商品名 但一条是短裙一条是连衣裙
但是不要紧！我们js是自上而下执行代码的！就算类名相同style不同 哪个最后执行就用哪个！
那要选哪条呢？哪条最后出现就选哪条
但是template里有标签 script里有引入 那执行顺序要按谁的来捏？Vue脚手架在解析vue文件的时候不看template里先用谁 而是看谁最新被引入
可是有在货架上摆放的先后顺序 有拿衣服的先后顺序 这要怎么算捏？当然是看手里最后拿到的是哪条，而不是看货架
很时髦嗷这个vue
-
作用
让样式在局部生效，防止冲突。
-
写法
<style scoped>
TodoMVC案例
组件化编码流程（通用）
-
实现静态组件
抽取组件，使用组件实现静态页面效果
先不用考虑交互
-
展示动态数据
2.1 数据的类型、名称
2.2 数据在组件中保存
-
交互 -- 从绑定事件监听开始
实现静态组件
-
拆分
组件要按照功能点拆分
- 添加事项区(header/add)
- 待办列表区(todos/list)
- 待办事项(item)
- 汇总区(footer)
-
命名
不要与html元素冲突
实现动态组件
考虑好数据的存放位置 数据是一个组件在用还是一些组件在用
-
单个组件使用
放在组件自身
-
多个组件使用
放在组件共同的父组件上
实现交互
从绑定事件开始
props适用范围
- 父组件 ==》 子组件 通信
- 子组件 ==》 父组件 通信
- 前提：父组件先给子组件一个函数
注意事项
使用v-model
v-model绑定的值不能是props所传值
props值不能修改
props传值
props传的若是对象类型的值，修改对象中的属性时Vue不会报错
但不推荐这样做
组件的自定义事件
-
一种组件间通信的方式
适用于: 子组件==>父组件
-
使用场景
A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。
-
绑定自定义事件:
-
第一种方式，在父组件中:
<Demo @zidingy="test"/>或<Demo v-on:zidingy="test"/> -
第二种方式，在父组件中:
<Demo ref="demo" /> ...... mounted(){ this.$refs.xxx.$on( 'zidingy ' ,this.test) } -
若想让自定义事件只能触发一次，可以使用
once修饰符，或$once方法。
-
-
触发自定义事件
this.$emit( 'zidingy ',数据) -
解绑自定义事件
this.$off( 'zidingy ') -
组件上也可以绑定原生DOM事件，需要使用
native修饰符。 -
注意:通过
this.$refs .xx. son('zidingy',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!
全局事件总线
可实现任意组件间通信
组件通信示意图
X ->外卖员，A,B -> 顾客，demo,test ->订单, D -> 商家，数据 -> 外卖
安装全局事件总线:
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
}
使用事件总线:
-
接收数据
A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on( 'xxxx',this.demo) } -
提供数据
this.$bus.$emit( 'xxxx',数据)
解绑事件
- 最好在
beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
消息订阅与发布
—种组件间通信的方式，适用于任意组件间通信。
示例：报纸的订阅与发布
- 订阅报纸： 住址
- 邮递员派送报纸： 报纸
消息的订阅与发布
- 订阅消息：消息名
- 发布消息：消息内容
使用步骤
-
安装pubsub
npm i pubsub-js -
引入
import ubsub from 'pubsub-js ' -
接收数据
-
A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe( 'xxx ' ,this.demo)// 订阅消息 } -
提供数据
pubsub.publish( 'xxx',数据) -
最好在
beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。
nextTick
-
语法
this.$nextTick(回调函数) -
作用
在下一次DOM更新结束后执行其指定的回调。
-
什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在
nextTick所指定的回调函数中执行。
过渡与动画
vue动画的理解
- 操作css的
transition或animation - vue会给目标元素添加/移除特定的
class - 过渡的相关类名
vue封装的过渡与动画
动画效果
-
作用
在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
-
图示
vue动画图示
-
写法
- 样式
- 元素进入的样式:
- v-enter:进入的起点
- v-enter-active:进入过程中
- v-enter-to:进入的终点
- 元素离开的样式
- v-leave:离开的起点
- v-leave-active:离开过程中
- v-leave-to:离开的终点
- 元素进入的样式:
- 样式
-
动画效果语法
<template> <transition name="anim" appear > <!--想要添加动画效果的内容--> </transition> </template> <style scoped> .anim-enter-active{ animation: aniName 2s; } .anim-leave-active{ animation: aniname 1.5s reverse; } @keyframes aniName { from{ transform: /*起始位置*/ } to{ transform: /*终止位置*/ } } </sytle>
过渡效果
-
过渡效果语法
HTML:
使用
<transition>包裹要过渡的元素，并配置name属性<transition name="anim" appear > <!--想要添加动画效果的内容--> </transition>CSS:
.anim-enter{ transform: /*起始起点*/ } .anim-enter-active{ trasition: 0.5s linear /*或其他想实现的样式*/ } .anim-enter-to{ transform: /*起始终点*/ } .anim-leave{ transform: /*终止起点*/ } .anim-leave-active{ trasition: 0.5s linear /*或其他想实现的样式*/ } .anim-leave-to{ transform: /*终止终点*/ }若起始点与终止点相同（从哪进就从哪出），过程样式也相同，可用逗号合并起来写
.anim-enter,.anim-leave-to{ transform: } .anim-enter-active,.anim-leave-active{ trasition: 0.5s linear /*或其他想实现的样式*/ } .anim-enter-to,.anim-leave{ transform: }
多个元素过渡
在过渡效果中
<transition>中只能包含一个元素
<transition-group>中可以包含多个元素，但<transition-group>中的每个元素都要有一个key值
集成第三方动画
可以在JS动画网站中搜索Animate.css库，去到主页，在需要加入动画效果的组件中安装该库
npm install animate.css
然后引入该库
import 'animate.css'
根据网站指引配置动画
配置代理
安装axios
npm i axios
引入axios
例中希望请求5000端口保存的students的数据
<script>
import axios from'axios'
export default {
name: 'App',
methods: {
get Students () {
axios.get('http://localhost:5000').then(
response => {
console.log('',response.data)
},
error => {
console.log('',error.message)
}
)
}
}
}
</script>
服务器运行端口为8080，运行后报错，出现跨域问题
解决跨域
方法
- cors
- jsonp
- 配置代理服务器
- nginx
- vue-cli
vue-cli配置代理服务器
方法一
新建vue.config.js文件，添加如下配置
module.exports = {
pages: {
index: {
// 入口
entry: 'src/main.js',
},
},
lintOnSave: false, // 关闭语法检查
// 开启代理服务器
devServer: {
proxy: 'http://localhost:5000' // 需要对接的服务器
}
}
此时可以成功获取到数据
不过之前的getlocalhost:5000代码应改为http://localhost:8080/students
-
优点：配置简单，请求资源时直接发给前端
-
缺点：
不好控制，若服务器所在端口有文件与请求的端口文件重名，则会返回所在端口的文件；
只能配置单个代理服务器
-
工作方式:
若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源)
方法二
在vue.config.js文件中配置具体代理规则
devServer: {
proxy:{
'/api': { // /api:请求前缀，写在端口号之后，匹配所有请求前缀是/api的代理路径
target: '<url>', // 代理目标的基础路径，只要请求前缀是api，代理就将其转发给target中的服务器
pathRewrite: {'^/api': ''} // 重写路径，使用正则表达式匹配所有以/api开头的路径，然后将/api转换为空字符串
ws: true, // ws:用于支持websocket，vue-cli中默认为true
changeOrigin: true // 用于控制请求头中的host值，vue-cli中默认为true，react脚手架中默认为false
},
'/foo': {
target: '<other_url'
}
}
}
- 优点：可配置多个代理，可灵活控制请求是否走代理
- 缺点：配置略繁琐，请求资源时必须加前缀
网友评论