Vue
Vue概述
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式javaScript框架。
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue
灵活:在一个库和一套完整框架之间自如伸缩
高效:20kB运行大小,超快虚拟 DOM
Vue基本使用
传统开发模式
<body>
<div id="msg"></div>
<script type="text/javascript">
var msg = 'Hello World';
var div = document.getElementById('msg');
div.innerHTML = msg;
</script>
</body>
JQuery开发
<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
var msg = 'Hello World!';
$('#msg').html(msg);
</script>
Vue开发
<div id="app">
<div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
</script>
Vue.js之HelloWorld细节分析
实例参数分析
⚫ el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
⚫ data:模型数据(值是一个对象)
插值表达式用法
<div>{{msg}}</div>
⚫ 将数据填充到HTML标签中
⚫ 插值表达式支持基本的计算操作
Vue代码运行原理分析
⚫ 概述编译过程的概念(Vue语法→原生语法)
Vue模板语法
前端渲染
把数据填充到HTML标签中
前端渲染方式
⚫ 原生js拼接字符串
⚫ 使用前端模板引擎
⚫ 使用vue特有的模板语法
原生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 + '</sapn><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 = document.createElement('div');
div.innerHTML = tag;
info.appendChild(div);
}
缺点:不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来。
使用前端模板引擎
<script id="abc" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。
缺点:没有专门提供事件机制。
模板语法概览
⚫ 差值表达式
⚫ 指令
⚫ 事件绑定
⚫ 属性绑定
⚫ 样式绑定
⚫ 分支循环结构
指令
指令的本质就是自定义属性
指令的格式:以v-开始(比如:v-cloak)
v-cloak指令用法
插值表达式存在的问题:“闪动”
如何解决该问题:使用v-cloak指令
解决该问题的原理:先隐藏,替换好值之后再显示最终的值
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app">
<div v-cloak>{{msg}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
msg: 'Hello'
}
})
</script>
</body>
数据绑定指令
⚫ v-text 填充纯文本
① 相比插值表达式更加简洁
⚫ v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用,来自第三方的数据不可以用
⚫ v-pre 填充原始信息
① 显示原始信息,跳过编译过程(分析编译过程)
<body>
<div id="app">
<div>{{msg}}</div>
<!--Hello Vue -->
<div v-text='msg'></div>
<!--Hello Vue -->
<div v-html='msg1'></div>
<!--Hello Vue -->
<div v-pre>{{msg}}</div>
<!--{{msg}} -->
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
1、v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
2、v-html指令用于将HTML片段填充到标签中,但是可能有安全问题
3、v-pre用于显示原始信息
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1: '<h1>HTML</h1>'
}
});
</script>
</body>
数据响应式
⚫ 如何理解响应式
① html5中的响应式(屏幕尺寸的变化导致样式的变化)
② 数据的响应式(数据的变化导致页面内容的变化)
⚫ 什么是数据绑定
① 数据绑定:将数据填充到标签中
⚫ v-once 只编译一次
① 显示内容之后不再具有响应式功能
<body>
<div id="app">
<div>{{msg}}</div>
<div v-once>{{info}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
v-once的应用场景:如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能。
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
info: 'nihao'
}
});
</script>
</body>
双向数据绑定指令
- 当数据发生变化的时候,视图也就发生变化
- 当视图发生变化的时候,数据也会跟着同步变化
<body>
<div class="app">
<div>{{msg}}</div>
<input type="text" v-model="msg">
</div>
<script src="js/vue.js"></script>
<script>
var nm = new Vue({
el: '.app',
data: {
msg: 'hello'
}
})
</script>
</body>
MVVM设计思想
① M(model) 数据
② V(view) 试图
③ VM(View-Model)
事件绑定
Vue如何处理事件?
v-on指令用法
<input type=‘button' v-on:click='num++'/>
v-on简写形式
<input type=‘button' @click='num++'/>
事件函数的调用方式
直接绑定函数名称
<button v-on:click='say'>Hello</button>
调用函数
<button v-on:click='say()'>Say hi</button>
<button v-on:click='say("hi",$event)'>Say hi</button>
<body>
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click='num++'></button>
<button @click='num++'></button>
<button @click='sum'></button>
<button @click='sum()'></button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
sum: function() {
this.num++
}
}
})
</script>
</body>
事件函数参数传递
普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>
<body>
<div id="app">
<div>{{num}}</div>
<div>
<!--
如果事件直接绑定函数名称
那么默认会传递事件对象作为事件函数的第一个参数
-->
<button v-on:click='handle1'>点击1</button>
<!--
2、如果事件绑定函数调用
那么事件对象必须作为最后一个参数显示传递
并且事件对象的名称必须是$event
-->
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
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)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
</body>
事件修饰符
.stop 阻止冒泡
<a v-on:click.stop="handle">跳转</a>
.prevent 阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
<body>
<div class="app">
<div>{{num}}</div>
<div @click='sum0'>
<button @click.stop='sum1'></button>
</div>
<div>
<a href="http://www.baidu.com" v-on:click.prevent='sum2'>百度</a>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var nm = new Vue({
el: '.app',
data: {
num: 0
},
methods: {
sum0: function() {
this.num++
},
sum1: function(event) {
// event.stopPropagation()
},
sum2: function(event) {
// 阻止默认行为
// event.preventDefault();
}
}
})
</script>
</body>
按键修饰符
.enter 回车键
<input v-on:keyup.enter='submit'>
.esc 退出键
<input v-on:keyup.delete='handle'>
自定义按键修饰符
全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
事件绑定-自定义按键修饰符
规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应event.keyCode值
*/
Vue.config.keyCodes.aaa = 65
var vm = new Vue({
el: '#app',
data: {
info: ''
},
methods: {
handle: function(event){
console.log(event.keyCode)
}
}
});
</script>
<body>
<div id="app">
<form action="">
<div>
用户名:
<input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
</div>
<div>
密码:
<!-- 自定义按键 -->
<input type="text" v-on:keyup.f2='handleSubmit' v-model='pwd'>
</div>
<div>
<input type="button" v-on:click='handleSubmit' value="提交">
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 事件绑定-按键修饰符
Vue.config.keyCodes.f1 = 113
var vm = new Vue({
el: '#app',
data: {
uname: '',
pwd: '',
age: 0
},
methods: {
clearContent: function() {
// 按delete键的时候,清空用户名
this.uname = '';
},
handleSubmit: function() {
console.log(this.uname, this.pwd)
}
}
});
</script>
</body>
属性绑定
Vue如何动态处理属性?
v-bind指令用法
<a v-bind:href='url'>跳转</a>
缩写形式
<a :href='url'>跳转</a>
<body>
<div id="app">
<a v-bind:href="url">百度</a>
<a :href="url">百度1</a>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 属性绑定
var vm = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
},
methods: {
handle: function() {
// 修改URL地址
this.url = 'http://itcast.cn';
}
}
});
</script>
</body>
v-model的低层实现原理分析
<body>
<div class="app">
<div>{{msg}}</div>
<!-- 三种方式都可进行双向绑定 -->
<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>
<script src="js/vue.js"></script>
<script>
var nm = new Vue({
el: '.app',
data: {
msg: 'hello'
},
methods: {
handle: function(event) {
this.msg = event.target.value;
}
}
})
</script>
</body>
样式绑定
class样式处理
对象语法
<div v-bind:class="{ active: isActive }"></div>
示例
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{active: isActive,error: isError}">
测试样式
</div>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
样式绑定
*/
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handle: function(){
// 控制isActive的值在true和false之间进行切换
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
});
</script>
</body>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
示例
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class='[activeClass, errorClass]'>测试样式</div>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 样式绑定
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function() {
this.activeClass = '';
this.errorClass = '';
}
}
});
</script>
</body>
style样式处理
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
示例
<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="js/vue.js"></script>
<script type="text/javascript">
/*
样式绑定之内联样式Style:
*/
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid blue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid green',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
},
methods: {
handle: function() {
this.heightStyle = '100px';
this.objStyles.width = '100px';
}
}
});
</script>
</body>
分支循环结构
分支结构
⚫ v-if
v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
<div v-if="false">65465465454</div> //不会显示
也就是根本没有不会有对应的标签出现在DOM中。
⚫ v-else
<div v-if>65465465454</div>
//会显示
<div v-else>65465465454</div>
不会显示
⚫ 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>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="js/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>
v-if与v-show的区别
v-if当条件为false时,压根不会有对应的元素在DOM中。
v-show当条件为false时,仅仅是将元素的display属性设置为none而已。
循环结构
v-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>
<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, index) in myFruits'>
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/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: '香蕉'
}]
}
});
</script>
</body>
v-for遍历对象
<div v-for='(value, key, index) in object'></div>
v-if和v-for结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>
<body>
<div id="app">
<!-- 13---age---1 -->
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 使用原生js遍历对象
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
for(var key in obj) {
console.log(key, obj[key])
}
/*
循环结构
*/
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
</script>
</body>
用户切换案例
用户再登录时,可以切换使用用户账号登录还是邮箱地址登录。
<body>
<div class="app">
<span v-if="isUser">用户登录:<input type="text" placeholder="用户登录"></span>
<span v-else>邮箱登录:<input type="text" placeholder="邮箱登录"></span>
<button v-on:click="Clickchange()">切换登陆方式</button>
</div>
<script src="../Vue基础/js/vue.js"></script>
<script>
const vm = new Vue({
el: '.app',
data: {
isUser: true
},
methods: {
Clickchange() {
this.isUser = !this.isUser;
}
}
})
</script>
</body>
案例小问题
如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
但是按道理讲,我们应该切换到另外一个input元素中了。在另一个input元素中,我们并没有输入内容。
为什么会出现这个问题呢?
问题解答:
这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。
所以input框进行复用 但是里面的值不会改变
解决方案:
如果我们不希望Vue出现类似重复利用的问题
可以给对应的input添加key 并且我们需要保证key的不同
<span v-if="isUser">
用户登录:<input type="text" placeholder="用户登录" key="user">
</span>
<span v-else>
邮箱登录:<input type="text" placeholder="邮箱登录" key="email">
</span>
这样就解决了。