把数据填充到HTML标签中
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如下图所示。
缺点:不同开发人员的代码风格差别很大,随着业 务的复杂,后期的维护变得逐渐困难起来。
下面代码是基于模板引擎art-template的一段代 码,与拼接字符串相比,代码明显规范了很多, 它拥有自己的一套模板语法规则。
优点:大家都遵循同样的规则写代码,代码可读性 明显提高了,方便后期的维护。
缺点:没有专门提供事件机制。
插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构
官网:https://cn.vuejs.org/v2/api/
插值表达式存在的问题:“闪动”
如何解决该问题:使用v-cloak指令
解决该问题的原理:先隐藏,替换好值之后再显示最终的值
// v-cloak指令 的用法
/* 1. 提供样式
[v - cloak] {
display: none
}
<style>
[v-cloak] {
display: none
}
</style>
*/
// 2. 在插值表达式所在的标签中添加 v-cloak 指令
<div v-cloak>
{{msg}}
</div>
v-text 填充纯文本
① 相比插值表达式更加简洁
<div v-text='msg'></div>
v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用,来自第三方的数据不可以用
<div v-html='msg1'></div>
data: {
msg1: '<h3> html </h3>'
}
v-pre 填充原始信息
① 显示原始信息,跳过编译过程(分析编译过程)
<div v-pre='msg'>{{msg}} </div>
① html5中的响应式(屏幕尺寸的变化导致样式的变化)
② 数据的响应式(数据的变化导致页面内容的变化,可在控制台控制数据)
什么是数据绑定
① 数据绑定:将数据填充到标签中
v-once 只编译一次
① 显示内容之后不再具有响应式功能
v-once的应用场景:如果显示的信息后续不需要再修改,那么可以使用v-once,这样可以提高性能。
v-model指令用法
<input type='text' v-model='uname'/>
在页面中修改数据,控制台里面的数据也会跟着变化
在控制台里面修改数据,页面数据也会一起被修改
① M(model) --(模型数据)
② V(view) --(视图,本质上来说是DOM元素)
③ VM(View-Model)--(控制逻辑,把View和Model结合在一起)
v-on指令用法
<button v-on:click='num++'>按钮</button>
v-on简写形式
<button @click='num++'>按钮</button>
函数定义方式:
直接绑定函数(方法)名称
<button @click='handle'>按钮2</button>
调用函数
<button @click='handle()'>按钮3</button>
普通参数和事件对象
handle1: function (p1, p2, event) {
console.log(p1, p2);
// tagName 标签名
console.log(event.target.tagName);
// innerHTML 标签里的内容
console.log(event.target.innerHTML);
this.num++;
}
handle2: function (event) {
console.log(event.target.innerHTML);
}
.stop 阻止冒泡
1.传统方式阻止冒泡
handle1: function () {
// 传统方式阻止冒泡
event.stopPropagation();
}
2.事件修饰符阻止冒泡
<button @click.stop='handle1'>按钮1</button>
.prevent 阻止默认行为
1.传统方式阻止默认行为
handle3: function (event) {
// 传统方式阻止默认行为
event.preventDefault();
}
2.事件修饰符阻止冒泡
<a href="http://www.baidu.com" @click.prevent='handle3'>跳转</a>
.stop .prevent 可串联使用
<!-- 阻止冒泡和阻止默认行为可串联使用 -->
<button @click.stop.prevent='handle1'> <a href="http://www.baidu.com">跳转按钮</a></button>
.enter 回车键 .delete删除键
// .enter 回车键
密码: <input type="password" v-model='pwd' v-on:keyup.enter='handel'>
// .delete删除键
用户名:<input type="text" v-model='uname' v-on:keyup.delete='clearContent'>
<script>
var vm = new Vue({
el: '#app',
data: {
uname: '',
pwd: ''
},
methods: {
clearContent: function () {
this.uname = ''
},
handel: function () {
console.log(this.uname, this.pwd);
}
}
})
</script>
全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
<body>
<div id="app">
<!-- 未知Ascll码值,添加事件对象$event,用来获取键盘Ascll码值 -->
<!-- <input type="text" v-on:keyup='handel'> -->
<!-- 已知ASCALL码值也可以如下直接添加数字 -->
<!-- <input type="text" v-on:keyup.65='handel'> -->
<input type="text" v-on:keyup.f1='handel'>
</div>
<script src="vue.js"></script>
<script>
// 已知Ascall码值 f1为自定义修饰符别名
Vue.config.keyCodes.f1 = 65;
var vm =new Vue({
el: '#app',
data: {},
methods: {
handel: function (event) {
//Ascll码值打印出来
console.log(event.keyCode);
}
}
})
</script>
</body>
需求:实现简单的加法计算,分别输入数值a和数值b,点击计算按钮,结果显示在下面。
案例分析:
① 通过v-model指令实现数值a和数值b的绑定
② 给计算按钮绑定事件,实现计算逻辑
③ 将计算结果绑定到对应位置
<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='handel'>计算</button>
</div>
<div>
<span>计算结果:</span>
<span v-text='result'></span>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handel: function () {
this.result = parseInt(this.a) + parseInt(this.b);
}
}
})
</script>
</body>
v-bind指令用法:
<a v-bind:href="url">百度</a>
缩写形式
<a :href="url">百度</a>
<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
对象语法
<body>
<div id="app">
<div v-bind:class="{active:isActive,error:isError}">123</div>
<button v-on:click='handel'>切换</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handel: function () {
// 控制isActive的值在true和false之间进行切换
this.isActive = !this.isActive,
this.isError = !this.isError
}
}
})
</script>
数组语法
<body>
<div id="app">
<div v-bind:class='[activeClass,errorClass]'>1213</div>
<button v-on:click='handle'>切换</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function () {
this.activeClass = '',
this.errorClass = ''
}
}
})
</script>
</body>
样式处理细节
1、对象绑定和数组绑定可以结合使用
<div v-bind:class='[activeClass,errorClass,{text:isText}]'>1213</div>
2、class绑定的值可以简化操作
<div v-bind:class='arrClass'></div>
<div v-bind:class='objClass'></div>
data: {
activeClass: 'active',
errorClass: 'error',
isText: true,
// 简化操作
// 数组简化
arrClass: ['active', 'error'],
// 对象简化
objClass: {
active: true,
error: true
}
}
3、默认的class如何处理?默认的class会保留
<div class="base" v-bind:class='objClass'></div>
对象语法
<div v-bind:style='{width:widthStyle,height:heightStyle,border:borderStyle}'></div>
数组语法
<div v-bind:style='[objStyle,overrideStyle]'></div>
具体使用参考如下代码:
<body>
<div id="app">
<div v-bind:style='{width:widthStyle,height:heightStyle,border:borderStyle}'></div>
<div v-bind:style='objStyle'></div>
<div v-bind:style='[objStyle,overrideStyle]'></div>
<button v-on:click.style='handel'>切换</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
widthStyle: '100px',
heightStyle: '200px',
borderStyle: '1px solid #ccc',
// 对象简化
objStyle: {
width: '200px',
height: '100px',
border: '1px solid #ccc'
},
// 数组
overrideStyle: {
border: '5px solid red',
background: 'blue'
}
},
methods: {
handel: function () {
this.heightStyle = '100px';
this.objStyle.width = '100px'
}
}
})
</script>
</body>
v-if
v-else
v-else-if
v-show
<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>=70'>中等</div>
<div v-else-if='score<90&&score>=60'>及格</div>
<div v-else>挂科</div>
<div v-show=flag>测试v-show</div>
<button v-on:click='handel'>切换状态</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 53,
flag: false
},
methods: {
handel: function () {
this.flag = !this.flag
}
}
})
</script>
</body>
v-if控制元素是否渲染到页面 (基本上不会发生改动用v-if)
v-show控制元素是否显示(已经渲染到了页面,频繁改动用v-show)
v-for遍历数组
<div v-text='item' v-for='item in fruits'></div>
<div v-for='(item,index) in fruits'>{{item + ' ---' + index}}</div>
key的作用:帮助Vue区分不同的元素,从而提高性能
<div :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</div>
示例代码:
<body>
<div id="app">
<div v-text='item' v-for='item in fruits'></div>
<div v-for='(item,index) in fruits'>{{item + ' ---' + index}}</div>
<div :key='item.id' v-for='item in myFruits'>
<span>{{item.ename}}</span>
<span>---</span>
<span>{{item.cname}}</span>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fruits: ['banner', 'orange', 'apple'],
myFruits: [{
id: 1,
ename: 'banana',
cname: '香蕉'
},
{
id: 2,
ename: 'apple',
cname: '苹果'
}, {
id: 3,
ename: 'orange',
cname: '橙子'
}
]
},
methods: {
}
})
</script>
</body>