模板组件
- 模板中只能有一个根元素，可以通过元素属性定制模板
- ref ： ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。（父调子）
- slot ：定制模板
- slot可以放置一些默认的内容，如果传递了内容，则替换掉，根据name属性匹配
- 如果没有名字的标签，会放到默认default中。
<modal>
<p slot="title">这是标题</p>
<span slot="content">这是内容</span>
<p">默认值</p>
</modal>
<template id="modal">
<div>
<slot name="title"></slot>
<slot name="content"></slot>
<slot name="default">这是默认值</slot>
</div>
</template>
-
keep-alive 一般用作缓存（dom的状态不会被销毁）
-
mounted vue更新异步渲染DOM ，想操作DOM就用nextTick。
-
provide， inject：给下级组件传递值。
当改变祖父组件数据时，动态改变孙组件的值，用Object.defineProperty动态改变要改变的值，利用get方法每次拿到最新的值。
祖父组件.png
孙子组件.png
路由
抛出两个全局的组件router-link ，ronter-view ， 抛出两个对象router ，route（路由信息对象）挂载到vue实例化对象。
-
router-link默认渲染出来是a标签 ,ronter-view是路由组件的出口。
-
当创建VueRouter的时候，如果vue是一个局部作用域的对象，则必须Vue.use(VueRouter);如果是全部作用域，则可以不必use。
-
每个组件都有一个名字叫
route(没r的存的都是属性）。
-
嵌套路由：childen路径不带“/”，带“/”表示一级路由。
地址栏路由两种范式：
1. aaaa.html#/user/1 params方式
2. bbbb.html#/user?userId = 1 Query方式
router：[{
path: '/user/:id', //动态路由参数 以冒号开头
name: 'userP',
component: userParams
},{
path: '/user', //
name: 'userQ',
component: userQuery
}]
<router-link :to="{name:'userP', params:{id:1}}">用户1</router-link>
<router-link :to="{name:'userQ',query:{userId:2}}">用户2</router-link>
// 在进入路由之前，每一次都会执行此方法，全局钩子，可以做权限
router.beforeEach((to, from, next) {
document.title = to.meta.title;
if(to.path == "/list"){
next({path:"/add"})
}else{
next(); //如果不调用next路由就会卡住，一定要调用
}
})
// 给未来路由做权限可控制 全局路由守卫来做参照条件
router：[{
path: '/user/:id',
component: userParams,
meta:{
auth：true //组件中添加这个 用来判断权限
}
}]
this.$router.push({}) // 动态编程式导航
模块
多个export导出的模块，会放入到一个对象中；
export let str1="1111";
export let str2="2222";
//会将str1和str2放入到你一个对象中，导出{str1:111,str2:2222}
//在另一个文件中导入时，把内容解构出来即可使用，即：
import {str1，str2} from “./a.js” //如果是文件模块加‘/’，如果是第三方则不加“/”
// 导出是对象，导入也必须是对象模式
import * as b from "./a.js"
webpack
- webpack必须以common.js的写法
//专门处理路径用，以当前路径解析出一个相对路径
let path = require('path')
console.log(path.resolve('./dist'))
module exports = {
entry:'./src/main.js', //打包的入口文件，webpack会自动查找相关的依赖进行打包
// entry:{ 多文件入口
// main1:'./src/main1.js',
// main2:'./src/main2.js',
// }
output:{
filename:'bundle.js' //打包后的名字
// filename:'[name].js' //多文件
path:path.resolve('./dist') //必须是个绝对路径
}
}
- 在js中引入图片需要import，或者线上路径。
- webpack-dev-server ：这里面内置了服务，可以帮我们起一个端口号，当代吗更新时，可以自动打包（内存中打包），代码有变化就会执行。
vue
- vue = compiler + runtime; （compiler 可以编译模板）。
- import vue from vue，这样 直接引入vue，引的并不是vue.js，而是vue的runtime。
- vue.use(vueRouter) 作用 注册全局组件
- router-link-exact-active ：确切激活样式 router-link-active ：激活样式
vue tools 调试工具
cnpm install -g @vue/devtools
vue-devtools //运行
网友评论