Vue入门--第四天--模板的三种写法

Vue的模板语法

1.使用Vue完整版，写在HTML里面

<div id='xxx'>
  {{n}}
  <button @click="add"> +1<button>
</div>

{{n}}会被替换，@click="add"会被监听

2.Vue使用完整版，写在选项里

<div id="app">
</div>

new Vue({
  template:`
    <div>
      {{n}}
      <button @click="add"> +1<button>
    </div>
  `,
  data:{n:0},
  methods:{add(){this.n+=1}}
}).$mount('#app')

注意：上面两行会被完全代替，里面的内容也会随之消失
然后就是并没有一个div有app

3 Vue非完整版，配合xxx.vue文件

<template>
  <div>
    {{n}}
    <button @click="add"> +1<button>
  </div>
</template>//这个里面是xml语法

<script>
  export default {//导出构造选项
    data() {return {n:0}},
    methods:{add(){this.n += 1}}
  }
</script>

<style>这里写css</style>

然后在另外一个地方写

import Xxx from './xxx.vue'
//Xxx是一个options对象
new Vue({
  render: h => h(Xxx)
}).$mount('#app')

现在讨论第三种的写法
在里写一下内容

• 表达式
• HTML内容

表达式

• {{ object.a }}表达式
• {{ n + 1 }}任何运算
• {{ f(n) }}调用函数
• undefined和null不显示
• 另一种写法<div v-text="表达式"></div>

HTML内容

• 假设data.x的值为<strong>hi<strong>
• <div v-html="x"></div>即可显示粗体的hi

展示{{n}}

<div v-pre>{{ n }}</div>
使用v-pre，就不会对模板进行编译

{{}}就用来显示文本

绑定属性

绑定src
<img v-bind:src='x'/>

v-bind: 简写为：
<img :src='x'/>

绑定对象
<div :style="{...}"></div>

绑定事件

v-on:事件名
<button v-on:click="add">+1</button>
点击之后，Vue会运行add()
<button v-on:click="add(1)">+1</button>
点击之后，Vue会运行add(1)
<button v-on:click="n+=1">+1</button>
点击之后，Vue会运行n+=1

缩写<button @click="add">+1</button>

发现是函数就加括号调用它，否则直接运行代码

条件判断

if-else
<div v-if="x>0">x大于0</div>
当x>0时才显示这个div

循环

for (value,key) in 数组或者对象

<ul>
  <li v-for="(u, index) in users" :key="index">
    索引:{{index}} 值:{{u.name}}
  </li>
</ul>//这里users是数组

<ul>
  <li v-for="(value, name) in users" :key="name">
    索引:{{name}} 值:{{name}}
  </li>
</ul>//这里users是对象

key一般是用不重合的值，唯一的

显示，隐藏

<div v-show="n%2===0">n是偶数</div>
n%2===0就会显示这个div
近似于<div :style="{display:n%2===0?'block':'none'}">n是偶数</div> 注意：table`的display是table
li的display是list-item

总结

• 使用XML语法
• 使用{{}}插入表达式
• 使用v-html v-on v-bind等指令操作DOM
• 使用v-if v-for等指令实现条件判断和循环