认识Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
渐进式:
1 我们可以像使用jQuery一样,使用vue
2 采用node的方式去使用vue
前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以期轻量易用著称,vue.js和React.js发展速度最快,AngularJS还是老大。
参考:https://cn.vuejs.org/v2/guide/
尤雨溪,Vue.js 创作者,Vue Technology创始人,致力于Vue的研究开发。
3.快速入门
接下来,我们快速领略下vue的魅力
3.1.创建工程
创建一个maven工程:
位置信息:
3.2.安装vue
3.2.1.下载安装
下载地址:https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压,得到vue.js文件。
3.2.2.使用CDN
或者也可以直接使用公共的CDN服务:
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.3.vue入门案例
3.3.1.HTML模板
在vue-demo目录新建一个HTML
在hello.html中,我们编写一段简单的代码:
h2中要输出一句话:xx 非常帅。效果图如下所示:
3.3.2.vue渲染
然后我们通过Vue进行渲染:
<!-- 引入vue -->
<script src="vue-2.5.17.js"></script>
<!-- 1 必须要有父容器,所有内容只能写在这个父容器中
父容器一定要有id属性,id的值自定义,但是一般叫 app
-->
<div id="app">
<!-- 此处需要获取Vue对象中的name
{{}}两个大括号获取data中的属性的值
-->
<h2>{{name}}很帅</h2>
<h2>有{{num}}位女神为之倾倒</h2>
</div>
<!-- 通过vue控制x显示的内容 -->
<script>
// 方向一:当改变data.属性内容的时候,view中自动更新
// 方向二:当在页面改变name的时候,data中的name也会自动更新
var vm = new Vue({
el:"#app",//el就是element的简写,指向父容器的id
data:{// data 专门用来存放数据
name:"奇哥",
num:100
}
});
</script>
- 首先通过 new Vue()来创建Vue实例
- 然后构造函数接收一个对象,对象中有一些属性:
- el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div
- data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中
- name:这里我们指定了一个name属性
- 页面中的
h2
元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。
打开页面查看效果:
更神奇的在于,当你修改name属性时,页面会跟着变化:
3.3.3.双向绑定
方向一:当改变data.属性内容的时候,view中自动更新
方向二:当在页面改变name的时候,data中的name也会自动更新
注意点:页面的name得可以改变 ,此时就要选择文本框
我们对刚才的案例进行简单修改:
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}} 非常帅,
有{{num}}位女神为他着迷。
</h2>
</div>
<script src="vue-2.5.17.js"></script>
<script type="text/javascript">
// 生成一个Vue实例
var app = new Vue({
el:"#app", // el,即element。要渲染的的页面元素
data:{ // 数据
name:"奇哥",
num:1
}
})
</script>
- 我们在data添加了新的属性:
num
- 在页面中有一个
input
元素,通过v-model
与num
进行绑定。 - 同时通过
{{num}}
在页面输出
效果:
我们可以观察到,输入框的变化引起了data中的num的变化,同时页面输出也跟着变化。
- input与num绑定,input的value值变化,影响到了data中的num值
- 页面
{{num}}
与数据num绑定,因此num值变化,引起了页面效果变化。
没有任何dom操作,这就是双向绑定的魅力。
3.3.4.事件处理
我们在页面添加一个按钮:
<input type="button" value="+" v-on:click="num++">
<input type="button" value="-" v-on:click="num--">
- 这里用
v-on
指令绑定点击事件,而不是普通的onclick
,然后直接操作num - 普通click是无法直接操作num的。
效果:
4.Vue实例
4.1.创建Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
- el
- data
- methods
等等
接下来我们一 一介绍。
4.2.模板或元素
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板:
<div id="app">
</div>
然后创建Vue实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue就可以基于id为app
的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
4.3.数据
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"刘德华"
}
})
- name的变化会影响到
input
的值 - input中输入的值,也会导致vm中的name发生改变
4.4.方法
Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。
html:
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>
js写法一:
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
num:0
},
methods:{
add:function(){
this.num++;
}
}
});
</script>
js写法二:
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
num:0
},
methods:{
add(){
this.num++;
}
}
});
</script>
4.5.生命周期钩子
4.5.1.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
生命周期:
4.5.2.钩子函数
- 例1:created代表在vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的构造函数:
html:
<div id="app">
{{hello}}
</div>
js:
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
hello:''
},
created(){
this.hello = 'czdx,一统江湖,千秋万代'
}
});
</script>
结果:
- 例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vuejs生命周期</title>
<script src="vuejs-2.5.17.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构:' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
vm.message = "good...";
vm.$destroy();
</script>
</html>
4.5.3.this
我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this
var vm = new Vue({
el:"#app",
data:{
hello: '' // hello初始化为空
},
created(){
this.hello = "czdx,一统江湖,千秋万代";
console.log(this);
}
})
控制台的输出: