介绍
Vue.js是数据驱动的,DOM将和数据保持同步
MVVM模式
Model-View-ViewModel
双向绑定DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。
从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。
Hello World
万事开头容易,看一下vue的hello world怎么写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
- 定义View
- 定义Model
- 创建一个Vue实例或”ViewModel”,它用于连接View和Model
双向绑定示例
MVVM模式本身是实现了双向绑定的,在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
<!--这是我们的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
将message绑定到文本框,当更改文本框的值时,
中的内容也会被更新。反过来,如果改变message的值,文本框的值也会被更新,我们可以在Chrome控制台进行尝试。Vue.js的常用指令
v-if指令
v-if是条件渲染指令,它根据表达式的真假来删除和插入元素
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
v-show指令
v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。
1 | <div id="app"> |
v-else指令
可以用v-else指令为v-if或v-show添加一个“else块”。
1 | <div id="app"> |
v-for指令
1 | <div id="app"> |
v-bind指令
v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class
1 | <div id="app"> |
v-on指令
v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听元素的点击事件:
1 | <a v-on:click="doSomething"> |
有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。
1 | <div id="app"> |
v-bind和v-on的缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。
1 | <!--完整语法--> |
组件系统
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树
基本步骤
Vue.js的组件的使用有3个步骤:创建组件构造器、注册组件和使用组件。
- Vue.extend()
- Vue.component()
- 在实例作用范围内使用组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div id="app">
<!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
// 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
使用组件和使用普通的HTML元素没什么区别
理解组件的创建和注册
- Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器。
- Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML。
- 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器。
- 组件应该挂载到某个Vue实例下,否则它不会生效。
全局注册和局部注册
如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册。
1 | <body> |
父组件和子组件
我们可以在组件中定义并使用其他组件,这就构成了父子组件的关系。
1 | <body> |
组件注册语法糖
使用Vue.component()直接创建和注册组件
1 | // 全局注册,my-component1是标签名称 |
Vue.component()的第1个参数是标签名称,第2个参数是一个选项对象,使用选项对象的template属性定义组件模板。
使用这种方式,Vue在背后会自动地调用Vue.extend()。
1 | var vm2 = new Vue({ |
使用script或template标签
尽管语法糖简化了组件注册,但在template选项中拼接HTML元素比较麻烦,这也导致了HTML和JavaScript的高耦合性。
1 | <script type="text/x-template" id="myComponent"> |
组件的el和data选项
Vue.js规定:在定义组件的选项时,data和el选项必须使用函数。
1 | Vue.component('my-component', { |
使用props
组件实例的作用域是孤立的。不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
1 | var vm = new Vue({ |
prop的绑定类型
单向绑定
prop默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。
双向绑定
可以使用.sync显式地指定双向绑定,这使得子组件的数据修改会回传给父组件。
1 | <my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component> |
单次绑定
1 | <my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component> |
父子组件之间的访问
父组件访问子组件:使用$children或$refs
子组件访问父组件:使用$parent
子组件访问根组件:使用$root
自定义事件
使用 $on() 监听事件;
使用 $emit() 在它上面触发事件;
使用 $dispatch() 派发事件,事件沿着父链冒泡;
使用 $broadcast() 广播事件,事件向下传导给所有的后代。
组件的API
prop 允许外部环境传递数据给组件;
事件 允许组件触发外部环境的 action;
slot 允许外部环境插入内容到组件的视图结构内。
跨域资源共享
跨域资源共享(CORS)是一份浏览器技术的规范,提供了Web服务器从不同网域传来沙盒脚本的方法,以避开浏览器的同源策略,是JSONP模式的现代版。
JSONP概念
由于同源策略,一般来说不允许JavaScript跨域访问其他服务器的页面对象,但是HTML的script元素是一个例外。利用script元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
跨域解决方案
在服务端启用CORS。
让无服务端拥有处理JSONP的能力。
这两种跨域解决方案的区别是什么呢?
JSONP只支持GET请求;CORS则支持GET、POST、PUT、DELETE等标准的HTTP方法
JSONP从服务端获取到的是script文件;CORS则是一段XML或JSON或其他格式的数据
vue-resource
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。
引入vue-resource
1 | <script src="js/vue.js"></script> |
基本语法
1 | // 传统写法 |
Vue.http.interceptors.push((request, next) => {
// ...
// 请求发送前的处理逻辑
// ...
next((response) => {
// ...
// 请求发送后的处理逻辑
// ...
// 根据请求的状态,response参数会返回给successCallback或errorCallback
return response
})
})
1 |
|
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})
1 | 创建Router |
var router = new VueRouter()
1 | 映射路由 |
router.map({
'/home': { component: Home },
'/about': { component: About }
})
1 | 使用v-link指令 |
<div class="list-group">
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>
1 | 使用<router-view>标签 |
<router-view></router-view>
启动路由
var App = Vue.extend({})
router.start(App, '#app')
#### JavaScript
创建组件:创建单页面应用需要渲染的组件
创建路由:创建VueRouter实例
映射路由:调用VueRouter实例的map方法
启动路由:调用VueRouter实例的start方法
#### HTML
使用v-link指令
使用<router-view>标签
#### router.redirect
应用在首次运行时右侧是一片空白,应用通常都会有一个首页,例如:Home页。
router.redirect({
'/': '/home'
})
```