vue基础

模板指令

条件渲染：

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-else指令通常和v-if在一起使用

列表渲染：

v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

属性绑定：

我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

表单绑定：

v-model 指令可以监听表单输入的值，同步修改

事件绑定：

监听事件：v-on:click="" 或 @click=""

事件修饰符：

事件修饰待

.once响应一次

.prevent 阻止默认事件

.stop 停止事件冒泡

表单修饰符

. number转换为数字

lazy chang 事件触发默认是input事件

按键修饰符

.up .right . bottom .left

.space .delete .enter .esc

选项

watch监听：

 watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true
    }
  }

computed计算：

computed:{
            doubleNum:function(){
                return this.num*2
            },
            priceNum:{
                get(){
                    return this.num*3
                },
                set(v){
                    this.num=v/1.5
                }
            }
        }

data:

选用选项式 API 时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。

Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上。

methods:

它包含所有方法的对象：

生命周期：

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data 和 methods 属性

created：实例已经完成了模板的编译，但是还没有挂载到页面中

beforeMount：此时已经完成了模板的翻译，但是还有完全挂载到页面中

mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

updated：实例更新完毕之后调用次函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了

beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用

destroyed：Vue 实例销毁后调用。调用后，vue 实例 指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁

组件

创建：

<template>
    <view>
        <button class="btn">{{count}}</button>
    </view>
</template>

<script>
    export default {
        name:"cutdown",
    }
</script>

导入使用：

<script>
import cutdown from './cutdown.vue'

export default {
  components: {
    cutdown
  }
}
</script>

父子传参：

父组件传递：在父组件中：通过给子组件添加自定义属性：来传递参数

<cutdown :seconds="10" :auto="true"></cutdown>

子组件接受：在子组件中：通过 props 属性来进行接收

porps:{
            seconds:{
                type:Number,
                default:1,
            },
            auto:{
                type:Boolean,
                default:false
            }
        },

子父传参

子组件：通过一个自定义事件向父组件传递参数：

tiker(){
                this.ind = setInterval(()=>{
                    this.count--;
                    if(this.count<=0){
                        // 停止倒计时
                        clearInterval(this.ind)
                        // 向父组件发送事件
                        this.$emit("stop",this.count)
                    }
                    
                },1000)
            },

父组件：通过实现这个自定义事件来接收参数

<cutdown :seconds="10" @stop="stopHd" ref="cutdown1" :auto="true"></cutdown>

跨层传参

组件跨级传参：$attrs和$listeners

组件之间的传参方式：

• props / $emit

• eventbus

• vuex

• $attrs / $listeners

• ref / $parent