1.前言
先聊一下前端开发模式的发展.
静态网页
- 最初的网页以 HTML 为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通,开发人员也只关心页面的样式和内容即可.
异步刷新,操作 DOM
- 1995 年,网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言.
随着 javaScript 的诞生,我们可以操作页面的 DOM 元素及样式,页面有了一些动态的效果,但是依然是以 静态为主. - ajax 盛行:
1.2005 年开始,ajax 逐渐被前端开发人员所重视,因为不用刷新页面就可以更新页面的数据和渲染效果.
2.此时的开发人员不仅仅要编写 HTML 样式,还要懂 ajax 与后端交互,然后通过 js 操作 DOM 元素来实现页面动态效果.比较流行的框架如 jQuery 就是典型代表.
MVVM,关注模型和视图
- M:即 Model,模型,包括书籍和一些基本操作
- V:即 View,视图,页面渲染效果
- VM:即 View Model,模型与视图的双向操作(无需开发人员干涉)
在 MVVM 之前,开发人员从后端获取需要的数据模型,然后通过 DOM操作渲染到 View 中,而后当用户操作视图,我们还需要通过 DOM 获取 View 中的数据,然后同步到 Model 中.
而 MVVM 中 VM 要做的事情就是把 DOM 操作完全封装起来,开发人员不用关心 Model 和 View 直接是如何相互影响的. - 只要我们 Model 发生了改变,View 上自然会表现出来
- 当用户修改了 View,Model 中的数据也会跟着改变
把开发人员从繁琐的 DOM 操作中解放出来,把关注点放在如何操作 Model 上.
2.认识 Vue
Vue是一套用于构建用户界面的渐进式框架,与其他大型框架不同的是,Vue 被设计为可以自底向上逐层应用,Vue 的核心库只关注视图层,不仅容易与上手,还便于与第三方库或既有项目整合,另一方面,当现代化工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.
前端框架三巨头:Vue.js,React.js,Angular.js,Vue.js 以其轻量易用著称,Vue.js 和 React.js 发展速度最快
3.Node和NPM
前面说过,NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括jquery,angularJS,VueJs.为了Vue学习方便,我们先安装Node及NPM工具
3.1.下载Node.js
下载地址:https://nodejs.org/zh-cn/download/
推荐下载LTS版本
安装完成以后,在控制台输入:
node -v
看到版本信息:
3.2.NPM
安装完成Node应该自带了NPM,在控制台输入 npm -v 查看:
npm 默认的仓库地址是在国外的网站,速度较慢,建议设置到淘宝镜像.但是切换镜像比较麻烦,推荐一开切换镜像的工具:nrm
首先安装nrm,这里 -g 代表全局安装
npm install nrm -g
然后通过 nrm ls 命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
通过nrm use taobao 来指定要使用的镜像源:
nrm use taobao
然后通过nrm test npm来测试速度
4.快速入门
新建项目 Java Enterprise
填入Project Name
在创建好的项目里的Terminal初始化NPM
npm init -y
运行结果
项目内会多出一个package.json文件,跟maven pom文件类似
然后安装vue.js
npm install vue --save #--save 本地安装 只应用到项目内
运行结果:
package.json内会多出vue
并且项目目录内也会多出node_modules/vue的文件夹
4.1Vue入门案例
HTML模板
在项目新建一个HTML
在HTML内引入Vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="node_modules/vue/dist/vue.js"></script>
</body>
</html>
在hello.html中加入一段简单的代码
<div id="app">
<h1>xx 好用!</h1>
</div>
h1中要输出一句话:xx 好用!.前面的xx是要渲染的数据.
4.1.1.vue渲染
然后我们通过Vue进行渲染
<div id="app">
<h1>{{name}} 好用!</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:"#app", //element vue所操作的标签
data:{
name:"vue" //替换xxx数据
}
});
</script>
- 首先啊通过new Vue()来创建Vue实例
- 然后构造函数接收一个对象,对象中有一些属性 :
- el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div
- data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中
- name:这里我们指定一个name属性
-
页面中的h1元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性
打开页面查看效果:
更神奇的是当你修改name属性时,页面会跟着变化
4.1.2.双向绑定
对刚才的案例进行简单修改
<div id="app">
<input type="text" v-model="num">
<h1>
{{name}} 好用!
github star number:{{num}}
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element vue所操作的标签
data:{
name:"vue", //替换xxx数据
num:999
}
});
</script>
- 我们在data中添加新的属性:num
- 在页面有一个input元素,通过v-model与num进行绑定.
-
同时通过{{num}}在页面输出
效果:
我们可以看到,输入框的变化可以引起data中的num的变化,同时页面输出也跟着变化
- input与num绑定,Input的value值变化,影响到了data中的num值
4.1.3.事件绑定
添加一个button标签
<input type="text" v-model="num"><button @click="num++">+</button>
- @click:点击事件
-
num++:点击后的运行逻辑
运行效果:
4.2Vue实例
4.2.1创建Vue实例
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的:
const v = new Vue({
//...
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
- el
- data
- methods
- ...
4.2.2.模板或元素
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染.
我们可以通过el属性来指定.
例如上面的 4.1.1.vue渲染
4.2.3.方法
Vue实例中除了可以定义data属性,也可以定义方法,并且在vue的作业范围内使用
html:
<div id="app">
<button @click="handleClick()">点我</button>
</div>
js:
const app = new Vue({
el:"#app", //element vue所操作的标签
data:{
},
methods:{
handleClick(){
console.log("hello!");
}
}
});
4.2.4.生命周期钩子
生命周期
每个vue实例在被创建时都要经过一系列的初始化过程:创建实例,装载模板,渲染模板等等,Vue为生命周期中的每个状态都设置了钩子函数(监听函数).每当Vue实例处于不同的生命周期时,对应的函数就会被处罚调用.
生命周期:
钩子函数
例如:created代表Vue实例创建后:
我们可以在Vue中定义一个created函数,代表这个时期的构造函数:
html
<div id="app">
{hello}
</div>
js:
let vm = new Vue({
el:"#app",
data:{
hello:"占位值"
},
created(){
//为了看出不一样 这里延时一下
setTimeout(()=>this.hello = "hello",1000);
}
})
结果:
this
我们可以看下在Vue内部的this变量是谁,我们在created的时候,打印出 this
let vm = new Vue({
el:"#app",
data:{
hello:""
},
created(){
setTimeout(() => this.hello = "hello",1000);
console.log(this);
}
})
控制台的输出:
总结: this 就是当前的Vue实例,在Vue对象内部,必须使用this才能访问到Vue定义的data内属性,方法等.
5.指令
指令(Directives)是带有v-前缀的特殊属性,例如我们在入门案例中的v-model,代表双向绑定.
5.1.插值表达式
5.1.1.花括号
格式:
{{表达式}}
说明:
- 该表达式支持js语法,可以调用js内置函数(必须有返回值)
- 表达式必须有返回结果,例如 1 + 1,没有结果的表达式不允许使用,例如: let a = 1 + 1;
- 可以直接获取Vue实例中定义的数据或函数
示例:
HTML:
<div id="app">{{hello}}</div>
JS:
const app = new Vue({
el:"#app", //element vue所操作的标签
data:{
hello:"hello word", //替换xxx数据
}
});
5.1.2. 插值闪烁
使用{{}}方式存在网速较慢时会出现问题.在数据未加载完成时,页面会显示出原始的插值表达式{{hello}}
将网速调慢一些,然后试试刚才的案例:
刷新界面
需要等js加载完毕才显示渲染值
5.2.v-text和v-html
使用v-text和v-html指令来代替{{}}
说明:
- v-text:将数据输出到元素内部,如果输出
- v-hrml:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
示例:
HTML
<div id="app">
v-text:<span v-text="hello"></span><br/>
v-html:<span v-html="hello"></span>
</div>
JS
let vm = new Vue({
el:"#app",
data:{
hello:"<font color='blue'>hello world</font>"
},
});
效果:
并且不会出现插值闪烁,当没有数据时,会显示空白
5.3.v-model
刚才的v-text和v-html可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行了,v-model是双向绑定,视图(View)和模型(Model)之间会互相影响.
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了试图的元素类型.目前v-model的可使用元素有:
- input
- select
- textarea
- checkbox
- radio
- components(vue中的自定义组件)
基本上除了最后一项,其他都是表单的输入项.
示例:
HTML
<h1>哪种语言是世界上最好的语言?</h1>
<input type="checkbox" v-model="language" value="Java"/>Java<br/>
<input type="checkbox" v-model="language" value="PHP"/>PHP<br/>
<input type="checkbox" v-model="language" value="Python"/>Python<br/>
<h1>
您以选择下列课程:{{language.join(",")}}
</h1>
JS
let vm = new Vue({
el:"#app",
data:{
hello:"<font color='blue'>hello world</font>",
language:['Java','PHP']
},
});
效果
当去取消或选中的时候language的值也会相应改变
未完待续!
