jVUE、四
一、局部过滤器
局部过滤器通过filters属性创建
filters：{
fmtYear:function(time){
let u = getFullYear()
return y
}
}
注意：局部过滤器只能在当前的组件内使用
二、局部自定义指令通过directives创建
data(){
return{
color"red
}
},
directives:{
mycolor:{
inserted(el,binding){
el.style.color = binding.value
}
}
}
三、VUE的生命周期
理论知识—面试专用
<script>
var vm = new Vue({
el: "#app",
data: {
info: "hello"
},
// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 配置之前被调用。
beforeCreate: function () {
console.log("===============beforeCreate============================================")
// $el表示Vue 实例使用的根 DOM 元素。
console.log('$el', this.$el);
// $data Vue 实例观察的数据对象
console.log('$data', this.$data);
console.log("info:", this.info)
},
// 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，dom还未生成，$el 属性目前不可见。
created: function () {
console.log("===============created=======================================")
console.log('$el', this.$el);
console.log('$data', this.$data);
console.log("info:", this.info)
},
// 模板编译挂载之前调用，首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。接着判断是否有template属性，有的话就以template属性中的值作为模板，如果没有的话，就以el属性指向的作为模板。这里会生成vm.$el，但指令尚未被解析
beforeMount: function () {
console.log("===============beforeMount=========================================")
console.log('$el', this.$el);
console.log('$data', this.$data);
console.log("info:", this.info)
},
// 模板编译挂载之后调用，vm.$el替换掉el指向的dom
mounted: function () {
console.log("===============mounted===========================================")
console.log('$el', this.$el);
console.log('$data', this.$data);
console.log("info:", this.info)
},
// 数据变更导致虚拟DOM重新渲染之前调用
beforeUpdate: function () {
console.log("===============beforeUpdate============================================");
},
// 数据变更导致虚拟DOM重新渲染之后调用
updated: function () {
console.log("===============updated======================================================");
},
// 实例销毁之前调用，在这一步，实例完全可用
beforeDestroy: function () {
console.log("===============beforeDestroy===============================================")
console.log('$el', this.$el);
console.log('$data', this.$data);
console.log("info:", this.info)
},
// vue实例指向的所有东西解除绑定，包括watcher、事件、所以的子组件，后续就不再受vue实例控制了
destroyed: function () {
console.log("===============destroyed================================================")
console.log('$el', this.$el);
console.log('$data', this.$data);
console.log("info:", this.info)
},
methods: {
destroy() {
// 表示销毁组件
this.$destroy()
},
udpateinfo() {
this.info = 'hello2'
}
}
})
</script>
四、插槽
一、默认插槽
默认插槽：1、定义插槽（也就是组件中的坑）通过slot组件定义
2、组件的innerHTML位置的所有内容将来都会被放进插槽的那个slot坑里面（不管放多少数据，都是在一个坑里面）
Vue.component('father',{
template:`
<div>
father
<slot></slot>
</div>
`
})
二、具名插槽（具有名字的插槽）
1、具名插槽需要给slot组件取名，通过那么属性取名
2、在标签位置，通过添加slot属性，指定需要插入到的某个名字的插槽，这个slot属性的值。就是下面坑的name属性的值
<div id="app">
<father>
<h1 slot='myheader'>这是头部</h1>
</father>
</div>
Vue.component('father',{
template:`
<div>
<slot name='myheader'></slot>
father
</div>
`
})
三、作用域插槽
1、在标签内部通过slot-score属性将插槽定义为作用域插槽，它的属性是，将坑里面的属性取出来，
2、slot-scope属性的值可以自己定义，它这个值是一个对象，里面保存了slot坑里面的所有属性
<div id="app">
<father>
<p slot-scope="obj"> 这个耳机的接口</p>
</father>
</div>
Vue.component('father',{
template:`
<div>
<slot type='3.5'></slot>
father
</div>
`
})
四、Vue.set()
Vue.set() 可以用来设置响应式数据
Vue.set(this.user,‘key’,‘新的值’)
别名：this.$set()
五、this.$nextTick()函数
通过this.xxxx = ‘新值’；这种方式去设置值的时候，它是异步的
this.$nextTick(()=>{
console.log()
})
this.$nextTick() 函数的作用是等页面的数据更新完成之后，它再执行内部回调函数中的逻辑
Vue.nextTick()
六、路由
一、node.js 路由 根据前端的请求返回不同的数据用的
二、vue的路由 根据页面url的不同渲染不同的页面（组件）
一、使用vue-router
1、引入vue-router文件
2、创建路由需要用到的组件
let myzujian = Vue.component('indexMy',{
template:`<div>这是首页</div>`
})
3、创建路由对象，通过构造函数VueRouter()创建
let routerObj = new VueRouter({
//注意单词
routes:[
//4.1、每个对象中有name 表示路由规则的名字，可以自己去，path 表示路径（这里需要加斜杠），自己定，component 表示路径匹配到的组件
{name:'indexS',path:/'home',component:myzujian},
{}
]
})
4、这个对象中有一个routers属性，它是一个数组，可以用来放多个路由规则，每个路由规则是一个对象
5、将路由对象注入到vue实例中，注入进来之后会让整个应用程序拥有路由
let vm = new Vue({
el:'#app',
router:routerObj
})
6、通过router-view组件定义坑，用来方法路由规则匹配到的组件
<router-view></router-view>
7、在vue-router中，router-link组件专门用于页面跳转，它有一个to属性，里面的值必须和下面路由规则中的path一一对应，表示要跳转到的路径，将来这个router-link组件会被渲染成a标签，它的to属性的值会变成href属性值，并且加了#
<li><router-link to="/home">主页</router-link></li>
三、路由参数
路由参数的添加
1、路由参数： :参数名（自定义）
{name:'indexS',path:/'home/:cid',component:'myzujian'},
2、页面中获取路由参数通过 $route.params.参数名 获取
<p>{{$router.params.cid}}</p>
3、js中通过this.$route.params.参数名来获取
mounted：{
console.log(this.$route.params.cid)
}
四、路由监听
通过watch去监听
watch:{
'$route'(to,from){
//对路由变化做出响应
}
}
to：表示到哪里去的对象
from：表示从哪个对象跳
watch:{
'$route':{
handler(to,from){
},
//immediate：true表示马上执行一次
immediate:true
}
}
五、子路由
1、定义子路由通过children属性设置，children属性就是一个一个的对象，对象也是name/path/component
let cookbook = Vue.component({
template:``
})
{name:'indexS',path:/'home/:cid',component:'myzujian',children:[
//注意，这里的path没有斜杠
{name:'book',path:'cook',component:cookbook}
]},
在大的组件中的跳转规则，this.$router.push()
this.$router.push({
name:"book"
})
六、重定向不知道什么的路径回到首页
{name:'indexS',path:/'home/:cid',component:'myzujian',children:[
//注意，这里的path没有斜杠
{name:'book',path:'cook',component:cookbook}
]},
//path：'*'表示如果匹配不到上面的路由规则的时候，那么剩下的所有路由规则走下面这条规则，redirect表示重定向
{name:'deafult',path:'*',redirect:{name:'index}}