<template>
<div>
{{ msg }}
<br />
{{ details() }}
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
msg: ‘Welcome to Your Vue.js App‘
}
},
methods: {
details () {
return this.msg + ‘!!!‘
}
}
}
</script>
<template>
<div>
{{1+2}}<br>
{{ok?"true":"false"}}<br>
{{msg.split(‘,‘).reverse().join(‘,‘)}}
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
ok: true,
msg: ‘1,2,3,4,5,6,7,8,9‘
}
}
}
</script>
管道符进行过滤，支持多层过滤
<template>
<div>
{{message | capitalize}}
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
message: ‘school‘
}
},
filters: {
capitalize (value) {
if (!value) return ‘‘
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
<template>
<div v-html="msg"></div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
msg: ‘<h1>Welcome to Your Vue.js App</h1>‘
}
}
}
</script>
v-model对表单等元素的定义，可以实现双向绑定。
<template>
<div>
<input v-model="msg" type="text" /><br/>
{{msg}}
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
msg: ‘‘
}
},
methods: {
details () {
return this.msg + ‘!!!‘
}
}
}
</script>
单向变动，可支持类型：html中的属性、css的样式、对象、数组、number 类型、bool类型。可将v-bind:class简写为:class
<template>
<div>
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"/>
<br/>
<div :class="{‘class1‘: use}">测试改变颜色</div>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
use: false
}
}
}
</script>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
根据表达式的值（true或false）来决定是否插入元素
<template>
<div>
<div v-if="type == ‘A‘">A</div>
<div v-else-if="type == ‘B‘">B</div>
<div v-else>C</div>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
type: ‘C‘
}
}
}
</script>
用法同v-if,区别是v-if是false,则根本不会渲染元素，而v-show只是将元素display:none
用于监听DOM事件，v-on:click可简写为@click
防止事件冒泡，若不加stop，则事件会从内至外依次执行。
<template>
<div>
<div class="outeer" @click.stop="outer">outer
<div class="middle" @click.stop="middle">middle
<button @click.stop="inner">inner</button>
</div>
</div>
<p>{{ message }}</p>
</div>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
message: ‘测试冒泡事件‘
}
},
methods: {
inner: function () {
this.message = ‘inner： 这是最里面的Button‘
},
middle: function () {
this.message = ‘middle: 这是中间的Div‘
},
outer: function () {
this.message = ‘outer: 这是外面的Div‘
}
},
mounted () {
}
}
</script>
用于取消默认事件，如<a href="#">
捕获事件，点击子节点，会触发从最外层到子节点的所有事件
<template>
<div>
<div class="outeer" @click.capture="outer">outer
<div class="middle" @click.capture="middle">middle
<button @click.capture="inner">inner</button>
</div>
</div>
<p>{{ message }}</p>
</div>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
message: ‘测试冒泡事件‘
}
},
methods: {
inner: function () {
this.message = ‘inner： 这是最里面的Button‘
alert(‘inner‘)
},
middle: function () {
this.message = ‘middle: 这是中间的Div‘
alert(‘middle‘)
},
outer: function () {
this.message = ‘outer: 这是外面的Div‘
alert(‘outer‘)
}
},
mounted () {
}
}
</script>
只触发自己范围内的事件，不包含子节点
只执行一次
enter：回车键
tab：制表键
delete：含delete和backspace键
esc：返回键
space: 空格键
up：向上键
down：向下键
left：向左键
right：向右键
left：鼠标左键
middle：鼠标中间滚轮
right：鼠标右键
循环
<template>
<div>
<ol>
<li v-for="list in lists" :key="list.name">
{{list.name}}
</li>
</ol>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
lists: [
{‘name‘: ‘a‘},
{‘name‘: ‘b‘},
{‘name‘: ‘c‘}
]
}
}
}
</script>
原文：https://www.cnblogs.com/Unlimited-Blade-Works/p/11725380.html