Vue模板

蓝zf
168 阅读2分钟

一、模板里的语法

1、HTML和XML区别

  1. HTML
  • <input name="username">、<div></div>
  1. XML
  • Vue模板使用XML
  • XML有自闭合标签，<input name="username" />、<div />

2、模板template的三种写法

  1. Vue完整版，写在HTML里，<div id=xxx>{{n}}</div>
  2. Vue完整版，写在选项里
template:`<div>{{n}}</div>`
  1. Vue非完整版，配合xxx.vue文件
  • xxx.vue
//XML写法
<template>
  <div>
    {{n}}
  </div>
</template>
<script>
export default{
  data(){return {n:0}},
  methods:{...}
}
</script>
<style>
  ...
</style>
  • main.js
import Xxx from './xxx.vue'
new Vue({
 render:h=>h(Xxx)
}).$mount('#app')

3、模板里的语法（HTML模板叫做template）

3.1、展示内容
  1. 表达式
  • {{object.a}}表达式（data里的object里的a）
  • {{n+1}}可以写任何运算（data里的n做任何运算）
  • {{fn(n)}}可以调用函数（默认从methods里找）
  • 以上，若值为undefined或null，则不显示
  • 另一种写法<div v-text="表达式"></div>（不用这种）
  1. HTML内容
  • 若data.x值为<strong>hi</strong>，直接用上述表达式，就会显示strong包着hi
  • <div v-html="x"></div>，用该指令就会显示粗体hi
  1. 单纯展示{{n}}
  • <div v-pre>{{n}}</div>，就会显示{{n}}，不是n
  • v-pre不会对模板进行编译
3.2、绑定属性
  1. 绑定src
  • <img v-bind:src="x" />，可简写成<img :src="x" />
  1. 绑定对象
  • <div :style="{border:'1px solid red',height:100px}"></div>
3.3、绑定事件
  1. v-on：事件名
  • <button v-on:click="add">+1</button>，点击之后，Vue会运行add()
  • <button v-on:click="xxx(1)">+1</button>，点击之后，Vue会运行xxx(1)
  • <button v-on:click="n+=1">+1</button>，点击之后，Vue会运行n+=1
  • 总结：发现函数会加括号调用之，否则就直接运行代码
  1. 用缩写
  • <button @click="add">+1</button>
3.4、条件判断
  1. if...else
<div v-if="x>0">x大于0</div>
//x>0时，显示这个div，x大于0
<div v-else-if="x===0">x等于0</div>
//x===0时，显示这个div，x等于0
<div v-else>x小于0</div>
//其他情况（x小于0），显示这个div，x小于0
  • 无论显示与否，div都处于DOM树中
3.5、循环
  1. 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>
  • 一定要写:key="index"（一般是写不会变的值）
3.6、显示、隐藏
  1. v-show
  • <div v-show="n%2===0">n是偶数</div>，当这个表达式的值为真，就显示这个div，n是偶数（该div也处在DOM树中）
  1. 近似等于绑定属性
  • <div :style="{display:n%2===0?'block':'none'}">n是偶数</div>
  • 注意：看得见的元素的display不只有block
  • table的display为table
  • li的display为list-item

4、指令Directive

4.1、什么是指令
  • 命令、指示
  • 以v-开头的，如v-html、v-on、v-bind等
4.2、语法
  • v-指令名:参数=值，如v-on:click=add，除了两个缩写不一样：<img :src="x" />、<button @click="add">+1</button>
  • 如果值里没有特殊字符，可以不用加引号（最好都加）
  • 有些指令没有参数和值，如v-pre
  • 有些指令没有值，如v-on:click.prevent，有修饰符.prevent，阻止默认动作
4.3、修饰符
  • 修饰符是对Vue指令的额外描述
  • 如@click.stop="add"，表示阻止事件传播/冒泡
  • @click.prevent="add"，表示阻止默认动作
  • @click.stop.prevent="add"，同时表示两种意思
  • 修饰符还有很多，可查文档学习
  • 最重要的是.sync修饰符，可点击查看另一篇.sync专题文章Vue修饰符.sync - 掘金 (juejin.cn)
avatar
文章
阅读
粉丝