一.Vue概述
二.Vue的基本使用
2.1Vue.js之hello world 基本实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{message}}</span>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hello Vue'
}
});
</script>
</html>
2.2Vue.js之hello world 细节分析
1.实例参数分析
* el : 元素的挂载位置(值可以是CSS选择器或者DOM元素)
* data : 模型数据 (值是一个对象)
2.插值表达式({{}})的用法
* 将数据填充到HTML标签中
* 插值表达式支持基本的计算操作
3.Vue代码运行原理分析
* 概述编译过程的概念(Vue语法--->原生语法)
三.Vue模板语法
3.1.模板语法概述
1.如何理解前端渲染
2.前端渲染方式
-
原生js拼接字符串
-
使用前端模板引擎
-
使用Vue特有的模板语法
3.2.指令
1.什么是指令
-
什么是自定义属性
-
指令的本质就是自定义属性
-
指令的格式:以v-开始(比如:v-cloak)
2.v-cloak指令用法
-
插值表达式({{}})存在的问题:“闪动”
-
如何解决该问题:使用v-cloak指令
-
原理:先隐藏,替换好值之后再显示最终的值
官网:https://cn.vuejs.org/v2/api/
3.数据绑定指令
* v-text 填充纯文本
①相比插值表达式更加简洁
* v-html 填充Html片段
①存在安全问题
②本网站内部数据可以使用,来自第三方的数据不可以用
* v-pre 填充原始信息
①显示原始信息,跳过编译过程(分析编译过程)
!注意:v-text没有闪动问题
4.数据响应式
* 如何理解响应式
① html5中的响应式 (屏幕尺寸的变化导致样式的变化)
② 数据的响应式 (数据的变化导致页面内容的变化)
* 什么是数据绑定
① 数据绑定 : 将数据填充到标签中
* v-once 只编译一次
① 显示内容之后不再具有响应式功能
v-once的应用场景:如果显示的信息后续不需要再修改,可以使用v- once,这样可以提高性能
3.3.双向数据绑定
1.什么是双向数据绑定
* v-model指令
2.双向数据绑定分析
<body>
<div id="app">
<input type="text" v-model="message"> {{message}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hello Vue'
}
});
</script>
-
双向数据绑定((页面渲染的数据改变会影响vue代码里面的数据,反过来,vue代码的数据改变也会影响页面数据的改变))
-
双向数据绑定主要用于输入框
3.MVVM设计思想
①M(model)
②V(view)
③VM(View-Model)
M(data里面的数据)(提供数据)
V(页面展示效果)
* Model(模板数据)通过ViewModel的数据绑定(data binding)把数据绑定到View(视图)
* View(视图)通过ViewModel的事件监听(DOM listeners)修改Model(模板数据)
3.4事件绑定
1.Vue如何处理事件
* v-on指令用法
<input type="button" v-on:click="num++">
* v-on简写形式
<input type="button" @click="num++">
2.事件函数的调用方式
* 直接绑定函数名称
<button v-on:click="say"></button>
* 调用函数
<button v-on:click="say()"></button>
3.事件函数参数传递
* 普通参数和事件对象
<button v-on:click="say('hi',$event)"></button>
1.事件绑定-参数传递
①如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
②如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
2.事件绑定-自定义按键修饰符
规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应event.keyCode的值
3.5.属性绑定
1.Vue如何动态处理属性
* v-bind指令用法
<a v-bind:href="url">跳转</a>
* 缩写形式
<a :href="url">跳转</a>
2.v-model的底层实现原理分析
<input type="text" v-bind:value="msg" v-on:input="$event.target.value">
3.6.样式绑定
1.class样式处理
* 对象语法
<span v-bind:class="{类名:布尔值}">hello</span>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
.active {
color: red;
}
.bing {
font-size: 100px;
}
</style>
</head>
<body>
<div id="app">
<span v-bind:class="{active:isActive,bing:isBing}">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hello Vue',
isActive: true,
isBing: true
}
});
</script>
</html>
* 数组语法
<span v-bind:class="['类名']">hello</span>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
.active {
color: red;
}
.bing {
font-size: 100px;
}
</style>
</head>
<body>
<div id="app">
<span v-bind:class="['active','bing']">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hello Vue'
}
});
</script>
</html>
注意:样式绑定相关语法细节
①对象绑定和数组绑定可以结合使用
②class绑定的值可以简化操作
③默认的class会保留,当给class样式绑定时,相当于给元素新添加一个classl类名
2.style样式处理
* 对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<span v-bind:style="{color:activeColor,fontSize:size}">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hello Vue',
activeColor: 'red',
size: '100px'
}
});
</script>
</html>
注意:样式中属性名需要驼峰命名
数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<span v-bind:style="[activeColor,size]">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hello Vue',
activeColor: {
color: 'red'
},
size: {
fontSize: '100px'
}
}
});
</script>
</html>
3.7.分支循环结构
1.分支结构
①v-if
②v-else
③v-else-if
④v-show
2.v-if与v-show的区别
①v-if控制元素是否渲染到页面
②v-show控制元素是否显示(已经渲染到了页面)
注意:当我们需要频繁切换显示组件时,为了考虑页面性能,应该采用v-show,反正则使用v-if
3.循环结构(数组)
* v-for遍历数组
<li v-for="item in arr">{{item}}</li>
<li v-for="(item,index) in arr">{{item}}{{index}}</li>
*key的作用:帮助Vue区分不同的元素,从而提供性能
<li v-for="(item,index) in arr" :key="index">{{item}}{{index}}</li>
3.循环结构(对象)
* v-for遍历对象
<li v-for="(value,key,index) in obj" :key="index">{{value}}{{key}}{{index}}</li>
* v-if和v-for结合使用
<li v-for="(value,key,index) in obj" :key="index" v-if="value=1">{{value}}{{key}}{{index}}</li>