Learning Notes

# 模板 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>

即可显示粗体的hi

  • 展示

<div v-pre></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>

← 指令 Directive →