Web前端框架-Vue（初识）
文章目录
-
- web前端三大主流框架
- **1.Angular**
- **2.React**
- **3.Vue**
-
- 什么是Vue.js
- 为什么要学习流行框架
- 框架和库和插件的区别
-
- 一.简介
- 指令
- v-cloak
- v-text
- v-html
- v-pre
- **v-once**
- v-on
- v-on事件函数中传入参数
- 事件修饰符
- 双向数据绑定
-
- v-model
- 按键修饰符
- 自定义按键修饰符别名
- v-bind(属性绑定)
-
- 绑定对象
- 绑定class
- 绑定对象和绑定数组 的区别
- 绑定style
- 分支结构
-
- v-if 使用场景
- v-show 和 v-if的区别
- 循环结构
-
- v-for
- 案例选项卡
-
- 1、 HTML 结构
- 2、 提供的数据
web前端三大主流框架
web前端三大主流框架是Angular、React、Vue。 库 框架
1.Angular
https://angular.io/
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
2.React
https://react.docschina.org/
React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
3.Vue
官方网址：https://cn.vuejs.org/ 数据驱动视图
什么是Vue.js
- Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的）
- Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
- Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
- 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
为什么要学习流行框架
- 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
- 企业中，使用框架，能够提高开发的效率；
- 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
- 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
- 增强自己就业时候的竞争力
- 人无我有，人有我优
框架和库和插件的区别
-
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
-
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
一.简介
MVVM是Model-View-ViewModel的简写 即模型-视图-视图模型
M:【模型】指的是后端传递的数据。
V:【视图】指的是所看到的页面。
VM:【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个方向都实现的，我们称之为数据的双向绑定。
MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了。
为什么会有MVVM框架？
在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定，极大了提高了开发效率。
指令
- 本质就是自定义属性
- Vue中指定都是以 v- 开头
v-cloak
/*
v-cloak指令的用法
1、提供样式
[v-cloak]{
display: none;
}
2、在插值表达式所在的标签中添加v-cloak指令
背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
*/
-
防止页面加载时出现闪烁问题
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> [v-cloak]{ display: none; } style> head> <body> <div id="app"> <div v-cloak>{{msg}}div> div> <script type="text/javascript" src="js/vue.js">script> <script type="text/javascript"> /* v-cloak指令的用法 1、提供样式 [v-cloak]{ display: none; } 2、在插值表达式所在的标签中添加v-cloak指令 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue' } }); script> body> html>
v-text
- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<div id="app">
<p v-text="msg">p>
<p>
{{msg}}
p>
div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
v-html
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<div id="app"> <p v-html="html">p> <p>{{message}}p> <p v-text="text">p> div> <script> let app = new Vue({ el: "#app", data: { message: "通过双括号绑定", html: "html标签在渲染的时候被解析", text: "html标签在渲染的时候被源码输出", } }); script>
v-pre
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{{ this will not be compiled }}span>
<span v-pre>{{msg}}span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
v-once
- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<span v-once>{{ msg}}span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
v-on
- 形式如：v-on:click 缩写为 @click;
v-on事件函数中传入参数
<body>
<div id="app">
<div>{{num}}div>
<div>
<button v-on:click='handle1'>点击1button>
<button v-on:click='handle2(123, 456, $event)'>点击2button>
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>
事件修饰符
-
在事件处理程序中调用
event.preventDefault()或event.stopPropagation()是非常常见的需求。 -
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为
v-on提供了事件修饰符 -
修饰符是由点开头的指令后缀来表示的
-
.stop 阻止冒泡
-
.prevent 阻止默认事件
-
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
-
.once 事件只触发一次
-
<body>
<div id="app">
<div>{{num}}div>
<div class="div1" v-on:click='handle1'>
<button v-on:click='handle0'>点击button>
div>
<div>
<a href="http://www.baidu.com" v-on:click.self.prevent='handle2'>百度
<p>我是一个p标签p>
a>
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: {
handle0: function (event) {
this.num++;
console.log("我是点击子元素");
// 阻止冒泡
// event.stopPropagation();
},
handle1: function (event) {
this.num++
console.log("我是点击父元素");
},
handle2: function (event) {
alert("我弹")
// 阻止默认行为
// event.preventDefault();
}
}
});
script>
body>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
@click.prevent.self =“c” 总是先执行prevent，无论是内部元素还是本身元素触发，他都会prevent默认事件。只不过只有当你点击a元素的时候，才会触发c事件，因此会阻止所有的点击的默认行为
@click.self.prevent =“c” 当你点击的元素是a的时候，才会prevent默认事件，而且执行c事件，因此只会阻止对元素自身的点击。
双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
v-model
- v-model是一个指令，限制在
、