Vue基本指令
Vue基本指令
Vue基本模板语法
Vue绑定类样式和内联样式
条件渲染指令
事件绑定
Vue基本模板语法
1. 文本插值
- 使用双大括号{ {}} 表示：基本形式
- 使用v-once指令实现：只需要渲染一次数据，后续数据变化不再关心时
- 使用v-text / v-html 指令实现：v-text可替代{ {}}，v-html解析html代码片段
<body>
<div id="app">
<p>{
{ title}}p>
<p v-once>{
{ title}}p>
<p v-text="title">p>
<p v-html="title">p>
div>
<script src="../js/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
title:'欢迎你'
}
});
script>
body>
2. 表达式：各种数值，变量和运算符的综合体
<body>
<div id="app">
<p>{
{number+1}}p>
<p>{
{ok?"yes":"no"}}p>
<p>{
{message.split("").reverse().join("")}}p>
<div v-text="'list-'+id">div>
div>
<script src="../js/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
number:1,
ok:true,
message:"hello world",
id:"01"
}
});
script>
body>
Vue只支持单个表达式，不支持语句和流程控制，另外，在表达式中，不能使用用户自定义的全局变量，只能使用js的全局变量。
如：Math 和 Date，以下是无效表达式代码
{ { var book=“Vue基本指令”}}
{ { if (ok) return msg }}
Vue绑定类样式和内联样式
Vue绑定类样式
1. v-bind ：接受一个参数，在指令后以冒号指明
对象语法
<div v-bind:class="{类样式：绑定数据，...}">div>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js">script>
<style>
.class1{
background: #444;
color: #eee;
}
style>
head>
<body>
<div id="app">
<label for="r1">修改颜色label>
<input type="checkbox" v-model="use" id="r1">
<br>
<div v-bind:class="{
'class1': use}">颜色div>
div>
<script>
new Vue({
el: '#app',
data:{
use:true //使用 class1 类的样式
use: false //不使用 class1 类的样式
}
});
script>
body>
数组语法
<div v-bind:class="[绑定数据1,绑定数据2,...]">div>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js">script>
<style>
#app{
width: 600px;
margin: 50px auto;
}
#app .border{
width: 300px;
height: 300px;
border: solid 2px red;
}
#app .shadow{
box-shadow: 0 0 10px gray;
}
#app .black{
background: green;
}
style>
head>
<body>
<div id="app">
<div v-bind:class="[borderClass,shadowClass,BlackClass]">div>
div>
<script>
new Vue({
el: '#app',
data:{
borderClass:"border",
shadowClass:"shadow",
BlackClass:"black"
}
});
script>
body>
html>
内联样式
对象语法
<div v-bind:style="{
样式属性：绑定数据}">div>
或者
<div v-bind:style="styleObject">
<script>
var vm=new Vue({
el:"#app",
data:{
styleObject{
样式属性：样式值,
....
}
}
})
script>
div>
数组语法
<div v-bind:style="[baseStyle,overridingStyle]">div>
缩写方式v-bind
<a v-bind:href="url">a>
<a :href="url">a>
条件渲染指令
指令：Vue中一个重要的特性，主要提供一种机制将数据的变化映射为DOM行为。指令时是带有v- 前缀的特殊属性
1. v-if （ v-else紧跟在v-if后面）：根据表达式seen的真假来移除或插入 p 元素
<div id="app">
<p v-if="seen">现在可看到内容p>
div>
<script>
var vm=new Vue({
el:"#app",
data:{
seen:true //显示内容
seen:false//不显示内容
}
});
script>
2. v-show ：简单的切换元素的css属性display
根据true或false切换时间
<div id="app">
<input type="checkbox" v-model="inTheSummer">
<br>
<div id="box">
<h3>今天h3>
<div v-show="inTheSummer">
8:00
div>
<div v-show="!inTheSummer">
20:00
div>
div>
div>
<script>
new Vue({
el: '#app',
data:{
inTheSummer:true
}
});
script>
事件绑定
1. v-on：一个指令以特殊的方式绑定。
<form v-on:submit.prevent="onSubmit">form>
.prevent 修饰符告诉 v-on 指令对于触发的事件调用
event.preventDefault()：
使用v-on写计算器
2. 事件修饰符
主要修饰符：
- .stop:等同于调用event.stopPropagation()方法。
- .prevent: 等同于调用event. preventDefault()方法。
- .capture: 使用capture模式添加事件监听器
- .sef: 只有当事件是从监听元素本身触发时才触发回调。
- .once: 点击事件将只会触发一次。
3.事件修饰符使用代码
<a v-on:click.stop="doThis">a>
<form v-on:submit prevent="onSubmit"> form>
<form v-on:submit.stop. prevent="onSubmit"> form>
<form v-on:submit. prevent> form>
<div v-on:click.capture="doThis">... div>
<div v-on:click.self="doThat">... div>
<a v-on:click.once="doThis"> a>