Vue.js - Day1
相关链接
Vue.js英文官网 | Vue.js中文官网 | GitHub | Vue.js 周边库
渐进式框架Vue
构建用户界面的渐进式框架，核心库只关注图层（view），也可以与第三方库或既有项目整合。或与 单文件组件 和 Vue生态系统支持的库 结合使用构建出更强大的功能。
Created with Raphaël 2.1.0 声明式渲染（Declarative Rendering） 组件系统（Component System） 客户端路由（Client-Side Routing） 大规模状态管理（Large Scale state Management） 构建工具（Build System）
Vue中两个核心点
- 响应的数据绑定
当数据发生改变时自动更新视图
下载 vue.js 后引入就可以开始玩耍啦~ （还有cdn、npm 等等其他 点我查看）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js Indextitle>
<script type="text/javascript" src="./vue.js">script>
head>
<body>
<div id="demo">
{{ message }}
div>
<script>
// 数据
let obj = {
message:"hello,Vue!"
}
// 通过vue声明实例传递参数去渲染模板
var vm = new Vue({
el: "#demo", // 挂载元素,id选择器,class选择器
data: obj
});
script>
body>
html>响应式数据： 利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作。 Tips：IE8以下都不兼容这个属性
数据和DOM已经绑定，元素现在是响应式的了。打开浏览器控制台 F12 Console
vm.message="Hello World !";回车，页面文字一起改变了。
指令 — 其他绑定DOM元素属性的方式
- 特殊的自定义行间属性
- 当其表达式的值改变时相应地将某些行为应用到DOM对象上
- 指令以v-开头
- v-bind:title — 将元素节点的title属性和message属性保持一致
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
span>
div>var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
})- v-if 条件判断
<div id="app-3">
<p v-if="seen">现在你看到我了p>
div>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})- v-for 循环
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
li>
ol>
div>var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})在控制台里，输入 app4.todos.push({ text: '新项目' })你会发现列表中添加了一个新项。
- v-on 绑定事件监听器 如 click,mouseover,mouseout之类的
<div id="demo">
<span v-on:click="clickHandle">{{message}}span>
div>let obj = {
message:"hello,Vue!"
}
var vm = new Vue({
el:"#demo", // 挂载元素
data:obj,
methods:{
clickHandle(){ //或者可以这样写 clickHandle: function(){}
alert('click')
}
}
});- v-model 双向绑定
<div id="app-6">
<p>{{ message }}p>
<input type="text" v-model="message">
div>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})input框里内容的改变，p标签中的内容也会随之改变
组合的视图组件
- 页面映射为组件树
- 划分组件可维护、可重用、可测试
虚拟DOM
js运行速度快，但是常规的更新数据后会重新渲染页面，可能只是小部分的数据更改，却要渲染大量无需更改的DOM节点，造成资源浪费。
- vue.js 将模板中的DOM对象通过调用渲染函数（createElement），重新生成虚拟DOM树，最后通过编译器编译成真是的DOM树
Created with Raphaël 2.1.0 模板 渲染函数 虚拟DOM树 真实DOM树
- 当数据发生改变时，从虚拟DOM中查找变化的结构并改变数据，对未发生变化的结构不会重新渲染，以节省资源。
MVVM
- M：Model数据模型 （独立）
- V：View 视图模板 （独立）
- VM：View-Model 视图模型 （绑定数据，监听DOM）
上面的 指令 v-model 就是MVVM的实例
Vue实例
通过Vue构造函数创建根实例（root instance）启动 new Vue（选项对象） – 包含 数据、DOM、生命周期钩子、资源、杂项等。
常用选项数据- el：挂载元素选择器 【String | HtmlElement】
- data：代理数据 【Object | Function】
每个Vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。 - methods：定义方法 【Object】
Vue实例自身属性和方法 — 暴露自身的属性和方法,以 开头如 el $data
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
console.log(app6);
console.log(app6.$data); // 得到上面data里的内容 message: "Hello Vue!"声明式渲染
举例 : 求数组中每一项的倍数 var arr = [1,2,3,4,5];
- 声明式 — 声明在哪里（where）做什么（what），而无需关心如何实现（how）
var newArr = arr.map(function(item){
return item * 2;
});
console.log(newArr);- 命令式 — 以具体代码表达在哪里（where）做什么（what），如何实现（how）
var newarr = [];
for(var i=0; i2);
}
console.log(newArr); - Vue 声明式渲染 — 初始化根实例，vue自动将数据绑定在DOM模板上