一、组件化编程
二、Vue脚手架
1.全局安装
npm install -g @vue/cli
2.创建项目
vue create vue_test
3.脚手架结构
├── public
│ └── logo.png # logo
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ ├── config # 项目基础配置,包含路由,全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目引导, 全局配置初始化,依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限控制)
│ └── global.less # 全局样式
├── tests # 测试工具
├── README.md
└── package.json #包说明书
└── package-lock.json #包版本控制文件
└── babel.config.js
lintOnSave: false//关闭语法检查
4.ref属性
被用来给元素或子组件注册引用信息,获取的是组件实例对象,通过ref属性可操作dom元素
<school ref="sch"></school>
methods: {
showDom() {
console.log(this.$refs.title)
//sch组件实例对象
console.log(this.$refs.sch)
},
},
5.Props配置
prpos是只读的
props适用于:
父组件
:name='name'
子组件
//简单接受
//props: ["name"],
//接受的同时对数据进行类型限制
/* props:{
name:String,
} */
//接受的同时对数据进行类型限制加入默认值指令与必要性的限制
props: {
name: {
type: String,
required: true,
}
},
6.mixin混入
1.定义混合
methods: {
showName() {
alert(this.name)
},
}
2.混入混合
1.全局混入
Vue.mixin(xxx)
2、局部混入
mixins: [xxx],
7.Vue插件
新建plugins.js
在main.js中引入插件
export default {
install(Vue) {
Vue.filter('myslice', function (value) {
return value.slice(0, 3)
})
}
}
scoped限制样式
<style scoped>
</style>
三、浏览器本地存储
1.localStorage
保存
localStorage.setItem('msg', 'hello')
读取
localStorage.getItem('msg')
删除
localStorage.removeItem('msg1')
清空
localStorage.clear()
2.sessionStorage
保存
sessionStorage.setItem('msg', 'hello')
读取
sessionStorage.getItem('msg')
删除
sessionStorage.removeItem('msg1')
清空
sessionStorage.clear()
四、组件自定义事件
适用于子组件-->父组件
子组件
子组件传值
this.$emit("name", this.name)
父组件接收
@name='name'
4.解绑自定义事件
1.解绑单个事件
this.$off("getName")
2.解绑多个事件
this.$off(["getStudentName", "demo"])
3.解绑所有事件
this.$off()
五、全局事件总线
任意组件之间互相通信
$on $off $emit都在vue的原型对象上
兄弟之间的通信$bus
1、安装全局事件总线
beforeCreate(){
Vue.prototype.$bus=this
}
2、使用事件总线
1.接收数据
methods: {
demo(data){}
},
mounted() {
this.$bus.$on('xxx',this.demo)
},
2.提供数据
this.$bus.$emit('xxx',数据)
3、最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
main.js
beforeCreate() {
Vue.prototype.$bus = this
}
checkItem(id) {
// 让app中对应的done值取反
this.$bus.$emit("checkTodo", id)
},
mounted() {
this.$bus.$on("checkTodo", this.checkTodo)
this.$bus.$on("deletetodo", this.deletetodo)
},
beforeDestroy() {
this.$bus.$off("checkTodo", this.checkTodo)
this.$bus.$off("deletetodo", this.deletetodo)
},