vue 第一天
------------------ 1. Vue概述 --------------------
Vue：渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
- 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
- 灵活：在一个库和一套完整框架之间自如伸缩
- 高效：20kB运行大小，超快虚拟 DOM
官网：https://cn.vuejs.org/v2/guide/
------------------ 2. Vue基本使用 --------------------
2.2 Vue.js之HelloWorld基本步骤
<body>
<div id="app">
<div>{
{
msg}}</div>
<div>{
{
1 + 2}}</div>
<div>{
{
msg + '----' + 123}}</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
Vue的基本使用步骤:
- 需要提供标签用于填充数据
- 引入vue.js库文件
- 可以使用vue的语法做功能了
- 把vue提供的数据填充到标签里面
2.2 Vue.js之HelloWorld细节分析
-
实例参数分析
el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
**data：**模型数据（值是一个对象） -
插值表达式用法
将数据填充到HTML标签中
插值表达式支持基本的计算操作 -
Vue代码运行原理分析
概述编译过程的概念（Vue语法→原生语法）
------------------ 3. Vue模板语法 --------------------
前端渲染就是 把数据填充到HTML标签中
3.1 前端渲染方式
1. 原生js拼接字符串
- 基本上就是将数据以字符串的方式拼接到HTML标签中
- 缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。
2. 使用前端模板引擎
优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
缺点：没有专门提供事件机制。
3. 使用vue特有的模板语法
- 差值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
3.2 指令
官网：https://cn.vuejs.org/v2/api/
1. 什么是指令？
- 什么是自定义属性
- 指令的本质就是自定义属性
- 指令的格式：以v-开始（比如：v-cloak）
2. v-cloak指令用法
- 插值表达式存在的问题：“闪动”
- 如何解决该问题：使用v-cloak指令
- 解决该问题的原理：先隐藏，替换好值之后再显示最终的值
<style type="text/css">
1、通过属性选择器 选择到 带有属性 v-cloak的标签
让他隐藏
[v-cloak] {
display: none;
}
</style>
<div id="app">
2、 让带有插值 语法的 添加 v-cloak 属性
在 数据渲染完场之后，v-cloak 属性会被自动去除，
也就是对应的标签会变为可见
<div v-cloak>{
{
msg}}</div>
</div>
3. 数据绑定指令
- v-text 填充纯文本
① 相比插值表达式更加简洁 - v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用 - v-pre 填充原始信息
① 显示原始信息，跳过编译过程（分析编译过程）
<div id="app">
<div>{
{
msg}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{
{
msg}}</div> // HTML
</div>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1: 'HTML
'
}
});
4. 数据响应式
- 如何理解响应式
① html5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化） - 什么是数据绑定
① 数据绑定：将数据填充到标签中 - v-once 只编译一次
① 显示内容之后不再具有响应式功能
<div v-once>{
{
info}}</div>
v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
3.3 双向数据绑定指令
- 双向数据绑定分析
v-mode 指令用法
<input type='text' v-model='uname'/>
/*
双向数据绑定
1、从页面到数据
2、从数据到页面
*/
- MVVM设计思想
① M(model)
② V(view)
③ VM(View-Model)
3.4 事件绑定
1. Vue如何处理事件？
- v-on 指令用法
<input type=‘button' v-on:click='num++'/>
简写
<input type=‘button' @click='num++'/>
2. 事件函数的调用方式
1.直接绑定函数名称
<button v-on:click='handle'>Hello</button>
2.调用函数
<button v-on:click='handle()'>Say hi</button>
methods: {
handle: function() {
// 这里的this是Vue的实例对象+
console.log(this === vm)
// 在函数中 想要使用data里面的数据 一定要加this
this.num++;
}
3. 事件函数参数传递
普通参数和事件对象
<button v-on:click='handle1'>点击1</button>
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.tarName); // 表示事件对象的名称
console.log(event.target.innerHTML) // 对象里面的内容
this.num++;
}
}
- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是 $event
4. 事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认行为
<a v-on:click.stop="handle1">跳转</a>
<a v-on:click.prevent="handle2">跳转</a>
methods: {
handle0: function(){
this.num++;
},
handle1: function(event){
// 阻止冒泡
// event.stopPropagation();
},
handle2: function(event){
// 阻止默认行为
// event.preventDefault();
}
}
5. 按键修饰符 （Vue 预设了很多 具体看文档）
- .enter 回车键
- .esc 退出键
<input v-on:keyup.enter='submit'>
<input v-on:keyup.delete='handle'>
6. 自定义按键修饰符
- 全局 config.keyCodes 对象
规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
<input type="text" v-on:keyup.aaa='handle' v-model='info'>
Vue.config.keyCodes.aaa = 65 // 这个 65 代表的 a 键
// 也就是 按下 a 才触发这个函数
3.5 属性绑定
1. Vue如何动态处理属性
- v-bind指令用法
<a v-bind:href='url'>跳转</a>
简写
<a :href='url'>跳转</a>
2. v-model的低层实现原理分析
<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'>
1.v-model指令的本质
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
handle: function(event){
2.使用输入域中的最新的数据覆盖原来的数据
this.msg = event.target.value;
}
}
});
3.6 样式绑定
样式绑定相关语法细节：
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理？默认的class会保留
1. class样式处理
- 对象语法
<div v-bind:class="{active: isActive,error: isError}">
测试样式
</div>
<button v-on:click='handle'>切换</button>
样式绑定
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;
}
}
});
- 数组语法
<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 = '';
}
}
});
2. style样式处理
- 对象语法
- 数组语法
<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>
3.7 分支循环结构
1. 分支结构
- v-if
- v-else
- v-else-if
- v-show
<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>
2. v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示（已经渲染到了页面）
3. 循环结构
- v-for 遍历数组
item 代表元素 index 索引号 - :key 的作用：帮助Vue区分不同的元素，从而提高性能
<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>
4. 循环结构
- 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>
<div id="app">
<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">
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
基础案例
1. 实现静态UI效果
用传统的方式实现标签结构和样式
2. 基于数据重构UI效果
将静态的结构和样式重构为基于Vue模板语法的形式
处理事件绑定和js控制逻辑
3. 声明式编程
模板的结构和最终显示的效果基本一致