前言
经过前面Js部分的学习和理解,我们已经掌握的差不多了,我们接下来学习目前前端框架中最易上手和理解的Vue2框架的基本使用和学习
一、Vue框架的优点
-
渐进式 JS 框架
-
渐进式:
可以只使用单独的一部分模块,由浅到深,由简单到复杂
-
声明式渲染 -> 组件系统 -> 客户端路由 ->集中式状态管理 -> 项目构建
-
易用性、灵活性、渲染高效性
-
体积小
-
效率高
-
双向数据绑定
-
生态丰富,学习成本低
二、基本使用
引入Vue.js
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
使用Vue的语法
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
}
});
填充数据到标签里
<div id="app">{{ msg }}</div>
综合如下:
<div id="app">{{ msg }}</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
}
});
</script>
三、Vue模板语法
前端渲染
通过模板语法把数据填充到HTML标签内
原生JS拼接字符串
-
原理:基本上就是将数据以字符串的方式拼接到 HTML 标签中
-
缺点:不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来
使用前端模板引擎
-
优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护
-
缺点:没有提供事件机制,事件的处理一般依赖事件委托
使用Vue特有的模板语法
-
插值表达式
-
指令
-
事件绑定
-
属性绑定
-
样式绑定
-
分支循环结构
四、Vue指令
本质是Vue的自定义属性,以 v- 开头
v-clock
可以隐藏未编译的 Mustache 标签直到实例准备完毕
问题:先出现大括号之后,再出现内容
解决:
先隐藏模板语法,替换好之后会再显示最终的值
<div id="app" v-cloak>{{ msg }}</div>
<style>
[v-cloak]{
display: none;
}
</style>
v-text
-
填充纯文本
-
没有“闪动”的问题,注意这里“闪动”的意思是:先出现“Mustache”语法 (双大括号) 再出现内容
v-html
-
填充 HTML 片段
-
存在安全性问题,关于 XSS攻击
-
一般本网站数据可以使用,来自第三方的数据或者用户数据的数据要小心使用
v-pre
-
填充原始信息,注意用法和上面两个不一样
-
显示原始信息,跳过编译过程
v-once
-
只编译一次,一旦显示内容之后不再具有响应式功能
-
应用场景:如果显示的信息后续不需要再修改,提高性能!
v-model
双向数据绑定:数据引起视图变化,视图也会引起数据变化
<div id="app" v-cloak>
<p>{{ msg }}</p>
<input type="text" v-model="msg">
</div>
底层原理是通过 Object.defineProperty 实现的
关于底层源码探索有兴趣的可以私信我获取~
MVVM思想
-
M 数据
-
V 视图
-
VM (ViewModel)负责视图到数据、数据到视图的逻辑处理
-
视图到数据通过
DOM Listeners
-
数据到视图通过
Data Bindings
五、事件绑定
v-on:和@符号
<p @click='handle'>{{ num }}</p>
<p @click='handle()'>{{ num }}</p>
var vm = new Vue({
el: '#app',
data: {
num: 1
},
methods: {
// 这里函数的3种写法
handle: function() {
// this 是 Vue 的实例,注意这里不能用箭头函数
this.num++;
}
},
});
参数传递和事件对象
- 不传其他参数的情况下写不写 $event 都能够拿到事件对象,否则必须要写 $event
<button @click="handleClick">+</button>
<button @click="handleClick($event)">+</button>
- 传递其他参数的情况下要通过 $event 拿到事件对象,与 $event 的书写位置无关
事件修饰符
阻止冒泡
阻止默认行为
<form v-on:submit.prevent="onSubmit"></form>
注意点:
-
相同点是点击自己的时候,自己绑定的事件肯定会触发,默认行为也会阻止
-
不同点是:默认行为是否可以被儿子触发
@click.self.prevent,默认行为可以被儿子触发
@click.prevent.self,默认行为将不会被触发(无论是点击自己还是点击儿子)
绑定多个事件
绑定多个不同的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body>
<div>
<p>{{msg}}</p>
<button v-on="{ click: handleClick, mouseover: handleMouseover }">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
name: 'App',
data: {
msg: 'hello'
},
methods: {
handleClick() {
this.msg = 'handleClick';
},
handleMouseover() {
this.msg = 'handleMouseover';
}
},
});
</script>
</body>
</html>
绑定多个相同的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body>
<div>
<p>{{msg1}}</p>
<p>{{msg2}}</p>
<button v-on:click="handleClick1(), handleClick2()">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
name: 'App',
data: {
msg1: 'hello',
msg2: 'hello'
},
methods: {
handleClick1() {
this.msg1 = 'handleClick1';
},
handleClick2() {
this.msg2 = 'handleClick2';
}
},
});
</script>
</body>
</html>
按键修饰符
可以限制那个按键按下的时候才触发,一般配合 keyup 使用
定义的时候不能使用 camelCase(驼峰写法)
enter
- 关键字写法
<input v-on:keyup.enter='submit'>
- keyCode 写法
<input v-on:keyup.13="submit">
delete
<input v-on:keyup.delete='clearAll'>
六、用Vue实现一个计算器的效果
重点:v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<span>数值A:</span>
<input type="text" v-model="a">
</div>
<div>
<span>数值B:</span>
<input type="text" v-model="b">
</div>
<div>
<button v-on:click='handle'>计算</button>
<span v-text="result"></span>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function () {
this.result = parseInt(this.a) + parseInt(this.b);
}
},
});
</script>
</body>
</html>
七、属性绑定
动态属性绑定
<div id="app">
<a v-bind:href="url">百度</a>
<!-- <a :href="url">百度</a> -->
<button v-on:click='handle'>切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
},
methods: {
handle: function () {
this.url = 'http://www.qq.com';
}
},
});
</script>
v-model的实现分析
<div id="app">
{{ msg }}
<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'>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
handle: function(event) {
this.msg = event.target.value;
}
},
});
</script>
class样式处理
对象语法
<div id="app">
<div v-bind:class="{active: isActive, bor: isBor}">
{{ msg }}
</div>
<button v-on:click="handle">切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
isActive: true,
isBor: true
},
methods: {
handle: function() {
this.isActive = !this.isActive;
this.isBor = !this.isBor;
}
},
});
</script>
数组语法
<div id="app">
<div v-bind:class="[activeClass, borClass]">
// 或者
<div v-bind:class="['active', 'bor']">
{{ msg }}
</div>
<button v-on:click="handle">切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
activeClass: 'active',
borClass: 'bor'
},
methods: {
handle: function() {
this.activeClass = '';
this.borClass = '';
}
},
});
</script>
- 对象绑定和数组绑定可以结合使用
- class绑定的值可以放在data里
- 默认自带的class会保留
八、循环结构
v-if
<div id="root">
<div v-if='score>=90'>优秀</div>
<div v-else-if='score>=80'>良好</div>
<div v-else-if='score>=60'>一般</div>
<div v-else>差</div>
</div>
v-show
<div id="app">
<div v-if='flag'>测试</div>
<div v-show='flag'>测试</div>
<button v-on:click='handle'>切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
flag: false
},
methods: {
handle: function() {
this.flag = !this.flag;
}
},
});
</script>
v-if和v-show的区别
-
v-if: 是否渲染到页面
-
v-show: 是否显示到页面
v-for
可以遍历数组和对象
代码为遍历数组
<div id="app">
<div v-for="item in fruits">{{item}}</div>
<div v-for="(item, index) in fruits">{{item + '--' + index}}</div>
<div v-for="item in myFruits">
<span>{{item.ename}}</span>
<span>---</span>
<span>{{item.cname}}</span>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
ename: 'apple',
cname: '苹果'
},{
ename: 'orange',
cname: '橘子'
},{
ename: 'banana',
cname: '香蕉'
}]
}
});
</script>
key的作用:帮助Vue区分不同的元素,从而提高性能
v-if和v-for结合使用
<div id="app">
<!-- 如果 value 等于 xxx 才渲染 -->
<div v-if='value=="xxx"' v-for="(value, key, index) in obj">
{{value + '~~~' + key + '~~~' + index}}
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'xxx',
age: 18,
gender: 'male'
}
}
});
</script>
最后,给大家留个小案例实现一下,用本篇内容实现Tab选项卡案例
留言区留言或者私信我可以获取案例代码~
有不明白的或者有其他问题的可以评论区留言噢
私信回复JS思维导图可获取完整知识导图~
今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步,成为更好的自己!
标签:el,分享,app,Vue,msg,new,历程,data From: https://blog.csdn.net/m0_60623820/article/details/141960341