Vue 模板 template

模板 template

一、 Vue完整版，写在HTML里

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

new Vue({
  el:'#xxx',
  data: {n:0},
  methods: {add(){}}
})

二、 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 会被替代

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

<template>
  <div>
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>
<script>
   export default {
     data(){return {n:0}},
     methods:{add(){ this.n +=1 }}
   } 
</script>
<style></style>

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

template语法

展示内容

• 表达式

{{ object.a }} 表达式
{{ n + 1 }} 运算
{{ fn(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>

绑定属性

• 绑定src
  <img v-bind:src="x" />
• v-bind: 简写
  <img :src="x" />
• 绑定对象
  <div :style="{border:'1px solid red',height:100}"></div>

此处 100px 可以写成 100

绑定属性

• v-on: 事件名

<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">xxx</button>
// 点击之后，Vue会运行 n+=1

• 缩写

<button @click="add">+1</button>
<button @click="xxx(1)">xxx</button>
<button @click="n += 1">xxx</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</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}},属性值：{{value}}
  </li>
</ul>

显示、隐藏

• v-show

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

• 近似等于

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