模板指令
条件渲染
v-if#
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
v-else#
你也可以使用 v-else 为 v-if 添加一个“else 区块”
<button @click="sayhi = !sayhai">点击</button>
<h1 v-if="sayhai">哈喽!</h1>
<h1 v-else>再见!</h1>
v-else-if#
顾名思义,v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用:和 v-else 类似,一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。
<view v-if="score>80">
优秀
</view>
<view v-else-if="socre>70">
良好
</view>
<view v-else>不及格</view>
列表渲染
v-for#
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法,其中 items 是源数据的数组,而 item 是迭代项的别名:
data() {
return {
items: {1,2,3,4}
}
}
<view v-for="item in items">{{item}}</view>
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。
<view v-for="(item,index) in ' i love china' " :key="index">
{{item}}
</view>
属性绑定
双向绑定
<view class="title">
双向绑定
</view>
<switch type="checkbox" :checked="ischeck" @change="ischeck=$event.detail.value" />
<button :disabled="!ischeck" type="warn">提交</button>
表单绑定
<input :value="单向绑定" />
<input v-modle="双向绑定" />
<input @change="$event.detail.value" />
事件绑定
<button @click="showMsg" type="primary">事件响应不带()</button>
<button @click="showMsg()">事件响应带() </button>
<button @click="showMsg($event)">事件响应带($event)</button>
<button @click="showMsg($event,'38妇女节快乐')">事件响应带($event)</button>
methods: {
showMsg(e,msg='春天到啦'){
console.log(e,'事件参数');
uni.showToast({
title:msg
})
}
}
修饰符
事件修饰符
.once响应一次
.prevent 阻止默认事件
.stop 停止事件冒泡
表单修饰符
. number转换为数字
lazy chang 事件触发默认是input事件
按键修饰符
.up .right . bottom .left
.space .delete .enter .esc
<button @click.one="biaobai">你好 </button>
选项
export default {
//存放数据
data(){
return {
}
},
//监听
watch:{},
//函数方法
methods:{},
//计算
computed:{}
}
生命周期
创建前后
beforeCreate | 在实例初始化之后被调用 |
created | 在实例创建完成后被立即调用 |
挂载前后
beforeMount | 在挂载开始之前被调用。 |
mounted | 挂载到实例上去之后调用。 |
更新前后
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 |
卸载前后
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。 |
destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 |
组件
创建
在app根目录新建components文件夹,右键新建一个组件
导入
在需要的页面进行导入
import cut from '@/components/cut/cut.vue'
export default{
//注册组件
components:{cut},
}
//使用组件
<view class="">
<cut :seconds="10" ref="cut1" :auto="true"></cut>
</view>
父子传参
父组件传递参数,子组件通过props接收参数
props:{
seconds:{
type:Number,
default:1
},
auto:{
type:Boolean,
default:false
}
}
子父传参
子组件中定义一个方法,父组件接收
//父组件
<button @click="$refs.cut2.tiker()" type="warn">开始</button>
//子组件
tiker(){
this.ind=setInterval(()=>{
this.count--;
if(this.count<=0){
clearInterval(this.ind)
//向父组件发送事件
this.$emit("stop",this.count)
}
},1000)
}
跨层传参
跨层传参通常使用$emit