Vue模板的特点
- 使用XML语法(不是HTML!自闭合标签一定要加/)
- 使用
{{}}插入表达式 - 可以使用
3.1v-html
3.2v-bind(简写为:)
3.3v-show
3.4v-on(简写为@)
...
指令来操作DOM(声明式) - 利用
v-ifv-for实现条件判断和循环
其它属性(这个暂时还没写)
修饰符
v-on
- { keycode | keyAlias }
例子:
@keypress.enter = "xxxx"
按下回车键时执行函数xxxx
- stop
例子:
<ul @click="console.log('(#^.^#)')">
<li>点我</li>
<li>点我</li>
<li @click.stop>你点我是没用的</li>
<li>点我</li>
</ul>
用来阻止事件冒泡
- prevent
例子:
<a href="xxxxx.com" @click.prevent>我不是一个合格的链接o(╥﹏╥)o</a>
用来阻止默认事件
v-bind
.sync修饰符:
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
父组件
<template>
<div id="app">
<div >家里穷的还剩{{total}}</div>
<TheChild :money = total @update:money="total = $event"/>
</div>
</template>
<script>
import TheChild from "./TheChild";
export default {
name: "App",
components: {
TheChild
},
data(){
return{
total: 2333
}
}
};
</script>
子组件TheChild
<template>
<div>
<button @click="$emit('update:money',money - 10)">(*╹▽╹*)我想吃冰棍</button>
</div>
</template>
<script>
export default {
props:{
money:{
type: Number,
default: 2333
}
}
}
</script>
上面的代码用到三个知识点:
- 组件不能修改外部
props -
this.$emit可以触发事件并传参 -
$event可以获取$emit的值
<TheChild :money ="total" @update:money="total = $event"/>
但是这样写未免有些麻烦,而且经常用到,所以Vue就提供了.sync修饰符简写它
<TheChild :money.sync = "total" />
