vue知识点

<!-- data中定义classRed -->
        <div :class='classRed'>:class='classRed'</div>
        <!-- 数组 -->
        <div :class=[classRed]>:class=[classRed]</div>
        <!-- true/false判断 -->
        <div :class={boxRed:true}>:class={boxRed:true}</div>
        <!-- 三目 -->
        <div :class='1==1?"boxRed":"box"'>:class='1==1?"boxRed":"box"'</div>
        <!-- 调用函数 -->
        <div :class=getClass()>:class=getClass()</div>
    data: {
            classRed:"boxRed"
        },
        methods: {
            getClass(){
                return "boxRed"
            }
        },

:style = ‘fs50’
:style = ‘{fontSize:fs40}’
:style = ‘[fs50]’
:style = ‘fontSize’
   data:{
         fs50:{
    　　 fontSize:”50px”
　　　},
　　　　　fs40:”40px”,
　　　　　fontSize:’60px’
     }

beforeCreate 拿不到data和methods，一般用于重定向
created 能拿到data和methods，一般用于接口请求，数据初始化
beforeMount dom元素渲染前，此时页面数据尚未渲染
mounted dom元素渲染完毕后，一些依靠dom的操作在此进行，例如swiper，echarts
beforeUpdate 页面更新前
updated 页面更新后
beforeDestroy 销毁前，一般用于清除计时器、事件监听和属性监听
destroyed 销毁后

Get：
this.$http.get(‘url’).then(res => {})
post:
         // 参数1： 要请求的URL地址
        // 参数2： 要发送的数据对象
        // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(‘url’,请求体,{emulateJSON:true}).then(res => {})

    一、var first = Vue.extend({template:'内容'})
                   Vue.component('组件名',组件内容)
   二、Vue.component('组件名'，{
                   template:'内容'})
   三、  <script type='template' id="third">
           <h1>第三种方式</h1>
           </script>
             Vue.component('组件名'，{template:'#third'})
    四、<template id="forth">
             <h1>第四种方式</h1>
            </template>
          Vue.component('组件名'，{template:'#forth'})

          <div id='father'>

                            <son name='ls'></son>

                   </div>

  props:{ name:String,

                name:[String,Number],

                name:{

　　　　　　　　　　　　type:String

　　　　　　　　　　　　default:‘’（默认值）

　　　　　　　　　　}}

1、子组件created中this.$emit两个参数(要传给谁（自定义事件类型）,要传的信息)

         this.$emit('send-msg-to-father',this.sonmsg)

2、@定义一个方法,用于接收son传过来的信息

         <son @send-msg-to-father='getsonmsg'></son>

3、得到son传过来的信息，固定参数data

         getsonmsg(data){}

4、父元素data中定义数据用来接收使用来自son的信息

         usesonmsg:''

5、将得到的data值（这里的data是自定义方法中的data）传给data中定义好的数据中使用

         this.usesonmsg = data

6、使用son传来的信息

         {{usesonmsg}}

<slot></slot>
具名插槽

<slot name='top'></slot>

具名插槽使用

 <template v-slot:top>
           <div class="red">
                    具名插槽上
           </div>
  </template>

         1、引入VueRouter放在Vue引入之下
         2、创建路由实例
         let mine = {template: '#index'}
        // 2、创建路由实例
        const router = new VueRouter({
                   // 3、创建映射关系
            routes: [
                    path: '/index',
                    component: index
                }
            ],
        })
　　　　4、建立联系，将路由挂在在vue实例上
　　　　　　const vm = new Vue({
        　　    el: '#app',
         　　   data: {
       　　     },
          　　  // 4建立联系，将路由挂载在vue实例上
        　　    // router:router,
        　　    // 简写router
        　　    router,
     　　   })
         5、展示位置/声明组件

      声明式
<router-link to="/father">声明式跳转</router-link>
         函数式
复制代码
<button @click="toFather">跳转到father</button>
toFather() {
        this.$router.push('/father')
}

//声名式query传参
<router-link :to='{path:"/father/son",query:{courseId:103}}'>路由嵌套</router-link>
//声明式params传参 name与声明routes中name一致，且params传参时浏览器url必须加入参数才能正常显示
<router-link :to='{name:"Son",params:{courseId:105,courseTitle:"从入门到如土"}}'>跳转son</router-link>
//函数式query传参
// this.$router.push({path:"/home",query:{courseId:200,title:300}})
//函数式params传参
this.$router.push({ name: "Home", params: { courseId: 200, title: 300 } })

<template id="home">
       <div>
           首页
           <button @click="tologin">点我跳转</button></button>
           <router-view></router-view>
       </div>
   </template>
        const router = new VueRouter({
           //  3.创建映射关系
           routes: [
               {
                   path: "/userInfo",
                   component: userInfo
               }, {
                   path: "/login/:userid/:name",
                   component: login,
                   name: "namelogin"
               }, {
                   path: "/home",
                   component: home,
                   children: [{
                       path: "son",
                       component: son
                   }]
               },
               // 重定向
               {
                   path: "/",
                   redirect: "/home"
               }
           ],
           linkActiveClass: "myactive"
       })

// 重定向
               {
                   path: "/",
                   redirect: "/home"
               }

　// 计算属性  不能和data中数据重复
            computed: {
                // 默认只有getter
                allname(){
                    return this.firstname + '-' + this.lastname
                }
            }

　module.exports = {
  　　  devServer: {//不设置 重写  http://wkt.myhope365.com/weChat
   　　     //设置重写   http://wkt.myhope365.com
     　　   proxy: {
      　　      //代理名称
        　　    '/course-api': {     //这里最好有一个 /
             　　   target: 'http://wkt.myhope365.com',  // 后台接口域名
            　　    changeOrigin: true,  //是否跨域
           　　     //路径重写
             　　   pathRewrite:{
              　　      '^/course-api':''
              　　  }
          　　  },
       　　 }
    　　}
　　}

devServer:{
         proxy:{
                   ‘/api’ （代理名称）:{              
                            target:        后端接口域名
                            changeOrigin:true 什么跨域
                            pathRewrite:{‘^/api’:’’}} 路径重写
}