模板template的三种写法
第一种：Vue完整版，写在HTML中
<div id=app> {{n}}
<button @click="add">+1</button>
</div>
<script>
new Vue({
el: '#app',
data:{n:0},
methods:{add(){}}
})
</script>
第二种：Vue完整版，写在选项里
<div id=app> </div>
<script>
new Vue({
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>`,
data:{n:0}, // data
methods:{add(){ this.n += 1 }}
}).$mount('#app')
</script>
注意：使用这种写法，原
div#app会被替换，在页面中找不到id=app的div标签
第三种：Vue非完整版，配合Demo.vue文件
<template></template>中是XML语法
<script></script>中默认导出一个构造选项options，和实例的构造选项的区别是没有template
<style></style>中写CSS
使用Vue非完整版，只能使用
render: h => h(Demo)
//Demo.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>
</style>
//实例文件
import Demo from './Demo.vue'
new Vue({
render: h => h(Demo)
}).$mount('#app')
模板里的语法
表达式
-
{{ obj.a }}表达式 -
{{ n+1 }}可以写运算 -
{{ fn(n) }}可以调用函数，fn在methods中找 -
<div v-text='表达式'></div>这是另一种写法 - 如果值为
undefined或null，就不显示
HTML标签
假设
data.x的值为<strong>hello</strong>，想展示HTML标签，而不是文本内容
<div v-html='x'></div>
展示{{n}}
不会对模板进行编译
<div v-pre>{{n}}</div>
绑定属性
- 绑定src
<img v-bind:src='x' />简写为<img :src='x' /> - 绑定对象
<div :style="{border: '1px solid red', height: 100}"></div>
绑定事件
发现是函数加
()调用，否则直接运行代码
-
<button v-on:click="add">+1</button>点击后，Vue会运行add() -
<button v-on:click="xxx(1)">xxx</button>点击后，Vue会运行xxx(1) -
<button v-on:click="n+=1">+1</button>点击后，Vue会运行n+=1 -
v-on:click可以缩写成@click，一般都用缩写
这导致一个问题，如果
xxx(1)返回一个函数，这个函数不会执行，所以不要这么用！！！
条件判断
<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/>
循环
v-for="(value,key) in Object || Array" :key = 'key'使用v-for必须绑定:key="",这个值是唯一性的值
<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}} 属性值：{{value}}
</li>
</ul>
显示与隐藏
满足条件展示标签，不满足整个标签不会出现在HTML
<div v-show='n%2 === 0'>n是偶数</div>
总结
1.使用XML语法
2.使用{{}}插入表达式
3.使用v-html，v-on，v-bind等指令操作DOM
4.使用v-if，v-for等指令实现条件判断和循环
