3. VUE模板语法
3.1 模板语法概述
1. 如何理解前端渲染
把数据填充的到HTML标签中
【模板】+【数据】==》前端渲染 ==》静态HTML内容
2. 前端渲染方式
-
原生js拼接字符串
基本上就是讲数据以字符串的方式拼接到HTML标签中，前端代码风格大体如下所示
var d = data.weather; var info = document.getElementById('info'); info.innerHTML = ''; for(var i = 0;i<d.length;i++){ var date = d[i].date; var day = d[i].info.day; var night = d[i].info.night; var tag = ''; tag += '<span>日期：'+date+'</span><ul>'; tag += '<li>白天天气：'+day[1]+'</li>'; tag += '<li>白天温度：'+day[2]+'</li>'; tag += '<li>白天风向：'+day[3]+'</li>'; tag += '<li>白天风速：'+day[4]+'</li>'; tag += '</ul>'; var div = docment.createElement('div'); div.innerHTML = tag; info.appendChild(div); }**缺点：**不同开发人员的代码风格差别很大，随着业务的复杂，后期维护变得逐渐困难起来
-
使用前端模板引擎
下端代码是基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了许多，它拥有自己的一套模板语法规则
<script id = "abc" type = "text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引{{i + 1}} : {{value}}</li> {{/each}} {{/if}} </script>**优点：**大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护
**缺点：**没有专门提供事件机制
-
使用vue特有的模板语法
3. 模板语法概述
- 差值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
3.2 指令
1. 什么是指令
- 什么是自定义属性
- 指令的本质就是自定义属性
- 指令的格式：以v-开始（比如v-cloak）
2. v-cloak指令用法
- 差值表达式存在的问题：闪动
- 如何解决该问题：使用v-cloak指令
- 解决该问题的原理：先隐藏，替换好值之后再显示最终的值
<div id="app">
<div v-cloak>
{{msg}}
</div>
</div>
var vm = new Vue({
al:'#app',
data:{
msg:'Hello Vue'
}
})；
3. 数据绑定指令
var vm = new Vue({
el:'#app',
data: {
msg:'HelloVue',
msg1:'<h1>HTML</h1>'
}
});
-
v-text 填充纯文本
① 相比较插值表达式更加简洁
<div v-text='msg'></div> //HelloVue
-
v-HTML 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用
<div v-HTML='msg1'></div> //HTML //h2格式
-
v-pre 填充原始信息
① 显示原始信息，跳过编译过程（根系编译过程）
<div v-pre>{{msg}}</div> //{{msg}}
4. 数据响应式
-
如何理解响应式
① html5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化）
-
什么是数据绑定
① 数据绑定：将数据填充到标签中
-
v-once 只编译一次
① 显示内容之后不再具有响应式功能
var vm = new Vue({ el:'#app', data: { msg:'Hello Vue', info:'nihao' } });<div> {{msg}} </div> /* v-once的应用场景：如果显示的信息后续不需要再修改，你们具有使用v-once,这样可以提高性能 */ <div v-once> {{info}} </div>
3.3 双向数据绑定
1. 什么是双向数据绑定？
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S4KcCftH-1606572920834)(C:\Users\86130\AppData\Roaming\Typora\typora-user-images\image-20201125145817686.png)]
2. 双向数据绑定分析
-
v-model指令用法
<input type='text' v-model='msg'/>
3. MVVM设计思想
① M(model)
② V(view)
③ VM(View-Model)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lKAVnnzr-1606572920845)(C:\Users\86130\AppData\Roaming\Typora\typora-user-images\image-20201125150342651.png)]
3.4 事件绑定
1. Vue如何处理事件
<div>
<button v-on:click='num++'>点击</button>
<button @click='num++'>点击1</button>
<button @click='handle'>点击2</button>
<button @click='handle()'>点击3</button>
</div>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods:{
handle: function(){
//这里的this是vue的实例对象
this.num++;
}
}
})
-
v-on指令用法
<input type='button' v-on:click='num++'/> -
v-on简写形式
<input type='button'@click='num++'/>
2. 事件函数的调用方式
-
直接绑定函数名称
<button v-on:click='say'> Hello </button> -
调用函数
<button v-on:click='say()'> Say hi </button>
3. 事件函数传递参数
<div>
<button v-on:click='handle'>点击</button>
<button v-on:click='handle2(123,456,$event)'>点击1</button>
</div>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods:{
handle1:function(event){
console.log(event.target.innerHTML)
}
handle2: function(p,p1,event){
console.log(p,p1);
sonsole.log(event.target.innerHTML);
this.num++;
}
}
})
-
普通参数和事件对象
<button v-on:click='say("hi",$event)'> Say hi </button>
- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
4. 事件修饰符
<div v-on:click='handle0'>
<button v-on:click.stop='handle1'>点击1</button>
</div>
<div>
<a href='http://www.baidu.com' v-on:click.prevent='handle2'>百度</a>
</div>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods:{
handle0:function(){
num++;
},
handle1: function(event){
//阻止冒泡
//event.stopPropagation();
},
handle2: function(event){
//阻止默认行为
//event.preventDefault();
}
}
})
-
.stop阻止冒泡
<a v-on:click.stop="handle">跳转</a> -
.prevent阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
5. 按键修饰符
<div id='app'>
<form action=''>
<div>
用户名
<input type='text'>
</div>
<div>
密码
<input type='text'>
</div>
<div>
<input type='button' v-on:click'handleSubmit' value='提交'>
</div>
</form>
</div>
-
.enter回车键
<input v-on:keyup.enter='submit'> -
.delete删除键
<input v-on:keyup.delete='handle'>
案例：简单计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>简单计算器</h1>
<div>
<span>数值A：</span>
<span>
<input type="text" v-model="a">
</span>
</div>
<div>
<span>数值B：</span>
<span>
<input type="text" v-model="b">
</span>
</div>
<div>
<button v-on:click="handle">计算</button>
</div>
<div>
<span>计算结果：</span>
<span v-text="result"></span>
</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function () {
//实现计算逻辑
this.result = parseInt(this.a) + parseInt(this.b);
}
}
})
</script>
</body>
</html>
3.5 属性绑定
1. Vue如何动态处理属性？
-
v-bind指令用法
<a v-bind:href='url'>跳转</a> -
缩写形式
<a :href='url'>跳转</a>
<div id="app">
<a v-bind:href="url">百度</a>
<button v-on:click="handle">切换</button>
</div>
var vm = new Vue({
el:'#app',
data:{
url:'http://www.baidu.com'
},
methods:{
handle: function(){
//修改url地址
this.url='http://www.itcast.cn';
}
}
})
2. v-model的底层实现原理分析
<input v-bind:value='msg' v-on:input='msg=$event.target.value'
<div id="app">
<input type="text" v-bind.value="msg" v-on:input="handle">
<input type="text" v-bind.value="msg" v-on:input="msg=$event.target.value">
<input type="text" v-model="msg">
</div>
var vm = new Vue({
el:'#app',
data:{
mag:'hello'
},
methods:{
//使用输入域中的最新的数据覆盖原来的数据
handle:function(event){
this.msg = event.target.value;
}
}
})
3.6 样式绑定
1. class样式处理
<style>
.active {
width: 100px;
height: 100px;
border: 1px solid red;
}
.error {
background-color: pink;
}
</style>
<div id="app">
<div v-bind:class="{active:isActive,error:isError}"></div>
<button v-on:click='handle'>切换</button>
</div>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handle: function () {
//控制isActive的值在true和false之间进行切换
this.isActive = !this.isActive;
}
}
})
<style>
.active {
width: 100px;
height: 100px;
border: 1px solid red;
}
.error {
background-color: pink;
}
</style>
<div id="app">
<div v-bind:class="[activeClass,errorClass]"></div>
<button v-on:click='handle'>切换</button>
</div>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function () {
//直接操作值，不是利用true或false
this.activeClass = '';
}
}
})
-
对象语法
<div v-bind:class:class="{active:isActive}"></div> -
数组语法
<div v-bind:class="{activeClass,errorClass}"></div>
样式绑定相关语法细节：
-
对象绑定和数组绑定可以结合使用
<div v-bind:class='[activeClass,errorClass,{test:isTest}]'var vm = new Vue({ el:'#app', data:{ activeClass:'active', errorClass:'error', isTest:true }, methods:{ } }) -
class绑定的值可以简化操作
<div v-bind:class='arrClasses'></div>var vm = new Vue({ el:'#app', data:{ arrClasses:['active','error'] } });
<div v-bind:class='objClasses'></div>var vm = new Vue({ el:'#app', data:{ objClasses:{ active:true, error:true } }, methods:{ handle:function(){ this.objClasses.error = false; } } }); -
默认的class如何处理？默认的 class会保留
<div class="base" v-bind:class='objClasses'></div>
2. style样式处理
-
对象语法
<div v-bind:style="{ color:activeColor, fontSize:fontSize}"></div> -
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
<div v-bind:style='objStyles'></div>
<div v-bind:style='[objStyles,overrideStyles]'></div>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid skyblue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid pink',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'skyblue'
}
},
methods: {
handle: function () {
this.heightStyle = '100px';
this.objStyles.width = '100px'
}
}
})
</script>
</body>
</html>
3.7 分支循环结构
1. 分支结构
- v-if
- v-else
- v-else-if
- v-show
2. v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示（已经渲染到了页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>=60'>一般</div>
<div v-else>较差</div>
<div v-show='flag'>测试v-show</div>
<button v-on:click='handle'>点击</button>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
// 分支结构：
// v-show的原理：控制元素样式是否显示 display:none
var vm = new Vue({
el: '#app',
data: {
score: 10,
flag: false
},
methods: {
handle: function () {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
3. 循环结构
-
for循环遍历数组
<li v-for='item in list'>{{item}}</li><li v-for='(item,index) in list'>{{item}} + '---' + {{index}}</li> -
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '==={{index}}'</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item,index) in fruits'>{{item+'---'+index}}</li>
<li :key='item.id' v-for='item in myFruits'>
<span>{{item.ename}}</span>
<span>---</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
id: 1,
ename: 'apple',
cname: '苹果'
}, {
id: 2,
ename: 'orange',
cname: '橘子'
}, {
id: 3,
ename: 'banana',
cname: '香蕉'
},]
},
methods: {
}
});
</script>
</body>
</html>
4.循环结构
-
v-for遍历对象
<div v-for='(v,k,i) in object'></div> -
v-if和v-for结合使用
<div v-if='v==2' v-for='(v,k,i) in object'></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='v==12' v-for='(v,k,i) in obj'>{{k+'---'+v+'---'+i}}</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'lisi',
age: 12,
gender: 'male'
}
},
methods: {
}
});
</script>
</body>
</html>
扫一扫
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
