Vue知识点

vue中如何声明组件
<template id="son">
 
       <div>
 
           111111
 
       </div>
 
    </template>
 
    Vue.component("son",{
 
        template:#son"
 
    })
vue中如何父组件给子组件传值
在子组件props中接收
 <div id='app'>
 
        <father formapp="来自app传值" ></father>
 
    </div>
 
Vue.component("father", {
 
            template: "#father",
 
            data() {
 
                return {
 
                    msg:'hello'
 
                }
 
            },
 
            // 接受父组件传值
 
            props:{
 
                // formapp:[String,Number],
 
                formapp:{
 
                    type:[String,Number],
 
                    default:'fromappfather'
 
                },
 
            },
 
            created() {
 
                console.log(this.formapp);
 
            },
 
        })
vue中如何子组件给父组件传值
<template id="father">
 
        <div>
 
             子传父：{{fromsondata}}
 
             <br>
 
            <son @myson="fromson"></son>
 
        </div>
 
    </template>
 
Vue.component("father", {
 
            template: "#father",
 
            data() {
 
                return {
 
                    msg:'hello',
 
                    fromsondata:""
 
                }
 
            },
 
 
 
 
 
 
 
 
 
            methods:{
 
                // data就是子组件传的值
 
                fromson(data){
 
                    console.log(data);
 
                    this.fromsondata = data
 
                }
 
            }  
 
        })
 
Vue.component("son", {
 
            template: "#son",
 
            data() {
 
                return {
 
                }
 
            },
 
            created() {
 
                // 触发子传父  this.$emit( ‘自定义事件’，传递参数)
 
                // this.$emit('myson','这是来自子组件的参数')
 
            },
 
           methods:{
 
            tofather(){
 
                // 子传父
 
                this.$emit('myson','这是来自子组件的参数')
 
            }
 
           },
 
        })
vue中如何使用插槽，两种插槽的区别
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

具名插槽 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中

<slot name=”header”></slot> <template v-slot:”header”><template>

前端路由和后端路由的区别
后端路由：不同的url对应服务器上相应的资源

前端路由：对于单页面，通过改边hash值来改变页面的切换

vue中如何使用路由
引入vue.router.js，放在vue.js后
创建vueRouter实例，new VueRouter
创建映射关系
将路由挂载到Vue实例上，和methods平级
展示<router-view></router-view>
路由跳转两种方式，声明式，函数式
<!-- 声明式跳转 -->
 
 <router-link :to="{path:'/detail',query:{courseid:103,age:18}}">详情页</router-link>
 
 
 
<router-link :to="{name:'mine',params:{urseid:103}}">个人中心</router-link>
 
<!-- 函数式 -->
 
 <button @click="todetail"> 页面跳转</button>
 
 <button @click="todetail2"> 页面跳转2</button>
路由嵌套
const router = new VueRouter({
 
            //  3.创建映射关系
 
            routes: [
 
                // 重定向
 
                {
 
                    path: '/',
 
                    redirect: "/index"
 
                },
 
 
 
                {
 
                    // 路径
 
                    path: '/index',
 
                    // 对应组件
 
                    component: index,
 
 
 
                    // 嵌套
 
                    children: [
 
                        // 不加/  注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。
 
                        {
 
                            path: "other",
 
                            component: other
 
                        }
 
                    ]
 
                },
 
                {
 
                    path: "/detail",
 
                    component: detail
 
                }
 
            ]
 
 
 
        })
路由高亮
.router-link-active 默认样式

自定义 linkActiveClass 在new VueRouter实例中

路由重定向

 // 重定向
 
 {
 
       path: '/',
 
       redirect: "/index"
 
 },
ref的使用
获取DOM，操作DOM

给DOM元素加ref=“自己起的名”

<div id="box" ref="refdiv"> haha</div>
 
this.$refs.refdiv.style.color = 'red'
获取组件，拿到组件上的数据和方法

<son id="son2" ref="son2"></son>
 
this.$refs.son2.log1()
 
son.component下methods:{
 
        log1(){
 
           console.log(1);
 
         }
 
   }
最早在mounted中 this.$refs.起的名

属性计算，属性监听
watch: {         

// newVal: 当前最新值
// oldVal: 上一刻的值
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }

watch: {
 
                "firstname": function (newvalue,oldvalue) {
 
                    // console.log(newvalue);
 
                    // console.log(oldvalue);
 
                    this.name = this.firstname + this.lastname
 
                },
 
                "lastname": function (newvalue,oldvalue) {
 
                    this.name = this.firstname + this.lastname
 
                }
 
            },
Watch 监听，和methods平级

属性计算 不能和data里面数据冲突
 
 // 计算属性中所依赖的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
 
            computed:{
 
                name:{
 
                    get:function(){
 
                        return this.firstname + '-' + this.lastname
 
                    },
 
                    // 只有修改自身时会触发
 
                    set:function(value){
 
                        console.log(value);
 
                       this.firstname =  value.split("-")[0]
 
                       this.lastname =  value.split("-")[1]
 
                    }
 
                }
 
            }
vue-cli使用，如何创建和启动项目，项目文件结构

 

vuex状态刷新重置问题如何解决

 

什么是路由守卫，如何配置
主要用来通过跳转或取消的方式守卫导航。