Vue基础
渐进式JavaScript框架
声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
官网:https://cn.vuejs.org/v2/guide/
易用:熟悉HTML、CSS、JavaScript知识后
灵活:在一个库和一套完整框架之间自如伸缩
高效:20kb运行大小,超快虚拟DOM
[vue官方文档]https://cn.vuejs.org/v2/guide/
Vue基本使用
步骤:
1、需要提供标签用于填充数据
2、引入vue.js库文件
3、可以使用vue的语法做功能
4、把vue提供的数据填充到标签里面
el:元素的挂载位置(值可以是CSS选择器或者DOM元素)
data:模型数据(值是一个对象)
//1、实例化
let vm = new Vue({
//2、添加选项参数
//3、作用的元素
el:"#app",
//4、数据
data: {
name : 'jack Ma',
age: 18,
sex :'男'
},
//5、方法:函数
methods: {}
});
插值表达式用法
- 将数据填充到HTML标签里里面
- 插值表达式支持基本的计算操作
前端渲染
把数据填充到HTML
把模板和数据结合就是前端渲染,产物就是静态HTML
前端渲染方式
- 原生js拼接字符串
- 使用前端模板引擎
- 使用vue特有的模板语法
原生js拼接字符串
基本上就是将数据以字符串的方式拼接到HTML标签中。
缺点:不同开发人员的代码风格差别很大
使用前端模板引擎
基于模板引擎,拥有自己的一套模板语法规则
Vue模板语法
- 差值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
什么是指令?
指令的格式:以v-开始(比如:v-cloak)
指令的本质就是自定义属性
v-cloak指令
- 插值表达式存在问题:“闪动”
- 如何解决该问题:使用v-cloak指令
- 解决该问题的原理:先隐藏,替换好值后再显示最终的值
1、提供样式
[v-cloak]{
display:none;
}
2、在插值表达式所在的标签中添加v-cloak指令
原理:通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
数据绑定指令
-
v-text 填充文本
1、相比插值表达式更加简洁
-
v-html 填充HTML片段
1、存在安全问题
2、本网站内部数据可以使用,来自第三方的数据不可以用
-
v-pre 填充原始信息
1、显示原始信息,跳过编译过程(分析编译过程)
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{
{msg}}</div>
var vm = new Vue({
el:'#app',
data:{
msg:'holle',
msg1: '<h1>Html</h1>'
}
})
数据响应式
-
如何理解响应式
- html5中的响应式(屏幕尺寸的变化导致样式的变化)
- 数据的响应式(数据的变化导致页面内容的变化
-
什么是数据绑定
- 数据绑定:将数据填充到标签中
-
v-once只编译一次
- 显示内容之后不再具有响应式功能
v-once的应用场景:如果显示的信息后续不需要再修改,可以使用v-once,提高性能
双向数据绑定
双向绑定分析
-
v-model指令用法
<input type='text' v-model='msg';
v-model=‘数据源’;
MVVM设计思想
- M(model)
- V(view)
- VM(View-Model)
事件绑定
1、Vue如何处理事件?
-
v-on指令用法
-
<input type = 'button' v-on:click='numm++'/>
-
-
v-on简写形式
-
<input type='button'@click='num++'/>
-
2、事件函数的调用方式
-
直接绑定函数名称
-
<button v-on:click='say'>hello</button>
-
-
调用函数
-
<button v-on:click='say()'say hi</button>
3、事件函数参数传递
-
普通参数和事件对象
-
<button v-on:click='say("hei",$event)'say hi</button>
最后一个参数代表事件对象
-
如果事件直接绑定函数名称,那么默认会传递事件作为事件函数的第一个参数
-
如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
-
4、事件修饰符
-
.stop阻止冒泡
-
<a v-on:click.stop="handle">跳转</a>
-
-
.prevent阻止默认行为
-
<a v-on:click.prevent="handle">跳转</a>
-
-
使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生,因此,用
- v-on:click.prevent.self:会阻止所有点击
- v-on:click.self.prevent:只会阻止对元素自身的点击
-
.self :给对象的本身绑定事件,点击子元素不起作用
-
.once:只给事件绑定一次
5、按键修饰符
-
.enter 回车键
-
<input v-on:keyup.enter = 'submit'>
-
-
.delete删除键
-
<input v-on:keyup.deletee = 'submit'>
-
-
.tab
-
.up
-
.down
-
.left
-
.right
6、自定义按键修饰符
- 全局config.keyCodes对象
- Vue.config.keyCodes.f1 = 112
简单计算器
1、通过v-model指令实现数值a和数值b的绑定
2、给计算按钮绑定事件,实现计算逻辑
3、将计算结果绑定到对应位置
属性绑定
1、Vue如何动态处理属性
v-bind:绑定标签属性,语法糖形式
-
v-bind指令用法
-
<a v-bind:href='url'>跳转</a>
-
-
缩写形式
-
<a :href='url'>跳转</a>
-
2、v-model的低层实现原理分析
-
<input v-bind:value="msg" v-on:input="msg=$event.taeget.value">
样式绑定
1、class样式处理
-
对象语法
-
<div v-bind:class="{active: isActive}"></div>
-
-
数组语法
-
<div v-bind:class="{activeClass: errorClass}"></div>
-
主要用于给控件加样式
<!DOCTYPE html>
<html lang="ZH-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
border: 1px solid red;
width: 100px;
height: 100px;
}
.error{
background-color: pink;
}
</style>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass,errorClass]">测试样式</div>
<button v-on:click="handle">切换</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle(){
this.activeClass = ''
}
}
});
</script>
</body>
</html>
样式绑定相关语法细节
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理?默认的class会保留
<!DOCTYPE html>
<html lang="ZH-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
border: 1px solid red;
width: 100px;
height: 100px;
}
.error{
background-color: pink;
}
.test{
color: blue;
}
.base{
font-size: 28px;
}
</style>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass,errorClass,{test: isTest}]">测试样式</div>
<div v-bind:class='arrClasses'></div>
<div v-bind:class='objClasses'></div>
<div class="base" v-bind:class='objClasses'></div>
<button v-on:click="handle">切换</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
activeClass: 'active',
errorClass: 'error',
isTest: true,
arrClasses: ['active','error'],
objClasses: {
active: true,
error: true
}
},
methods: {
handle(){
// this.activeClass = '',
// this.errorClass = '',
// this.isTest = false
this.objClasses.error = false
}
}
});
</script>
</body>
</html>
style样式处理
-
对象语法
-
<div v-bind:style="{color: activeColor,fontSize: fontSize}"></div>
-
-
数组语法
-
<div v-bind:style="[objstyle, override]"></div>
-
<div id="app">
<div :style="{ color:classborder, fontSize: fontSize} ">1234</div>
<div :style="objstyle "></div>
<div :style="[objstyle, override]"></div>
<button v-on:click = "handle">切换</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
classborder: 'blue',
fontSize: "20px",
objstyle: {
width: '100px',
height: '200px',
border: '2px solid #8a8a8a'
},
override: {
border: '6px solid red',
background: 'yellow'
}
},
methods: {
handle(){
this.objstyle.width = '200px'
}
}
});
分支结构
- v-if
- v-else
- v-else-if
- v-show
v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示(已经渲染到页面)
如果需要频繁隐藏和显示一个元素,推荐选择v-show
如果一个元素出现后变化比较少,推荐使用v-if。控制DOM元素的添加和删除,开支比较大。
<div id="app">
<input type="text" v-model="socre">
<div v-if="socre >= 90">优秀</div>
<div v-else-if="socre >= 80 && socre < 90">良好</div>
<div v-else-if="socre >= 60 && socre < 80">一般</div>
<div v-if="socre < 60">差</div>
<div v-show="flag">测试</div>
<button v-on:click="handle">切换</button>
</div>
<script>
// v-show的原理:控制元素样式是否显示 display:none
let vm = new Vue({
el:"#app",
data: {
socre: 0,
flag: true
},
methods: {
handle(){
// 这个不可以改变
// if(this.flag = false){
// this.flag = true
// }else{
// this.flag = false
// }
this.flag = !this.flag;
}
}
});
</script>
循环结构
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>
item表示当前的数据,index表示索引
<div id="app">
<ul>
<li v-for="item in lista">{
{item}}------</li>
<li v-for="(item, index) in listb" >{
{item.cname}}------{
{index}}-</li>
<li></li>
<li v-for="(item, index) in listc">{
{item}}-----{
{index}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
lista: ['apple-a', 'banana-a', 'orange-a'],
listb: [
{
ename: 'apple-b',
cname: '苹果'
},
{
ename: 'banana-b',
cname: '香蕉'
},
{
ename: 'orange-b',
cname: '橙子'
}
],
listc: {
name1: "orange-c",
name2: 'apple-c' ,
name3: 'banan-c'
}
},
methods: {}
});
</script>