Vue-1 基础

用户2881114485245
70 阅读2分钟

  • 指令 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

    <style>
    [v-clock]{display:none}
</style>
<div v-clock>{{message}}</div>

  • 修饰符

            事件修饰符   prevent     <form @submit.prevent="onSubmit()" >
                               <a href="#" @click.prevent="">
                    stop       <div>
                                  <button @click.stop=>按钮</button>
                               </div>
                    self
                    capture
​
        表单       number    <input type="text"  v-model.number=""
                   trim
                   lazy    

  • 计算属性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获取子组件的数据

      <h2 ref="title">{{message}}</h2>
const h2Ele = this.$refs.title

  • 组件Component

    1. 组件和模块化 封装

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

      //父
<!-- 自定义属性name,绑定值username age -->
<button-counter :name="username" age="20"></button-counter>
//子
props:['name','age']

    3. 子->父:

      • $emit + v-on

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

      • $refs

         1.通过this.$refs.组件定义的ref值    获取组件的节点
2.通过 节点.数值名或方法名  访问节点的数据或方法
<h2 ref="title">{{message}}</h2>
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 见下文

  • 插槽

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

    • 默认插槽

       	//父
	<son>
      <template><h5>我是无名字的slot</h5></template>
    </son>
	//子
    <slot></slot>

    • 具名插槽

          <son>
      <template v-slot:head><h5>我是名字为head的slot</h5></template>
    </son>

    <slot name='head'></slot>

    • 作用域插槽

      	<son>
      <template v-slot:paramsslot="myslot">
        <div>{{ myslot.msg }}</div>
      </template>
    </son>
    
        <slot name='paramsslot' :msg='sonmsg'></slot>

  • 过滤器

    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()

    <div id="app">
    <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello',
        },
    })

    // 更新响应式数据message, 显示界面是一个异步的过程!
    vm.message = 'world'

    vm.$nextTick(function () {
        // vm响应式数据更新完成后执行回调函数
        // 获取节点数据
        let msg = document.querySelector('h2').innerHTML
        console.log('msg ', msg)
    })
</script>

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

    <div>
    <input type="text" placeholder="请输入内容" />
</div>

<script>
    const inputEle = document.querySelector('input')
    // inputEle.addEventListener('input', function () {
    // 	console.log('value : ', this.value)
    // })

    /**
			 * 防抖
			 *   触发高频事件n秒内只执行一次，如果n秒重新触发，重新计算时间
			 *    input    500
			 *     h             显示出来
			 *     he
			 */
    const debounce = (fn, time) => {
        let timerObj = null // 定时器对象
        return function () {
            // 重新计算时间: 清除定时器，启动新的定时器任务
            clearTimeout(timerObj)
            timerObj = setTimeout(function () {
                fn()
            }, time)
        }
    }

    function search(){
        console.log('>>>>>',inputEle.value);
    }
    // input输入事件,500毫秒之后触发调用执行search()
    inputEle.addEventListener('input',debounce(search,500))
</script>

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

    <div>
    <button>Click me</button>
</div>

<script>
    const btn = document.querySelector('button')
    // btn.addEventListener('click',function(){
    //     console.log('登录调用，获取数据');
    // })

    /*
          节流
             触发高频事件n秒内，只执行一次, n秒内重复触，都不执行.

        */
    const throttle = (fn,time)=>{
        let flag = true  // 开关变量, true打开，false关闭
        return function(){
            //判断开关变量flag是否打开,如果是关闭状态不向下执行
            if(!flag) return
            // 关闭开关
            flag = false
            setTimeout(()=>{
                fn()
                flag = true  //打开
            },time)
        }
    }
    function login(){
        console.log('登录调用，获取数据');
    }
    btn.addEventListener('click',throttle(login,500))
</script>
avatar
文章
阅读
粉丝