vue基础内容{通信,注册,路由,组件}
ES6常用语法
-- 变量
-- var 变量提升
-- let {}
-- const 常量
-- 模板字符串
-- ``
-- ${}
-- 函数
-- 箭头函数
-- this
-- 普通函数取决于函数最近的调用者
-- 箭头函数取决于当前上下文环境
-- 数据的解构
-- 注意语法
-- 类
-- class 定义类
-- extends 继承
-- constructor 构造方法
-- 子类是没有this的 用super()
-- export import
-- export {} ---》 import {} from .....
-- export default 一个文件只能有一个 import xxxx from xx
Vue的常用指令
-- v-text innerText
-- v-html innerHtml
-- v-if appendChlid
-- v-for 循环
-- v-show display
-- v-bind 绑定属性 : <div :class="{"类名"： is_show}"></div>
-- v-on 绑定事件的 所有的js的事件
-- v-model 数据双向绑定
-- input
-- select
-- textarea
-- 指令修饰符
-- .lazy 不要实时绑定 懒
-- .trim 去空格
-- .number 转换成数字
-- 自定义的指令
-- Vue.directive("指令名称"，function(el, binding){
el: 绑定指令的标签
binding: 指令的所有信息
})
-- 计算属性 {{num}}
-- computed: {
num: function(){
return xxxx
}
}
-- 放入缓存 只有数据发生改变的时候才会重新计算
-- 获取DOM
-- 给标签添加ref属性
<div ref="my_box"></div>
-- this.$refs.my_box
-- 数据监听
-- watch: {
my_data: {
handler: function(val, oldVal){
val 新的值
oldVal 旧的值
注意 数组跟对象新旧值是一样的
}
deep: true
}
}
-- 数组
-- 长度改变的时候才会被监听到
-- 改变数组的值的时候深度监听监听不到
-- app.$set(array, index, value)
-- 对象
-- 深度监听是可以监听到的
Vue的组件
-- 组件的注册
-- 全局注册
Vue.component("组件名称"，{
template只能识别一个作用域块
template: `<div></div>`,
data(){
return {
xxx: xxx
}
},
methods: {},
.....
})
<组件名称></组件名称>
-- 局部注册
-- let my_com = {
template只能识别一个作用域块
template: `<div></div>`,
data(){
return {
xxx: xxx
}
},
methods: {},
.....
}
-- 注册在Vue的实例化对象里
const app = new Vue({
el: "#app",
components: {
my_com: my_com
}
})
-- <my_com></my_com>
-- 子组件的注册
-- 在父组件里写compontents: {
类比局部组件注册
}
-- 在父组件的template里显示子组件对应的标签
<clild></child>
-- 组件之间的通信
-- 父子通信
-- 给父组件里的子组件绑定属性
<child :属性名称="父亲向儿子说的话"></child>
-- 子组件通过props拿到数据
props:[属性名称]
-- 子父通信
-- 子组件要提交事件
this.$emit("事件名称", 儿子向父亲说的话)
-- 给父组件里的子组件绑定事件
<child @事件名称="自己处理的事件名称"></child>
methods: {
自己处理的事件名称: function(){}
}
-- 非父子通信
-- 定义一个中间调度器
const Event = new Vue()
-- 其中一个组件向中间调度器提交事件
Event.$emit("事件名称", data)
-- 另一个组件监听调度器的事件
mounted(){
Event.$on("事件名称", function(data){
do something
注意this
})
}
-- 混合
-- 作用代码的复用
-- let base = {
可复用的代码块
}
-- mixins: [base]
-- 可以重写base里的内容
-- 插槽
-- <my_com></my_com>不支持标签里写内容
-- slot
-- 命名的插槽
<slot name="xxx"></slot>
<div slot="xxx"></div>
Vue的路由
-- 路由的注册
-- let url = [
{
path: "/",
component: {
template: ``
},
},
{
path: "/course",
component: {
template: ``
},
}
]
-- let router = new VueRouter({
routes: url
})
-- const app = new Vue({
el: "#app",
router: router
})
-- <router-link to="/">首页</router-link>
<router-link to="/course">课程页面</router-link>
<router-view></router-view>
-- 子路由
-- let url = [
{
path: "/",
component: {
template: `写子路由的router-link以及router-view
<router-link to=""></router-link>
`
},
children: [
{
path: "/user",
component: {
template: ``
}
}
]
}
]
-- 命名的路由
-- let url = [
{
path: "/",
name: "home",
component: {
template: ``
},
},
{
path: "/course",
component: {
template: ``
},
}
]
-- let router = new VueRouter({
routes: url,
去掉路由上的#
mode: "history"
})
-- const app = new Vue({
el: "#app",
router: router
})
-- <router-link :to="{name: 'home'}">首页</router-link>
<router-link to="/course">课程页面</router-link>
<router-view></router-view>
-- 路由的参数
-- -- let url = [
{
path: "/",
component: {
template: ``
},
},
{
path: "/course/:course_name",
component: {
template: ``
},
}
]
-- this.$route
路由的所有信息
fullpath
path
query ？后的数据
params 是路由里的变量
meta
-- this.$router
VueRouter实例化对象
-- 手动路由
-- this.$router.push("/")
-- this.$router.push({name: "xxx", params: {key:value}, query: {key:value}})
-- 路由的钩子
-- router.beforeEach(function(to, from, next){
to 你要去哪
from 哪里来的
next 下一步干嘛
})
-- router.afterEach(function(to, from){})
-- 命名的路由视图
-- 当一个路由对应多个组件的时候
-- <router-view name="对应组件的名称"></router-view>
