目录
VUE简介
Vue优点
两个核心点
虚拟DOM
MVVM
声明式渲染
Vue入门
1.1入门示例
1. 安装
2. helloworld
1.2 内部指令
1、 v-if 、v-else、v-else-if、v-show
2、v-for
3、v-text 、v-html
4、v-on
5、v-model
6、v-bind
7、v-pre、v-cloak、v-once
VUE简介
渐进式框架
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
渐进式: 构建项目可以由简单到复杂
Vue优点
1.体积小 压缩后的文件只有33k
2.运行效率更高 采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3.双向数据绑定 让开发者不再去操作DOM,将更多的经历投入到业务中
4.生态丰富 市面上有大量的开源项目基于vue 进行开发 成熟稳定.
两个核心点
(1)响应式数据绑定
当数据发生变化的时候,视图自动更新,即双向数据同步,原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据,监控对数据的操作。
(2)组合的视图组件
即页面最终映射为一个组件树,采用树形数据结构进行设计,方便维护,重用。
虚拟DOM
利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。
MVVM
1).字母解释
1.M model 数据
2.V view 视图
3.VM (view-model) 数据和视图的控制
2).当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定 绑定到页面中
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
额外补充:
渲染分为:命令式渲染和声明式渲染
命令式渲染:命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行
声明式渲染 :只需要告诉程序想要什么效果,其他的交给程序来做
具体区别看如下代码,执行结果一样,实现方式不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>命令式渲染和声明式渲染</title>
</head>
<body>
<script type="text/javascript">
var arr = [1,2,3,4,5];
// 命令式渲染:关心每步,关心流程,用命令去实现
var newArr = [];
for(var i = 0, len = arr.length; i < len; i++) {
newArr.push(arr[i] * 2);
}
console.log(newArr);
// 声明式渲染:不关心中间流程,只需要关心结果和实现条件
var arr1 = arr.map(function(item) {
return item*2;
});
console.log(arr1)
</script>
</body>
</html>
1.Vue入门
1.1入门示例
1. 安装
(1) CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(2) NPM安装
npm install vue
2. helloworld
<!--第一步:创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<!--第二步:引入Vue库-->
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--第三步:创建一个Div-->
<div id="app">
<!--Vue的模板的绑定数据的方法,用两对花括号进行绑定Vue中的数据对象的属性 -->
{{message}}
</div>
<!--第四步:创建Vue的对象,并把数据绑定到上面创建好的div上去。-->
<script type="text/javascript">
var app=new Vue({ // 创建Vue对象。Vue的核心对象。
el:'#app', // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
data:{ // data: 是Vue对象中绑定的数据
message:'hello Vue!' // message 自定义的数据
}
})
</script>
</body>
</html>
1.2 内部指令
1、 v-if 、v-else、v-else-if、v-show
这几个条件指令用于显示与隐藏各类元素,使用方式如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构语法</title>
</head>
<body>
<div id="app" align="center">
<h1>根据根据分数评级</h1>
<!-- v-if当判断条件成立时 div展现 控制dom元素增加 开销较大 -->
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80">良好</div>
<div v-else-if="score>=70">中等</div>
<div v-else>不及格</div>
<!-- 直接渲染到页面中采用display: none;隐藏属性 如果频繁展现的元素 使用v-show -->
<div v-show="flag">测试show数据</div>
<button @click="flag= !flag">展现</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
//定义分数
score: 100,
flag: false
}
})
</script>
</body>
</html>
v-if与v-show的区别
- v-if: 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,开销较高,在运行时条件很少改变时使用。
- v-show:调整css dispaly属性,开销较小,在常频繁地切换时使用。
2、v-for
(1) 基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--模板-->
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<!--js代码-->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65]
}
})
</script>
</body>
</html>
(2) 对象遍历
参数: 第一个为值,第二个为键名,第三个为索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script></head>
</head>
<body>
<!--模板-->
<div id="app">
<ul>
<li v-for="(value,key,index) in object">
{{ index }}. {{ key }} - {{ value }}
</li>
</ul>
</div>
<!--js代码-->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
object:{
firstName: 'John',
lastName: 'Doe'
}
}
})
</script>
</body>
</html>
3、v-text 、v-html
(1)v-text
{{xxx}}取值有个弊端,当网速很慢或javascript出错时,会在页面显示{{xxx}} (插值闪烁),Vue提供的v-text可以解决这个问题
作用: 直接展现解析数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div>
{{ message }}
</div>
<!--和下面的一样-->
<div v-test="message"></div>
</body>
</html>
(2)v-html
用于解析html的数据
<!-- v-html指令 直接显示html效果 容易被攻击 本网站内可以使用
第三方数据来源不要使用-->
<p v-html="html"></p>
4、v-on
(1)常规用法
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--v-on常规用法-->
<div id="add">本场比赛得分: {{count}}
<button v-on:click="add">加分</button>
</div>
<!--//JS-->
<script type="text/javascript">
new Vue({
el: '#add',
data:{
count: 1
},
methods: {
add: function(){
this.count++;
}
}
});
</script>
</body>
</html>
(2)缩写
<button @click="add">加分</button>
5、v-model
用法: 在表单控件或者组件上创建双向绑定,当js数据修改时,页面内容变化, 当页面内容修改时,则数据变化.
以下的model都需要在data中声明初始值
data: {
message: "a",
count: 1,
status: [],
sex: '男',
selected: ''
}
(1)input
<input type="text" v-model="message">
(2)textarea
<textarea cols="30" rows="10" v-model="message"></textarea>
(3)checkbox
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态:{{status}}</div>
(4)radio
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别:{{sex}}</div>
(5)select
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected: {{ selected }}</div>
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message"/>
<br>
<textarea cols="30" rows="10" v-model="message"></textarea>
<br>
<input type="checkbox" id="first" value="1" v-model="status"/>
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status"/>
<label for="second">无效</label>
<div>状态:{{status}}</div>
<br>
<input type="radio" id="one" value="男" v-model="sex"/>
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex"/>
<label for="one">女</label>
<div>性别:{{sex}}</div>
<br>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected {{ selected }}</div>
<br>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: "a",
count: 1,
status: [],
sex: '男',
selected: ''
}
})
</script>
</body>
</html>
6、v-bind
用于处理html标签的动态属性,即动态赋值。
(1) 常规用法
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-blind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" width="400px">
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
imgSrc: "../img/20220114112403.png"
}
})
</script>
</body>
</html>
(2) 缩写
<img :src="imgSrc" width="400px">
7、v-pre、v-cloak、v-once
(1)v-pre
用法:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-pre>{{ message }}</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'A'
}
})
</script>
</body>
</html>
(2)v-cloak
介绍:
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<div id="app">
<div v-cloak>{{message}}</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '欢迎使用'
}
})
</script>
</body>
</html>
(3)v-once
用法:
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<span v-once>{{message}}</span>
</div>
<script>
new Vue({
el:'#app',
data: {
message: '0'
}
})
</script>
</body>
</html>