Vue 模板

芝麻凛 2021年09月17日 238次浏览

Vue 模板

模板template 三种写法

一、Vue完整版,写在HTML里

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

new Vue({
    el: '#xxx',
    data:{n:0}, //data 可以改成函数
    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}}, //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')

模板里有哪些语法

我们把HTML模板叫做template

展示内容

表达式

  • {} 表达时候
  • {{ n + 1 }} 可以写任何运算
  • {{ fn(n) }} 可以调用函数
  • 如果值为 undefined 或 null 就不显示
  • 另一种写法为

HTML内容

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

只想展示 {}

<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}"> 
</div>

绑定事件

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="x+=1">xxx</button>
<!-- 
点击之后 Vue会运行x+=1 
即发现函数就加括号调用,否则就直接运行代码,这可能导致一些问题,如xxx(1)返回一个函数怎么办
-->
<!--缩写-->
<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-else="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

Vue模板的主要特点有

  • 使用 XML 语法(不是HTML)
  • 使用 {{}} 插值表达式
  • 使用 v-html v-on v-bind 等指令操作DOM
  • 使用 v-if v-for 等指令实现条件判断和循环
  • 还有v-model、v-slot、v-cloak、v-once

指令Directive

什么是指令

<div v-text="x"></div>
<div v-html="x"></div>

以 v- 开头的就是指令

语法

  • v-指令名:参数=值,如v-on:click=add
  • 如果值里没有特殊字符,则可以不加引号
  • 有些指令没有参数和值,如v-pre
  • 有些指令没有值,如 v-on:click.prevent

修饰符

有些指令支持修饰符

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

以下是支持的修饰符

  • v-on支持的有.{keycode | keyAlias} .stop .prevent .capture .self .once .passive .native
  • 快捷键相关 .ctrl .alt .shift .meta .exact
  • 鼠标相关 .left .right .middle
  • v-bind 支持的有 .prop .camel .sync
  • v-model 支持的有 .lazy .number .trim

.sync 修饰符

场景描述

  • parent提供了一个函数,children要使用怎么办
  • 答:children触发事件拿到这个函数
Vue规则:组件不能修改props外部数据
Vue规则:$emit可以触发事件,并传参
Vue规则:$event可以获取$emit的参数

Vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果不用.sync,想做完成这个功能,也可以props传初始值,然后事件监听,.sync就是一个语法糖。

由于这种场景很常见

  • 所以Vue提供了 .sync
  • :money.sync=“total” 等价于 :money=“total” v-on:update:money=“total = $event”
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>
<style>
.child {
  border: 3px solid green;
}
</style>
// 此处是「非完整版」vue
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");