Vue 模板

一、Vue模板语法

模板template三种写法

1. Vue完整版，写在HTML里

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

new Vue({ 
   el: '#xxx', 
   data:{n:0}, // data 可以改成函数
   methods:{add(){}} 
 })

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

<div id=app>
</div>

new Vue({
   template: `
     <div>
       {{n}}
       <button @click="add">+1</button>
     </div>`,
   data:{n:0}, // data
   methods:{add(){ this.n += 1 }}
}).$mount('#app')
//注意一个细节： div#app会被替代

3. 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>

//然后在另一个地方写如下代码
import Xxx from './xxx.vue'
     // Xxx 是一个options对象
new Vue({
   render: h => h(Xxx)
}).$mount('#app')

里面的template都为XML

展示内容

表达式

• {{ object.a }} 表达式
• {{ n + 1 }}可以写任何运算
• {{ fn(n) }} 可以调用函数（调用methods函数）
• 如果值为 undefined 或 null 就不显示
• 另一种写法为<div v-text="表达式"></div>

HTML内容

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

我就想展示{{ object.a }}

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

绑定属性

绑定src

<img v-bind:src="x" />

v-bind:简写为：

<img :src="x" />

绑定对象

<div:style="{border: '1px solid red', height:100}"> 
//这里可以把'100px' 写成100
</div>

绑定事件

• 缩写 <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-if="x<0">x小于0</div>

循环

• 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>

显示、隐藏

v-show

<div v-show="n%2===0"> n 是偶数</div>

近似等于

<div :style="{display:n%2===0?'block':'none'} "> n 是偶数</div>

注意：

看得见的元素display不只有block
如table的display为table
如li的display为list-item

v-for一定要写key

有些指令支持修饰符

• @click.stop="add"表示阻止事件传播/冒泡
• @click.prevent="add"表示阻止默认动作
• @click.stop.prevent="add"同时表示两种意思