Vue-1 核心基础

• 指令
  v-html
  v-text
  v-bind/:
  v-on/@
  v-if/v-show
  v-for&:key

          使用javascript代码操作html元素，操作内容，样式，属性，事件
            - 操作内容
               原生: 获取h2, innerHTML  innerText    $().html()  $().text()
               vue: 1. {{数据}}  模板插件
                      指令 (Directives) 是带有 v- 前缀的特殊属性
                    2. v-html 
                    3. v-text
           - 操作属性
               原生: setAttribute(属性，属性值)  getAttribute(属性)
               vue:  v-bind
  
           - 操作样式
               原生: style.样式名   className   classList.add()
               vue:  值：字符串  对象  数组
  
           - 操作事件
               原生:  绑定  赋值值， 监听
               vue:  v-on:事件名=事件处理函数   
  

• v-model

  @input="conent = event.target.value"  输入框 -> 数据
  :value = "content"                    输入框 <- 数据
  

• v-clock

  
  {{message}}
  

• 修饰符

          事件修饰符   prevent     
  
                                 
                      stop       
  
                                    按钮
                                 
                      self
                      capture
  
          表单修饰符       number    

• 计算属性computed和侦听watch

  1. 计算属性 computed

     computed:{
         //完整写法
         fullName:{
             get(){
                 ...
             },
             set(){
                 ...
             }
         }
         //简写(只有get的时候)
           getNumber(){
               ...
           }
     
     }
     

  2. 侦听属性 watch

         watch:{
             //完整写法
             number:{
                 deep:true,//深度侦听
                 immediate:true,//程序启动立即侦听
                 handler(newVal,oldVal){
                     ...
                 }
             }
         }
     

• vue生命周期

  1. 生命周期：创建、运行、销毁所经历的一系列过程、强调时间段

  2. 生命周期钩子函数：强调时间点

  3. 生命周期分类

     创建
     	beforecreate 创建vue实例 
         created data、methods初始化 (异步请求数据)
         beforemount 模板编译完成，但未挂载到页面上
         mounted 模板挂载到页面上，初始化完成()
     
     运行
     	beforeupdate 数据已更新，页面未更新
     	updated 数据、页面均更新
     
     销毁
     	beforeDestry 组件销毁前执行(清除定时器,垃圾回收)
     	destryed 销毁完成
     

• vue操作dom节点

  1. 给元素设置ref属性

  2. 通过$refs.ref属性值 获取dom,可以通过该dom获取子组件的数据

     {{message}}
     const h2Ele = this.$refs.title
     

• 组件Component

  1. 组件和模块化 封装

  2. 组件通信
     父->子:props

     //父
     
     
     //子
     props:['name','age']
     

  3. 子->父:

     • $emit + v-on

       //1.子组件通过this.$emit('自定义事件名',传递的参数)
       //2.子组件绑定自定义事件，触发父组件的函数(不带括号)
       //3.在父组件函数内部，通过传递的参数名接受子组件参数
       //父
       
       getCounter(value){
           console.log('父组件接收到子组件触发的事件')
       	console.log('收到的值:', value)
       }
       //子
       //在某事件中触发，如点击事件
       this.$emit('on-counter',this.counter)
       

     • $refs

        1.通过this.$refs.组件定义的ref值    获取组件的节点
       2.通过 节点.数值名或方法名  访问节点的数据或方法
       {{message}}
       const h2Ele = this.$refs.title
       

  4. 全局事件总线 $bus 兄弟间通信

         main.js中      
             Vue.protootype.$bus=this
         发送数据组件    
             this.$bus.$emit=('name',this.name)
         接收           
             this.$bus.$on('name',data=>console.log(data))
     

  5. vuex 见下文

• 插槽

        概念：子组件中，提供给父组件使用的一个占位符，用表示
        作用：在使用子组件时，可以动态更新子组件内容
        用法：
          父组件：在父组件写子组件的位置填写内容
          子组件：在组件中使用占位符
  

  • 默认插槽

     	//父
    	
          
        
    	//子
        
    

  • 具名插槽

  • 作用域插槽

• 过滤器

  main.js
  // 定义全局过滤器filter   new Date()  yyyy年mm月dd日
  Vue.filter('formatTime',function(data){
       return `${data.getFullYear()}年${data.getMonth()+1}月${data.getDate()}日 ${data.getHours()}时:${data.getMinutes()}分:${data.getSeconds()}秒`
  })
  
  App.vue
    data() {
      return {
      };
    },
    filters: {
      capitalize: function (value) {
        if (!value) return "";
        value = value.toString();
        console.log("filter>>>");
        return value.charAt(0).toUpperCase() + value.slice(1);
      },
    }
  

• nextTickt()

  
      
  {{message}}
  
  
  
  
  

• 防抖 输入框 n秒后只执行一次

• 节流 闪现 n秒内只执行一次

  
      Click me