1.Vue.js是什么?
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
什么是渐进式框架:
渐进式的意思就是 "主张最少"。每个框架都会有自己的一套编码方式,从而对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响咋业务开发中的使用方式。
通俗理解渐进式的意思就是:你可以只用我的一部分,而不是用了我这一部分就必须用我的所有部分。
Vue优点:
a.轻量级的框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb。Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。
b.简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习。
c.双向数据绑定:同时也是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。
d.组件化:在前端应用里我们是否也可以像面向对象编程一样把模块封装呢?这就引入了组件化开发的思想。Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中 我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
e.视图&数据&结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。
f.运行速度快
2. 库和框架的区别
2.1 库(Library)
本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
JavaScript:document.getElementById()
jQuery: $('').val()
2.2 框架(Framework)
是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:自定义mvc、SpringMVC、vue等。
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
侵入式代码:
a.指的是引入或继承了别的包或框架;
b.从字面意思理解,就是你的代码里已经嵌入了别的代码,这些代码可能是你引入过的框架,也可能是你通过接口继承得来的(比如:java中的继承),这样你就可以拥有侵入代码的一些功能。所以我们就称这段代码是侵入式代码。
c.比如:自定义MVC框架就是侵入式框架。我们在在使用自定义MVC框架的时候就要继承自定义MVC框架所提供中央调度器(DispatchServlet),这时自定义MVC框架的代码就侵入到我们的代码里面了,所以自定义MVC框架的代码就是侵入式的。
d.侵入式代码的优点:侵入式可以使用户跟框架更好的结合,更容易更充分的利用框架提供的功能。
e.侵入式代码的缺点:侵入式让用户代码产生对框架的依赖,框架外代码就不能使用了,不利于代码复用,依赖太多重构代码太痛苦了。一句话概括就是,你的代码需要依赖框架的代码,如果把框架拿掉或者换一个框架,就需要重新修改代码(因为使用侵入式的框架,一般需要继承或者实现框架的某一个类或者接口)。
非侵入式代码:
a.非侵入式与侵入式正好相反,用户的代码不需要引入框架代码的信息,从类的编写者角度来看,察觉不到框架的存在。
b.非侵入式代码优点:代码可复用,方便移植。体现了代码的设计原则:高内聚,低耦合。
c.非侵入式代码缺点:用户代码与框架代码交互的方式可能就比较复杂。
d.Vue框架就是非侵入式框架。
3. MVVM的介绍
MVVM,MVVM是Web前端一种非常流行的开发模式,MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
M:model数据模型(JSON)
V:view视图(HTML)
VM:ViewModel 视图模型.可以把它理解成“胶水”,它是把View和Model结合起来。把后台Model的数据提供给前端View,再把前端View的数据(比如form表单)提供给后台Model。
通过ViewMode可以实现数据和视图的完全分离。
1) V(修改数据) -> M 将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
$('#btn_login').click(function(){
通过ajax将页面中的数据通过json格式传递到后端服务器
});
2) M(修改数据) -> V 将后端数据(JSON)通过赋值的方式在视图层展现(后端到前端)
通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面
$.ajax({
url:
data:
dataType:
type:
success:function(data){
$('#book_name').val(data....); .text() .html()
...
}
})
共性:不管是前端到后端,还是后端到前端,使用传统的方式都必须首先拿到
页面的Document元素,只有拿到了页面元素才能进行后续操作
MVVM(数据双向绑定)
M -> VM -> V
V -> VM -> M
请大家记住,要丢弃之前的思想(不要想着如何去拿到页面的元素),而是想着去操作数据!!!
数据是核心
注1:虽然没有完全遵循MVVM模型,Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型
注2:学习Vue要转化思想:“不要在想着怎么操作DOM,而是想着如何操作数据!!!”
4.Vue导入
概述:Vue是一个类似于Jquery的一个JS框架,所以,如果想使用Vue,则在当前页面导入Vue.js文件即可。
语法:
<!-- 在线导入 -->
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>
五. Vue基本语法
5.1 插值表达式
概述:插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"
语法:{{ 变量名/对象.属性名 }}
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ name }}</h1>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue({
//让vue接管div标签
el:"#app",
//定义数据,里边包含一个属性name,值为"Hello Vue"
data:{
name:"Hello Vue"
}
});
</script>
</body>
</html>
6.显示数据(v-text和v-html)
概述:
v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.
当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。
插值闪烁: 在数据未加载完成时,页面会显示出原始的{{}}, 过一会才会展示正常数据.
语法:
v-text:<span v-text="msg"></span> <!-- 相当于<span>{{msg}}</span> -->
v-html:<span v-html="msg"></span> <!-- 相当于<span>{{msg}}</span> -->
区别:
v-text:把数据当作纯文本显示.
v-html:遇到html标签,会正常解析
7.数据双向绑定数据(v-model)
概述:
Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化.
注意:
1. 双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”等
2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
3. 单个复选框, 绑定的是boolean类型
4. 多个复选框, 绑定的是数组
5. select单选对应字符串,多选对应也是数组
8.事件处理(v-on)
8.1.事件绑定(v-on)
概述:
Vue中也可以给页面元素绑定事件.
语法:
<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点我</button>
注意:
Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on
8.2.事件修饰符
概述:事件修饰符主要对事件的发生范围进行限定
语法:
<button @事件名.事件修饰符="函数名/vue表达式">点我</button>
分类:
.stop :阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
.prevent :阻止默认事件发生
.capture :使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
.self :只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
.once :只执行一次
9.循环遍历(v-for)
9.1.遍历数组
语法:
v-for="item in items"
v-for="(item,index) in items"
items:要迭代的数组
item:存储数组元素的变量名
index:迭代到的当前元素索引,从0开始。
代码:
<div id="app">
<ul>
<li v-for="(user, index) in users">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",//el即element,要渲染的页面元素
data: {
users:[
{"name":"张三","age":8,"gender":"男"},
{"name":"李四","age":12,"gender":"女"},
{"name":"王五","age":4,"gender":"男"}
]
}
});
</script>
9.2.遍历对象
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
value,对象的值
key, 对象的键
index, 索引,从0开始
代码:
<div id="app">
<ul>
<li v-for="(value,key,index) in person">
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",//el即element,要渲染的页面元素
data: {
person:{"name":"张三", "age":18, "address":"中国"}
}
});
</script>
9.3.key
概述:
:key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.
案例:
<div id="app">
<button @click="add">添加</button>
<ul>
<li v-for="name in list">
<input type="checkbox"> {{name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: ["张三", "李四", "王五"]
},
methods: {
add() {
//注意这里是unshift,向数组的头部添加一个元素
this.list.unshift("老刘");
}
}
});
</script>
10.显示数据(v-bind)
概述:
v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值
语法:
<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>
案例:
<div id="app">
<input type="button" :value="msg"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"我是按钮"
}
});
</script>
11、Vue其他语法
11.1.计算属性
概述:计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.
语法:
var app = new Vue({
el:"#app",
//计算属性必须放在Vue的computed中
computed:{
//定义计算属性
属性名(){
return "返回值";
}
}
});
案例:
<div id="app">
<h1>{{date}}</h1>
<h1 v-text="date"></h1>
<h1 v-html="date"></h1>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
computed:{
//定义一个birth方法,该方法就是一个计算属性,可以在插值表达式中使用
date(){
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDay();
return year + "-" + month + "-" + day;
}
}
});
</script>
11.2.watch监听
概述:
watch可以监听简单属性值及其对象中属性值的变化.
watch类似于onchange事件,可以在属性值修改的时候,执行某些操作.
语法:
var app = new Vue({
el:"#app",
data:{
message:"张三",
person:{"name":"heima", "age":13}
},
//watch监听
watch:{
//监听message属性值,newValue代表新值,oldValue代表旧值
message(newValue, oldValue){
console.log("新值:" + newValue + ";旧值:" + oldValue);
},
//监控person对象的值,对象的监控只能获取新值
person: {
//开启深度监控;监控对象中的属性值变化
deep: true,
//获取到对象的最新属性数据(obj代表新对象)
handler(obj){
console.log("name = " + obj.name + "; age=" + obj.age);
}
}
}
});