1. Vue概述
前端演变的过程
1.随着JavaScript的诞生,我们可以操作页面的DOM元素及样式,页面有了一些动态的效果,但是依然是以静态
为主。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/jquery.min.js"></script>
<script>
function change(){
var str = document.getElementById("testh2").value
if(str === '文字内容'){
document.getElementById("testh2").value = "改变文字内容"
}else{
document.getElementById("testh2").value = "文字内容"
}
}
</script>
</head>
<body>
<input id="testh2" value="文字内容">
<button onclick="change()">点我</button>
</body>
</html>
上图中的代码,通过操作dom元素来改变dom显示的内容
== equality 等同,=== identity 恒等。
==, 两边值类型不同的时候,要先进行类型转换,再比较。
下面分别说明:先说 =,这个比较简单。下面的规则用来判断两个值是否=相等:
1、如果类型不同,就[不相等]
2、如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
4、如果两个值都是true,或者都是false,那么[相等]。
5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
6、如果两个值都是null,或者都是undefined,那么[相等]。
再说 ==,根据以下规则:
1、如果两个值类型相同,进行 === 比较。
2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
a、如果一个是null、一个是undefined,那么[相等]。
b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。 js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说(比较麻 烦,我也不大懂)
e、任何其他组合,都[不相等]。
= 赋值运算符
== 等于
=== 严格等于
例:var a = 3;
var b = “3”;
ab 返回 true
a=b 返回 false因为a,b的类型不一样===用来进行严格的比较判断
2.开发人员通过ajax与后端交互,然后通过JS操作Dom元素来实现页面动态效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/jquery.min.js"></script>
<script>
function change(){
var str = $('#testh2').val()
str==='文字内容'? $('#testh2').val("改变文字内容"):$('#testh2').val("文字内容")
}
</script>
</head>
<body>
<input id="testh2" value="文字内容">
<button onclick="change()">点我</button>
</body>
</html>
通过jquery来操作dom元素,会简单很多。这个阶段ajax流行起来,通过ajax调用后端接口,然后使用jquery刷新dom对象显示。
3.MVVM(Model-View-ViewModel)中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响
- 只要Model发生了改变,View上自然就会表现出来。
- 当用户修改了View,Model中的数据也会跟着改变。
data : {
mvvm : '文字内容'
},
changeMvvm(){
if(this.mvvm === '文字内容'){
this.mvvm = '改变文字内容'
}else{
this.mvvm = '文字内容'
}
}
不需要操作dom元素,只需要操作数据,框架会自动处理dom元素和数据的绑定关系
也就是不需要关系model(数据)和view(dom元素)的关系
vue介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度最快。
渐进式:可以选择性的使用该框架的一个或一些组件,这些组件的使用也不需要将框架全部组件都应用;而且
用了这些组件也不要求你的系统全部都使用该框架。
2. 搭建示例工程
目标:使用IDEA创建示例工程并在工程中通过npm安装下载vue.js
分析:
vue是一个前端框架,也是其实是一个js文件;下载vue.js文件并在页面中引入该js文件。
vue.js的下载方式:
-
可以引用在线的vue.js
<!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-
可以离线下载vue.js;
下载地址:https://github.com/vuejs/vue
可以下载2.6.10版本https://github.com/vuejs/vue/archive/v2.6.10.zip 或资料文件夹中也已下载
下载解压,在dist 可得到vue.js文件。<script src="js/vue-2.6.10.js"></script>
-
npm包资源管理器,可以下载vue.js
使用了npm的方式安装vue模块:
#初始化 npm init -y #下载vue模块 npm install vue --save
注意:
刚安装完之后idea需要重启才可以在terminal使用npm命令进行操作。
引入vue:
<script src="node_modules/vue/dist/vue.js">
nodejs和npm安装方式(后续有课程会讲到,这节课我们可以简单的引入js文件直接使用):
https://www.jianshu.com/p/96f2f01a4f3e
3. 演示双向绑定与事件处理
目标:创建01-demo.html页面并初始化Vue实例,通过console修改Vue数据实现双向绑定效果和创建按钮实现点击即自增
分析:
- 创建页面,初始化vue;
- { {}}获取显示数据;
- v-model实现双向绑定;
- v-on演示事件处理
小结:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><button v-on:click="num++">点我</button>
<h2>{
{name}} 非常酷!有{
{num}}个学科。</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
name:"黑马",
num: 1
}
});
</script>
</body>
</html>
初始化代码中el里标注vue生效的div
data里包含了要和dom元素进行数据绑定的内容
拓展:
当一个 Vue 实例被创建时,它将 data
对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
// 我们的数据对象
var data = {
a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data
中的属性才是响应式的。也就是说如果你添加一个新的属性,比如:
vm.b = 'hi'
那么对 b
的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $
,以便与用户定义的属性区分开来。例如:
var data = {
a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
4. Vue实例生命周期及钩子函数
目标:了解Vue实例生命周期,生命周期的钩子函数及created函数常用场景
分析:
在创建vue实例的时候可以指定模板id、数据和方法;而如果要在实例化、模板渲染的过程中需要执行一些其它操作的话;那么可以使用钩子函数。
小结:
模板或元素
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染;可以通过el属性来指定。
例如一段html模板:
<div id="app">
</div>
然后创建Vue实例,关联这个div
var vm = new Vue({
el:"#app"
})
数据
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当
data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
<div id="app">
<input type="text" v-model="name"/>
</div>
var vm = new Vue({
el:"#app",
data:{
name:"黑马"
}
})
- name的变化会影响到input 的值
- input中输入的值,也会导致vm中的name发生改变
方法
var vm = new Vue({
el:"#app",
data:{
},
methods:{
//add:function(){
add(){
console.log("点我了...233")
}
}
})
<div id="app">
<button v-on:click