模板 template
template的三种写法
写法一：Vue完整版，写在HTML里
//html
<div id=xxx>
{{n}}
<button @click="add">+1</button>
</div>
//vue
new Vue({
el: '#xxx',
data(){
return{
n:0
}
},
methods:{add(){}}
})
写法二：Vue完整版，写在选项里
//html
<div id=app></div>
//vue
new Vue({
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>`,
data(){return{n:0}},
methods:{add(){ this.n += 1 }}
}).$mount('#app')
//注意: div#app将会被替代!
写法三：Vue非完整版，配合xxx.vue文件
<template>
<div>
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){ return {n:0} },
// data 必须为函数
methods:{add(){ this.n += 1 }}
}
</script>
<style>这里写 CSS </style>
//在另一个vue文件中写如下代码
import Xxx from './xxx.vue'
// Xxx是一个options对象
new Vue({
render: h => h(Xxx)
}).$mount('#app')
template的语法有哪些
我们把HTML模板叫做template
一、展示内容
- {{ 表达式 }}，如{{ object.a }}
- {{ 任何简单运算 }}，如{{ n+1 }}
- {{ 调用函数 }}，如{{ fn(n) }}
- 注意如果{{}}内值为null或undefined时会不显示
- 以上写法等同于v-text
<div v-text="表达式"></div>
二、HTML内容
假设data.a的值为<strong>hello</strong>，需求是在页面直接显示出粗体hello而不是这串代码。
我们只需要写成<div v-html="a"></div>即可显示粗体的hello。
用v-html可以把表达式按照html的标签来显示。
三、显示{{ n }}（把双花括号也显示出来）
使用v-pre则不会对模板进行编译。
<div v-pre>{{ n }}</div>
四、绑定属性 v-bind
- 绑定src：
<img v-bind:src="x" /> - v-bind可简写成
<img :src="x" />，：（冒号）就是v-bind的缩写！ - 绑定对象：
<div :style="{color:red}"></div>
五、绑定事件 v-on
<button v-on:click="add">+1</button>点击"+1"后去执行add()<button v-on:click="x(1)">x</button>点击"x"后去执行x(1)<button v-on:click="y*=2">y</button>点击"y"后执行表达式y*=2- v-on的缩写为@，如
<button @click="add">+1</button>
六、条件判断
if else 判断
<div v-if="x>0">x大于0</div>
<div v-else-if="x===0">x等于0</div>
<div v-else="x<0">x小于0</div>
七、for 循环
for (value,key) in 对象或数组
<ul>
<li v-for="(u,index) in users" :key="index">
索引:{{index}} 值:{{u.name}}
</li>
</ul>
<ul>
<li v-for="(value, name) in obj" :key="name">
属性名:{{name}} 属性值:{{name}}
</li>
</ul>
八、显示与隐藏
<div v-show="x%2===0">x是偶数</div>
当x除以2取余等于0时显示“x是偶数”，否则不显示。
模板的主要特点
- 使用XML语法（不是HTML！！！）
- 使用{{ }}插入表达式，其实双花括号就是占位符
- 使用 v-on v-bind v-html 等指令来操作DOM
- 使用 v-if v-for 等指令实现条件判断和循环
指令 directive
以“v-”开头的东西就叫做指令！
指令语法：v-指令名:"参数"=值，如<div @click="add">+1</div>
PS:有些指令没有参数和值如v-pre ，有些指令没有值如@click.prevent
修饰符
v-on的修饰符
- .stop 表示阻止事件冒泡或传播
- .prevent 表示阻止默认动作
- .stop.prevent 阻止事件冒泡并阻止默认动作
v-bind修饰符
.sync修饰符
.sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
<div id="app">
<div>{{bar}}</div>
<my-comp :foo.sync="bar"></my-comp>
<!-- 等价于<my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
Vue.component('my-comp', {
template: '<div @click="increment">点我+1</div>',
data: function() {
return {copyFoo: this.foo}
},
props: ['foo'],
methods: {
increment: function() {
this.$emit('update:foo', ++this.copyFoo);
}
}
});
new Vue({
el: '#app',
data: {bar: 0}
});
</script>
代码会被扩展成<comp :foo="bar" @update:foo="val => bar = val">
