vue(笔记)

ref属性:

    1.被用来给元素或子组件注册引用信息(id的替代者)

    2.应用在htm1标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)

    3.使用方式:

    打标识:<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>获取:this.$refs.xxx

<template>

  <div>

      <h1 v-text=msg ref="title"></h1>

      <button @click="showDOM" ref="btn">点我输出上分DOM元素</button>

      <School ref="sch"/>

  </div>

</template>

<script>

    //引入School组件

    import School from './components/School.vue'

    export default {

        name:'App',

        components:{School},

        data() {

            return {

                msg:'欢迎学习Vue!'

            }

        },

        methods: {

            showDOM(){

                console.log(this.$refs.title) // 真实DOM元素

                console.log(this.$refs.btn) // 真实DOM元素

                console.log(this.$refs.sch) // School组件的实例对象(vc)

            }

        },

    }

配置项props

    功能:让组件接收外部传过来的数据

(1).传递数据:

    <Demo name="xxx"/>

(2).接收数据:

    第一种方式(只接收): props:['name']

    第二种方式(限制类型): props:{name:String}

    第三种方式(限制类型、限制必要性、指定默认值):

props:{ name:

        {type:string，//name的类型是字符串

         required:true，//name是必要的

       default:"老王"//默认值

    备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，

    若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<template>

  <div>

      <Student name="杨紫" :age="29" sex="女"/>

  </div>

</template>

<script>

// 引入School组件

import Student from './components/Student.vue'

export default {

  name: 'App',

  components: { Student }

}

</script>

<template>

  <div>

    <h1>{{msg}}</h1>

      <h2>学生姓名：{{name}}</h2>

      <h2>学生年龄: {{myAge+1}}</h2>

      <h2>学生性别: {{sex}}</h2>

      <button @click="updateAge">点击修改年龄</button>

  </div>

</template>

<script>

export default {

  name: 'Student',

  data () {

    return {

      msg:'我是一个爱学习的人',

      myAge:this.age

    }

  },

  methods: {

    updateAge(){

      this. myAge++

    }

  },

   props:['name','age','sex'] // 简单接收

  // 接收的同时对数据进行类型限制

 /* props:{

    name:String,

    age:Number,

    sex:String

  } */

  // 接收的同时对数据: 进行类型限制+默认值的指定+必要性的限制

 /* props:{

    name:{

      type:String, //name的类型是字符串

      required:true //name是必要的

    },

    age:{

      type:String,

      default:99 // 默认值

    },

    sex:{

      type:String,

      required:true

    }

  } */

}

</script>

2.props适用于:

    (1).父组件==> 子组件通信

    (2).子组件==>父组件通信(要求父先给子一个函数)

    3.使用v-model时要切记:v-model绑定的值不能是props传过来的值，因为props是不可以修改的!

    4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

 mixin(混入)

    功能:可以把多个组件共用的配置提取成一个混入对象使用方式:

    第一步定义混合，

export var mixin = {

    methods: {

        showName(){

          alert(this.name)

        }

      },

      mounted() {

          console.log('你好呀')

      },

}

    第二步使用混入，例如:

    (1)全局混入:Vue.mixin(xxx)(2).局部混入:mixins:['xxx']

插件

    功能:用于增强Vue

    本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

    定义插件:

export default {

    install(Vue){

       //全局过滤器

        Vue.filter('mySlice',function(value){

        return value.slice(0,4)

     })

      //定义全局指令

       Vue.directive('fbind',{

            // 指令与元素成功绑定时

            bind(element,binding){

            element.value = binding.value

            },

            // 指令所在元素被插入页面时

            inserted(element,binding){

            element.focus()

             },

            // 指令所在的模板被重新解析时

            updated(element,binding) {

                element.value = binding.value

            }

        })

   // 自定义混入

   Vue.mixin({

      data() {

          return {

              x:100,

              y:200

          }

      },

   })

   //给Vue原型上添加一个方法（vm和vc就都能用了）

   Vue.prototype.hello = ()=>{alert('你好呀')}

  }

}

 scoped样式

    作用：让样式在局部生效，防止冲突

    写法：<style scoped> </style>

 webStorage

    1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

    2.浏览器端通过 Window.sessionStorage和WindowlocalStorage属性来实现本地存储机制。

    3.相关API:

    1. xxxxxStorage.setItem('key', 'value');

    该方法接受一个键和值作为参数，会把键值对添加到存诸中，如果键名存在，则更新其对应的值。

    2. xxxxxStorage.getItem('person');

    该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

    该方法接受一个键名作为参数，并把该键名从存诸中删除。

    4. xxxxxStorage.clear()

    该方法会清空存储中的所有数据。

    4.备注:

    1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。

    2.LocalStorage存储的内容，需要手动清除才会消失，

    3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null。

    4.JSON.parse(null)的结果依然是null。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>localStorage</title>

</head>

<body>

    <h2>localStorage</h2>

    <button οnclick="savaData()">点我保存一个数据</button>

    <button οnclick="readData()">点我读取一个数据</button>

    <button οnclick="deleteData()">点我删除一个数据</button>

    <button οnclick="deleteAllData()">点我清空数据</button>

    <script>

        var p = {name:'yz',age:29}

        function savaData(){

            localStorage.setItem('msg','hello!!!')

            localStorage.setItem('person',JSON.stringify(p))

        }

        function readData(){

            console.log(localStorage.getItem('msg'))

            var result = localStorage.getItem('preson')

            console.log(JSON.parse(result));

        }

        function deleteData(){

            localStorage.removeItem('msg')

        }

        function deleteAllData(){

            localStorage.clear()

        }

    </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>sessionStorage</title>

</head>

<body>

    <h2>sessionStorage</h2>

    <button οnclick="savaData()">点我保存一个数据</button>

    <button οnclick="readData()">点我读取一个数据</button>

    <button οnclick="deleteData()">点我删除一个数据</button>

    <button οnclick="deleteAllData()">点我清空数据</button>

    <script>

        var p = {name:'yz',age:29}

        function savaData(){

            sessionStorage.setItem('msg','hello!!!')

            sessionStorage.setItem('person',JSON.stringify(p))

        }

        function readData(){

            console.log(sessionStorage.getItem('msg'))

            var result = sessionStorage.getItem('preson')

            console.log(JSON.parse(result));

        }

        function deleteData(){

            sessionStorage.removeItem('msg')

        }

        function deleteAllData(){

            sessionStorage.clear()

        }

    </script>

</body>

</html>

组件的自定义事件

    1.组件间通信的方式，适用于:子组件传父组件

    2.使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。

    3.绑定自定义事件:

    1.第一种方式，在父组件中:<Demo@atguigu="test">或<Demo v-on:atguigu="test"/>

    2.第二种方式，在父组件中:

    <Demo ref="demo"/>.....

    mounted(){

    this.$refs.xxx.$on('atguigu' this.test)

    }

    3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

    4.触发自定义事件:this.$emit('atguigu',数据)

    5.解绑自定义事件this.$off('atguigu')

    6.组件上也可以绑定原生DOM事件，需要使用nativ修饰符

    7.注意:通过this.$refs.xxx.$on(atguigu’，回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

全局事件总线(GlobalEventBus)

1.一种组件间通信的方式，适用于任意组件间通信。

 2.安装全局事件总线:

// 引入Vue

import Vue from 'vue'

// 引入App

import App from './App.vue'

// 关闭Vue的生产提示

Vue.config.productionTip = false

// 创建vm

new Vue({

  el: '#app',

  render: h => h(App),

  beforeCreate() {

    Vue.prototype.$bus = this //安装全局事件总线

  }

})

3.使用事件总线:

1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身，

<template>

  <div class="School">

      <h2>学校名称：{{name}}</h2>

      <h2>学校地址: {{address}}</h2>

  </div>

</template>

<script>

export default {

  name: 'School',

  data () {

    return {

      name:'尚硅谷',

      address:'北京'

    }

  },

  mounted() {

   // console.log('School',this)

   this.$bus.$on('hello',(data)=>{

      console.log('我是School组件,收到了数据',data);

    })

  },

// 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

  beforeDestroy() {

    this.$bus.$off('hello')

  }

}

</script>

<template>

  <div class="Student">

      <h2>学生姓名：{{name}}</h2>

      <h2>学生性别: {{sex}}</h2>

      <button @click="sendStudentName">把学生名给School组件</button>

  </div>

</template>

<script>

export default {

  name: 'Student',

  data () {

    return {

      name:'杨紫',

      sex:'女',

    }

  },

    mounted() {

    //console.log('Student',this.x)

  },

  methods:{

      sendStudentName(){

                //提供数据

          this.$bus.$emit('hello',this.name)

      }

  }

}

</script>

消息订阅与发布(pubsub)

    1.一种组件间通信的方式，适用于任意组件间通信。

    2.使用步骤:

    1.安装pubsub:npm i pubsub-js

    2.引入: import pubsub from 'pubsub-js'

    3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

    methods(){

    demo(data){......}

    }

    ......

    mounted() {

    this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息}

    4.提供数据:pubsub.publish('xxx',数据)

    5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去<span sty1e="coor:red">取消订阅。</span>

nextTick

    1.语法:this.$nextTick(回调函数)

    2.作用:在下一次DOM更新结束后执行其指定的回调。

    3.什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

动画样式

    3.写法:

    准备好样式:

    .元素进入的样式:

    1.v-enter:进入的起点

    2.v-enter-active进入过程中

    3.v-enter-to:进入的终点

    .元素离开的样式:

    1.v-leave:离开的起点

    2.v-leave-active离开过程中

    3.v-leave-to:离开的终点

<style scoped>

    h1{

        background-color: orange;

    }

    /* 进入的起点 离开的终点*/

    .hello-enter,.hello-leave-to{

       transform: translateX(-100%);

    }

    /* 进入的过程 离开的过程*/

    .hello-enter-active,.hello-leave-active{

        transition: 0.5s linear;

    }

    /* 进入的终点 离开的起点*/

    .hello-enter-to,.hello-leave{

        transform: translateX(0);

    }

</style>

    2.使用<transition>包裹要过度的元素，并配置name属性:

    <transition name="hello">

    <h1 v-show="isShow">你好啊!</h1></transition>

    3.备注:若有多个元素需要过度，则需要使用: <transition-group>，且每个元素都要指定key值。

 vue脚手架配置代理

    方法一

    在vueconfigjs中添加如下配置:

    devServer:{

    proxy:"http://localhost:5000"

    说明:

    1.优点:配置简单，请求资源时直接发给前端(8080)即可。

    2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。

    3工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先应配前端资源)

    方法二

    编写vueconfig.js配置具体代理规则:

    module.exports ={

    devServer:{

        proxy:{

        "/api1':{// 匹配所有以'/api1'开头的请求路径

        target:'http://localhost:5000',// 代理目标的基础路径 changeOrigin: true,

        pathRewrite:{'^/api1':''}

        }，

        '/api2':{// 匹配所有以'/api2'开头的请求路径

        target:'http://localhost:5001',// 代理目标的基础路径 changeOrigin: true,

        pathRewrite:{'^/api2':''}

            }

         }

      }

    }

module.exports = {

  pages: {

    index: {

      // 入口

      entry: 'src/main.js'

    }

  },

  lintOnSave: false, // 关闭语法检查

  //开启代理服务器(方式一)

 /* devServer: {

    Proxy:'http://localhost:5000'

  }, */

  //开启代理服务器(方式二)

 /* devServer:{

    Proxy:{

      '/atguigu': {

        target:'<http://localhost:5000>',

        pathRewrite:{'^/atguigu':''},

       // ws:true, //用于支持websocket

       // changeOrigin:true //用于控制请求头中的host值

      },

     /* '/foo': {

        target:'<other_url>'

      }*/

 /*  }

  },

  '/demo': {

    target:'<http://localhost:5001>',

    pathRewrite:{'^/demo':''},

   // ws:true, //用于支持websocket

   // changeOrigin:true //用于控制请求头中的host值

  } */

}

    changeOrigin设置为true时，服务器收到的请求头中的host为:localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为:localhost:8080 changeOrigin默认值为true

    说明:

    1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。

    2.缺点:配置略微繁琐，请求资源时必须加前缀。

<template>

  <div>

    <button @click="getStudents">获取学生信息</button>

    <button @click="getCars">获取汽车信息</button>          

  </div>

</template>

<script>

import axios from 'axios'

export default {

  name: 'App',

  methods:{

    getStudents(){

      axios.get('http://localhost:8080/atguigu/test.txt').then(

        respons => {

          console.log('请求成功了',response.data)

        },

        error => {

           console.log('请求失败了',error.message)

        }

      )

    },

    getCars(){

      axios.get('http://localhost:8080/demo/test.txt').then(

        respons => {

          console.log('请求成功了',response.data)

        },

        error => {

           console.log('请求失败了',error.message)

        }

      )

    }

  }

}

</script>

  插槽

    1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式 适用于父组件===>子组件。

    2.分类:默认插槽、具名插槽、作用域插槽

   

    3.使用方式:

    1.默认插槽:

    父组件中:

        <Category>

            <div>html结构1</div>

        </Category>

    子组件中:

    <template>

        <div>

        <!-- 定义插槽 -->

            <slot>插槽默认内容...</slot>

        </div>

    </template>

    2.具名插槽:

    父组件中:

    <Category>

        <template slot="center">

            <div>html结构1</div>

        </template>

        <template v-slot:footer>

            <div>html结构2</div>

        </template>

    </Category>

  子组件中:

    <template>

    <div>

        <!-- 定义插槽 -->

            <slot name="center">插槽默认内容...</slot>

            <slot name="footer">插槽默认内容...</slot>

        </div>

    </template>

    3.作用域插槽:

    1.理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

<template>

  <div class="category">

      <h3>{{title}}分类</h3>

      <slot :games="games" msg="hello"></slot>

  </div>

</template>

<script>

    export default {

        name:'Category',

        props:['title'],

        data() {

            return {

            games:['红色警戒','红色警戒','红色警戒']

            }

        }

    }

</script>

<template>

    <div class="container">

      <Category title="游戏">

        <template scope="atguigu">      

          <ul>

            <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>

          </ul>

        </template>

      </Category>

      <Category title="游戏">

        <template scope="{games}">

          <ol>

            <li v-for="(g,index) in games" :key="index">{{g}}</li>

          </ol>

        </template>

      </Category>

      <Category title="游戏">

        <template scope="{games}">

          <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>

        </template>

      </Category>

    </div>

</template>

<script>

import Category from './components/Category'

export default {

  name: 'App',

  components:{Category},

}

</script>

理解vuex

vuex是什么←

    1.概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中

    多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适

    用于任意组件间通信。←

    2. Github地址:https://github.com/vuejs/vuex

    5.1.2什么时候使用Vuexe

    1.多个组件依赖于同一状态

    2.来自不同组件的行为需要变更同一状态

Vuex

1.概念

    在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。

    2.何时使用?

    多个组件需要共享数据时

    3.搭建vuex环境

#    1.创建文件:src/store/index.js

    //引入Vue核心库

    import Vue from 'vue

    //引入Vuex

    import Vuex from 'vuex'

    //应用Vuex插件

    Vue.use(Vuex)

    //准备actions对象-响应组件中用户的动作

    const actions ={}

    //准备mutations对象-修改state中的数据

    const mutations ={}

    //准备state对象--保存具体的数据

    const state = {}

    //创建并暴露store

    export default new Vuex.Store({

        actions, mutations,

        state

    })

 2.在main.js中创建vm时传入store配置项

    //引入store

    import store from './store"

    ...

    //创建vm

    new Vue({

        el:'#app',

        render: h => h(App),

        store

    })

基本使用

1.初始化数据、配置actions 配置mutations，操作文件store.js

    //引入Vue核心库

    import Vue from 'vue'

    //引入Vuex

    import Vuex from 'vuex'

    //引用Vuex

    Vue.use(Vuex)

    const actions = {

    //响应组件中加的动作

    jia(context,value){

        // console.log("actions中的jia被调用了',ministore,value) context.commit('JIA',value)

        }，

    }

    const mutations = {

    //执行加

    JIA(state,value){

    // console.log('mutations中的JIA被调用了',state,value)

        state.sum += value

    }

    //初始化数据

    const state = {

        sum:0

    }

    //创建并暴露store

    export default new Vuex.Store({

        actions,

        mutations,  

        state,

    })

   mputed:{

        //借助mapState生成计算属性:sum、school、subject(对象写法)

        ...mapState({sum:'sum' school:'school',subject:'subject'l),

        2.组件中读取vuex中的数据:$store.state.sum 

  3.组件中修改vuex中的数据:$storedispatch(action中的方法名,数据)或   $store.commit(mutations中的方法名',数据)

    备注:若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

getters的使用

    1.概念:当state中的数据需要经过加工后再使用时，可以使用getters加工。

    2.在store.js中追加getters配置

    const getters = {

        bigSum(state){

            return state.sum * 10

        }

    }

    //创建并暴露store

    export default new Vuex.store({

        ......

        getters

    })

    3.组件中读取数据: $store.getters.bigSum

.四个map方法的使用

 1.mapState方法:用于帮助我们映射state中的数据为计算属性

computed:{

        //借助mapState生成计算属性:sum、school、subject(数组写法)...mapstate(['sum','school', 'subject']),

     }，

 2.mapGetters方法:用于帮助我们映射getters中的数据为计算属性

computed:{

        //借助mapGetters生成计算属性:bigSum(对象写法)

    ...mapGetters({bigSum:"bigSum'}),

        //借助mapGetters生成计算属性:bigSum(数组写法)

     ...mapGetters(['bigSum'])

       },

    3.mapActions方法:用于帮助我们生成与actions对话的方法，

    即:包含$store.dispatch(xxx)的函数

    methods:{

        //靠mapActions生成:incrementOdd、incrementWait(对象形式)

      ...mapActions({incrementOdd:jiaOdd',incrementWait:'jiaWait'})

        //靠mapActions生成:incrementOdd、incrementWait(数组形式)

     ...mapActions(['jiaOdd','jiaWait'])

    }

模块化+命名空间

1.目的:让代码更好维护，让多种数据分类更加明确。

修改 store.js

        const countAbout = {

            namespaced:true, //开启命名空间

            state:{x:1}，

            mutations:{ .…. },

            actions:{ ... },

            getters:{

                bigSum(state){

                    return state.sum * 10

            }

        }

     }

    const personAbout={

        namespaced:true,//开启命名空间

        state:{ ... },

        mutations:{ ... }，

        actions:{ ... }

      }

    const store = new Vuex.Store({

        modules:{

            countAbout,

            personAbout

    })  

  3.开启命名空间后，组件中读取state数据:

    //方式一:自己直接读取

    this.$store.state.personAbout.list//方式二:借助mapState读取:

    ...mapState('countAbout',['sum', 'school', 'subject']).

   4.开启命名空间后，组件中读取getters数据:

    //方式一:自己直接读取

    this.$store.getters["personAbout/firstPersonName']

    //方式二:借助mapGetters读取:

    ...mapGetters('countAbout',['bigSum'])

   5.开启命名空间后，组件中调用dispatch

    //方式一:自己直接dispatch

    this.$store.dispatch('personAbout/addPersonWang'person)

    //方式二:借助mapActions:

    ...mapActions('countAbout’,{incrementOdd:'jiaOdd' incrementWait: 'jiaWait'})

    6.开启命名空间后，组件中调用commit

    //方式一:自己直接commit

    this.$store.commit(personAbout/ADD PERSON'person)

    //方式二:借助mapMutations:

    ...mapMutations('countAbout’,{increment:"JIA',decrement:'JIAN'}),

VueUI组件库

1移动端常用Ul组件库

    1. Vant https://youzan.github.io/vant

    2.Cube Ul https://didi.github.io/cube-ui

    3.Mint Ul http://mint-ui.github.io

2.PC端常用UI组件库

    1. Element UI https://element.eleme.cn

    2. IView Ul https://www.iviewui.com