Vue是什么
Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue只关注视图层。
Vue通过新的属性(自定义)和 {{ 表达式 }}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model=’message’/>
</div>
<script type='text/javascript'>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
Vue特性
轻量
Vue.js库的体积非常小的,并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。
指令
内置指令统一为(v—*),也可以自定义指令,通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能,但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素,封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
安装
Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Vue是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中
CDN安装
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
CDN:全称是Content Delivery Network,即内容分发网络。CDN的通俗理解就是网站加速,可以让客户端以最快的速度访问资源。
本地安装
1.也可以下载Vue文件到本地:http://vuejs.org/v2/guide/installation.html
Development Version : 原版
Production Version : 未压缩版
2.加入Vue库
1、拷贝vue.min.js到项目libs目录(如果没有请新建)中;
3.通过 script 标签添加到网页中,就可以使用Vue:
<script src="libs/vue.min.js"></script>
4.检查Vue是否可以用
npm
1.安装
$ npm install vue
2.本地引入
<script type="text/javascript" src="./node_modules/.2.5.3@vue/dist/vue.js"></script>
Vue入门
Hello应用体验
<div id="app">
<h1>{{message}}</h1>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message : "Hello Vue2"
}
});
</script>
数据双向绑定体验
<div id="app">
<!--监听input中值的改变同步到data中的message上-->
请输入: <input type="text" v-model="message">
<!--监听数据的变化及时显示应用中的数据-->
<h1>{{message}}</h1>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
//>>1. 挂着到页面上
el: "#app",
//>>2. 准备页面上需要的数据
data: {
message:""
}
});
</script>
Vue实例挂载的标签
每个Vue实例通过el配置挂载的标签,该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。
<div id="app">
<h1>{{message}}</h1>
</div>
<section class="s">
<h1>{{message}}</h1>
</section>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//>>1. 挂载到id=app上
var app1 = new Vue({
el: "#app",
data: {
message : "Hello Vue2"
}
});
//>2. 挂载到class="s"上
var app2 = new Vue({
el: ".s",
data: {
message : "Hello Vue222222222"
}
});
</script>
Vue中的数据详解
1 . Vue实例的数据保存在配置属性data中, data自身也是一个对象.
2. 通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上
<div id="app">
<h1>{{message}}</h1>
<h2>姓名:{{user.name}} 年龄:{{user.age}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//>>1. 创建包含数据的Vue实例
var app = new Vue({
//挂着到页面上
el: "#app",
//准备页面上需要的数据
data: {
message: "努力到无能为力,拼搏到感动自己!",
user: {
name: "小花花",
age: 29
}
}
});
//>>2. 访问和修改Vue实例中的数据,修改数据后及时同步页面上
console.log(app.message);
app.user.name = "小黄黄!";
</script>
Vue中的方法详解
1.Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
2.方法都是被Vue对象调用,所以方法中的this代表Vue对象
3. 使用方式
3.1 直接在html模板标签中调用
{{方法名字()}}
3.2 通过Vue对象实例调用方法
vue对象.方法名字();
<div id="app">
<h1>{{message}}</h1>
<h2>姓名:{{user.name}} 年龄:{{user.age}}</h2>
<!--Vue实例直接调用方法-->
<h2>{{hello()}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//>>1. 创建包含数据的Vue实例
var app = new Vue({
//挂着到页面上
el: "#app",
//准备页面上需要的数据
data: {
message: "努力到无能为力,拼搏到感动自己!",
user: {
name: "小花花",
age: 29
}
},
methods :{
hello : function(){
return "hello "+ this.user.name + "!";
},
hi : function () {
alert(this.message);
}
}
});
//>>2. 通过Vue实例调用方法
app.hi();
</script>
架构认识
Vue是一款开源的JavaScript MV*(MVVM、MVC)框架。
Vue 引入了MVVM (Model-View-ViewModel)模式,他不同于MVC架构.
MVC模式:
Model: 数据模型,一些JavaScript 对象,比如 {name : "小小强",age : 16};
View: 视图,网页中的内容,一般由HTML模板生成。
Controller : 控制器(路由),视图和模型之间的胶水。
MV VM模式:
Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
View:它专注于界面的显示和渲染,在Vue中则是包含一堆声明式Directive和Component的视图模板
ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在vue中“Vue对象实例”充当了这个ViewModel的角色;
View不能直接与Model交互,而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互,通过v-model指令来实现View和ViewModel的同步。对于View而言,ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化,一旦发生变化,Model中的数据也会发生改变;
对于Model而言,当我们添加或修改Model中的数据时,ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离,达到对前端逻辑MVVM的分层架构。