一、渐进式框架?
? ? ? Vue.js 作为一门轻量级、易上手的前端渐进式框架，从入门难度和学习曲线上相对其他框架来? ? ? ? ?说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js 的世界。
二、两个核心点
- 响应的数据绑定
当数据发生改变时，自动更新视图。
是利用Object.defineProperty中的getter和setter代理数据。var obj = {}; Object.defineProperty(obj,"a",{ value:10, //obj.a值为10 writable:false, //表示不可写 enumerable:false, //表示不可遍历 configurable:false, // 表示不可配置，即不能改变writable:false或者enumerable:false get(){ // 当读取obj.a时会自动调用该函数，不管是什么都返回1000 return 1000; }, set(){ // 当写入obj.a时会自动调用该函数，不管写什么都写入2000 return 2000; } });Vue监控的数据变化就是监控的getter和setter得变化。变化就去重新渲染。
-
?视图组件
UI页面映射出一个组件树
组件可重用，可维护性好。
三、虚拟DOM
要改变一个DOM节点，才能把视图重新渲染出来。但这样会发生重排重绘，十分耗费性能。
虚拟DOM就是使用js去模拟一个节点。把js封装出来，变为一个真实的DOM。（使用js对象的嵌套形式模仿出一个html文档），通过底层的算法可以让重排重绘只发生在局部。优化页面。
// 模仿实现
function VElement(tagName,prop,children){ //参数为( "",{},[] )
// 判断是不是一个VElement的一个实例
if ( !(this instanceof VElement) ) {
return new VElement(tagName,prop,children);
}
// 假如用户没有属性prop，就没有给参数prop，进行兼容性处理
if( Object.prototype.toString.call(prop) === "[object Array]" ){
children = prop;
prop = {};
}
this.tagName = tagName;
this.prop = prop;
this.children = children;
var count = 0; // 用于记录虚拟节点个数
this.children.forEach(function(child,index){
if(child instanceof VElement){
// 如果子节点是一个虚拟节点，让总节点数加上子节点的子子节点数
count += child.count;
}
count ++;
});
this.count = count;
}
var dom = VElement("div",[VElement("div",["Vue牛逼"])]);
console.log(dom);
// 结果 虚拟DOM 相当于：<div><div>Vue牛逼</div></div>
// VElement {
// tagName: 'div',
// prop: {},
// children: [ VElement { tagName: 'div', prop: {}, children: [Object], count: 1 } ],
// count: 2 }
VElement.prototype.render = function(){
//rander函数将虚拟DOM转换为真实DOM
var dom = document.createElement(this.tagName);
var children = this.children;
var prop = this.prop;
for(var item in prop){
dom.setAttribute(item,prop[item]);
}
children.forEach( function(child,index){
if(child instanceof VElement){
var childDom = child.render();
}else{
var childDom = document.createTextNode(child);
}
dom.appendChild(childDom);
} );
return dom;
};
console.log(dom.render());
// 结果
// <div>
// <div>Vue牛逼</div>
// </div>
?四、Vue实例
- 数据绑定
- 计算属性与侦听器
- 属性绑定
- 条件渲染 v-if v-show
- 列表渲染 v-for
- 绑定事件 事件修饰符 表单
<!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> <div id="demo"> {{name}} <!-- 数据绑定 --> {{changeName}} <!-- 绑定计算属性的changeName --> <!-- 通过v-bind:命令绑定属性名 --> <!-- 其中class和style比较特殊，要使用数组形式：v-bind:class="[class1]" --> <!-- 也可以通过对象的形式：v-bind:class="{class1:classBoolean}",其中class1是class名，而classBoolean才是绑定的变量，为true时才将class1绑定上 （实现添加或删除class） --> <span v-bind:data="message" v-bind:id="id">{{name}}</span> <!-- v-show 控制节点显示或隐藏,ifshow是绑定的数据，为true时显示，false时内部设为display:none --> <!-- v-if也是控制节点显示隐藏，但v-if为false时，是删除节点 --> <!-- 频繁切换时，考虑重拍重绘，v-if会更浪费性能 --> <div v-show='ifshow'>条件渲染演示</div> <!-- items是一个数组，会被v-for遍历，item就是遍历的结果 --> <span v-for="item in items">{{item.title}}</span> <!-- v-on绑定事件，click为事件名，click1为回调函数，写在methods内 --> <button v-on:click="click1">点击</button> <!-- 事件修饰符，在事件的回调函数后添加一个.enter，代表只有按下回车键才会触发该事件 --> <input type="text" name="" v-on:keyup.enter="keyup1"> 表单，初始化时，会将value的值默认填入input框 <input type="text" name="" v-model="value"> </div> <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script> <script type="text/javascript"> //在vue当中，需要一个dom节点挂载Vue,并且vue语法只在此节点内生效 var vm = new Vue({ el: "#demo", // el对应dom节点的id,就把Vue挂载在了dom节点上了 data:{ // 数据绑定 所有数据都会绑定到实例vm上 name:"tanjw", message : 123, id:"demo1", ifshow:false, items:[{ title:"18" },{ title:"20" }], value:123 }, // 当name变化时，就会在computed内找一些相关属性 computed:{ // 计算属性，内部写一些函数 changeName: function(){ // 当通过控制台改变vm实例name时，changName也会随着变化，监控name的变化 return "my name is " + this.name; } }, methods:{ // 专门处理异步回调函数 click1:function(){ console.log(this); }, keyup1:function(){ console.log(this.value); }) </script> </body> </html>五、Vue?模板语法使用?
????????Html
????????使用 v-html 指令用于输出 html 代码：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>属性
HTML 属性中的值应使用 v-bind 指令。?
以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
v-bind 指令：?
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>?
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>?
Vue.js 条件语句
条件判断
v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>?
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>v-show
我们也可以使用 v-show 指令来根据条件展示元素：
<h1 v-show="ok">Hello!</h1>