Vue
2021-12-08 11:18:47 4 举报AI智能生成
11
作者其他创作
大纲/内容
概念
文件组件
1.非单文件组件
就是html 引用 vue.js
2.单文件组件
命名
一个单词School.vue
两个单词SchoolName.vue
模块化
暴露资源
1. export
方式
统一暴露
export school
默认暴露
export default school
引入资源
import {school} from ‘ ’
脚手架 Vue CLI
文档
标准化开发工具- 帮助编译、整合、解析、运行Vue组件化项目
脚手架 版本 要高于 Vue版本
CLI 译文 command line interface
脚手架
步骤
1.配置镜像
淘宝镜像
npm config set registry https://registry.npm.taobao.org
2.安装
全局安装
npm install -g @vue/cli
创建项目（切到项目工作区内）
vue create systemOcr
3.结构解释
bebel配置
整合js、css的配置
package.js
安装的包内容
npm run lint 语法检查-一般不用
package-lock.js
下载包 版本锁死 保障版本在可控范围内
src
asssets
静态资源地址
执行顺序
npm run serve ->
第一站
main.js（入口文件）
import Vue from ‘vue’
import App from ‘./App.vue’
引入APP组件，他是所有组件的父组件
Vue.config.productionTip=false
关闭vue的生产提示
new Vue({
render: h => h(App)
}).$mount('#app');
//创建Vue 实例对象 --vm 将APP组件放入容器中
渲染
render
通过render 渲染不完整的vue，使用不完整的vue 是为了后续编译、打包优化
配置修改
webpack==>webpack.config.js
（项目下执行）命令 vue inspect > output.js
调整个性化的脚手架配置
新建vue.config.js
vc常用属性
this.$refs.name....
获取ref的属性值拿到 innerHTML或者 innerText
1.被用来给元素或子附件注册引用信息（替代ID）
2.应用在html标签上获取的是真实DOM元素，应该在组件标签上是组件实例对象（vc）
3.使用方式
打标签
<h1 ref="refName"></h1>
获取
this.$refs.refName
this._props配置项
在页面引用子组件 想给子组件传递数据 -子组件创建props 增加 上一个页面传递的属性（外部传进来的值不允许改）props执行优先级高于data
技巧
字符串*1 转换为数值
方式一
子组件匹配值
props:['name','xx']
方式二
页面传值
<Student :name=33 :xx=44 />
子组件匹配值
props:{
'name':String,
'xx':number
}
这种方式可以限制 数据类型
方式三
设置字段是否是必传项
props:{
name:{
type:String,
required:true
}
xx:{
type:String,
default:66
}
}
required 和default 不能同时出现
this.mixin
”混入“ 两个组件 或者使用一个配置
mixins:[]
抽取共同项 提取
全局混入
Vue.mixin(xxx)
局部混入
minins：['xxx']
this.$emit
触发自定义事件
绑定自定义事件
解绑
79-81
this.$off（[‘事件名1’,‘事件名2’]）
this.$off（）
解绑所有的自定义事件
this.$refs.student.$on('student',this.getStudentName)
@click.native=“show”
当做远程的click使用
组件间通信方式
全局事件总线
任意组件间通信
VueComponent.prototype.__proto__ === Vue.prototype
es方法
判断当前对象上是否有某个属性
student.hasOwnProperty('属性名')
返回布尔值
this.$nextTick(function(){
this.$refs.input.focus();
})
能上边逻辑解析完在 运行这个代码
插槽
默认插槽
<slot></slot>
具名插槽
具有名字的插槽
作用域插槽
应用插件（增强vue 功能）
1.定义插件
在src下创建plugins.js
export default {
install(Vue，参数1，参数2，参数3){
console.log('@@@@@@')
}
}
2.引入插件
main.js
引入插件 Vue.use
const demo = Vue.extend({})
const d = new demo()
Vue.prototype.x =d
创建公共属性便于 VM、VC 调用
mounted(){
this.$bus.$on('hello',(data)=>{
console.log(‘收到的消息’,data)
})
}
调用
sendStudent(){this.$bus.$emit('hello',666)}
挂载总线
new Vue({
render:(h)=>h(App),
beforeCreate(){
Vue.prototype.$bus = this
}
})
设计模式
当使用前端总线的方式 命名不能有重名 否则会出现冲突 一般会在当前的项目中创建一个 config 文件 一个常量文件 用于存储当前文件的常量名 保障程序运行正常
同事在 调用的组件里 创建一个销毁
beforeDestroy(){ this.$bug.$off('hello') }
否则 组件销毁了 傀儡还在 占用vm资源
插件
nanoid
npm i nanoid
生成随机不重复字符串
消息订阅与发布
pubsub-js
npm i pubsub-js
使用
消息的发布
pubsub.publish('aaa',10000)
消息的订阅
this.pubId = pubsub.subscribe('aaa',this.ActionFunction(msgName,data))
消息的销毁
beforeDestory(){
pubsub.unsubscribe(this.pubId)
}
参数
下划线 _ 占位
动画特效
annimate.css
npm i animate.css --save
91-94
发送请求
axios
npm i axios
动态代理解决跨域问题
在vue.config.js 配置
示例
vue-resource
npm i vue-resource
vue的插件库
main.js
import vueResource from ‘vue-resource’
Vue.use(vueResource)
vc上会携带 $http
使用
this.$http.get('路径','参数')
样式
scoped
防止样式在编译环节 不同文件出现 同一个css样式名 导致的样式覆盖
lang=“less”
预编译语言less 支持嵌套
脚手架处理不了less
需要安装less-loader
npm i less-loder
报错
因为现在vue 使用webpack 版本为4.46.0 所以不能直接安装
npm i less-loder@7
lang=“css”
查看版本
npm view webpack versions
组件化编码流程
1.实现静态组件
抽取组件，使用组件实现静态页面效果
2.展示动态数据
数据的类型，名称是什么？
数据保存在那个组件？
3.交互 从绑定事件监控开始
界面设计考虑
状态
1.欢迎界面
2.加载界面
3.数据界面
4.错误界面
vuex共享数据
概念化
集中式
只变更一次 所有人都能监控到
概念
专门在Vue 中实现集中式状态（数据）管理一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)
也是一种组件间通讯的方式，且适用于任何组件间通讯。
也是一种组件间通讯的方式，且适用于任何组件间通讯。
分布式
使用场景（共享-只保存了一份）
1. 多个组件依赖于同一个状态
2. 来自不同的组件的行为需要变更同一个状态
安装
npm install vuex --save
原理总结
1. 通过dispatch（'函数名',‘参数’）调用
2. Actions 提供函数接收相应的function 处理
3. Commint（‘函数名’,'参数'）
4. Mutations
工具
idea
插件
Vetur
识别Vue文件格式
@installed open
外置APP打开
0 条评论
下一页
