vue小复习2

模板指令

条件渲染：

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