文本渲染
<div>{{data中的数据}}</div>
<div v-text="变量名></div>
条件渲染
v-show 特点:是使用css display属性显示或隐藏
<div v-show="true">css显示<div>
<div v-show="false">css隐藏</div>
v-if 特点:不展示的DOM元素直接被移除
<div v-if="false">直接移除该DOM节点</div>
v-if和v-show使用 切换显示频率较高 建议使用v-show
v-if 、v-else-if 、v-else
<template>
<div v-if="n == 1">一等奖</div>
<div v-else-if="n == 2">二等奖</div>
<div v-else>三等奖</div>
</template>
<script>
data(){
return{
n:2
}
}
</script>
注意:v-if可以和v-else-if v-else 一起使用,但是结构不能被打断
遍历
v-for
<template>
<ul>
// 遍历数组
<li v-for="(p,index) in arr" key="p.id">
{{p.id}}--{{p.name}}
</li>
</ul>
<ul>
//遍历字符串
<li v-for="(char,index) in str" key="index">
{{char}}
</li>
</ul>
<ul>
// 遍历指定次数
<li v-for="(num,index) in 5" key="index">
{{num}}
</li>
</ul>
<ul>
// 遍历对象
<li v-for="(value,k) in obj" key="index">
</ul>
</template>
<script>
export default{
data(){
return{
arr:[
{id:1,name:"张三"},
{id:2,name:"李四"},
{id:3,name:"王五"}
],
obj:{one:1,tow:2,three:3},
str:"hello vue"
}
}
}
</script>
表单数据
收集表单数据
<input type="text" v-model="value">
<input type="radio" >
<input type="checkbox">
v-model的三个修饰符
lazy:失去焦点后在收集数据
number:输入字符串转为有效的数字
trim :输入首尾空格过滤
账号:<input type="text" v-model.trim="userInfo.account">
<br />br />密码:<input type="password" v-model="userInfo.password"><br /><br />
年龄:<input type="number" v-model.number="userInfo.age"> <br /><br />
性别:
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br /<br />
爱好:
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br /><br />
地区
<select v-model="userInfo.city">
<option value="">请地区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">杭州</option>
<option value="wuhan">郑州</option>
</ select>
事件
// v-on:click=""
// 简写 @click=""
// 行内事件
<button @click="msg='我的救星到了!'"></button>
// 事件响应methods中的函数
<button @click="doit"></button>
<button @click="doit($event)"></button>
// 事件传参
<button @click="biaobai('小红')"></button>
事件修饰符
1. .prevent 阻止默认事件
2. .stop 阻止事件冒泡
3. .once 事件触发一次
// 阻止默认事件
<a href="http://www.baidu.com" @click.prevent="show">阻止事件冒泡</a>
// 事件只触发一次
<button @click.once="show">点我试试</button>
// 阻止事件冒泡
<div @click.stop="show">
<button @click="showInfo">点击</button>
</div>
组件传参
1.父传子
父组件
<template>
//组件
<step title="一個兩個"></step>
</template>
<script>
import step from "组件路径"
export default{
components:{step}
}
</script>
子组件
<template>
<div>{{title}}</div>
</template>
<script>
export defalt{
props:{
title:{
type:String,
default:"一個兩個"
}
}
}
</script>
2. 子传父
子组件
<template>
<button @click="$emit("update",123)">
点击
</button>
</template>
父组件
<template>
<button @update=" num = $event ">复制</button>
<button>
</template>
<script>
export default{
data(){num:0}
methods:{
un(){
console.log(this.num);
}
}
}
</script>
$ref
父组件
<template>
<div>
<input type="text" v-model="message" />
<button @click="passMessageToChild">Pass Message to Child Component</button>
<child-component ref="childComponentRef"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
}
},
methods: {
passMessageToChild() {
const childComponent = this.$refs.childComponentRef;
childComponent.receiveMessage(this.message);
}
}
}
</script>
子组件
<template>
<div>
<h3>Child Component</h3>
<p>Received Message: {{ receivedMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
receivedMessage: ''
}
},
methods: {
receiveMessage(message) {
this.receivedMessage = message;
}
}
}
</script>
$children与$parent 传参