1.1 vue的引入
数据的双向绑定:也就是数据的同步修改
逻辑分析:
1. 我们需要一个UI元素和属性相互绑定的方法
2. 我们需要监视属性和UI元素的变化
3. 我们需要让所有绑定的对象和元素都能感知到变化
1.1.1. vue与js的对比
----js的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div>
<h4>数据的双向绑定----js的实现</h4>
<input type="text" data-bind-1="name" />
<input type="text" data-bind-1="name" />
</div>
</body>
</html>
<script>
function DataBinder(object_id) {
// Create a simple PubSub object
var pubSub = {
callbacks: {},
on: function(msg, callback) {
this.callbacks[msg] = this.callbacks[msg] || [];
this.callbacks[msg].push(callback);
},
publish: function(msg) {
this.callbacks[msg] = this.callbacks[msg] || [];
for(var i = 0, len = this.callbacks[msg].length; i < len; i++) {
this.callbacks[msg][i].apply(this, arguments);
}
}
},
data_attr = "data-bind-" + object_id,
message = object_id + ":input",
timeIn;
changeHandler = function(evt) {
var target = evt.target || evt.srcElement, // IE8 compatibility
prop_name = target.getAttribute(data_attr);
if(prop_name && prop_name !== "") {
clearTimeout(timeIn);
timeIn = setTimeout(function() {
pubSub.publish(message, prop_name, target.value);
}, 50);
}
};
// Listen to change events and proxy to PubSub
if(document.addEventListener) {
document.addEventListener("input", changeHandler, false);
} else {
// IE8 uses attachEvent instead of addEventListener
document.attachEvent("oninput", changeHandler);
}
// PubSub propagates changes to all bound elements
pubSub.on(message, function(evt, prop_name, new_val) {
var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
tag_name;
for(var i = 0, len = elements.length; i < len; i++) {
tag_name = elements[i].tagName.toLowerCase();
if(tag_name === "input" || tag_name === "textarea" || tag_name === "select") {
elements[i].value = new_val;
} else {
elements[i].innerHTML = new_val;
}
}
});
return pubSub;
}
function DBind(uid) {
var binder = new DataBinder(uid),
user = {
// ...
attributes: {},
set: function(attr_name, val) {
this.attributes[attr_name] = val;
// Use the `publish` method
binder.publish(uid + ":input", attr_name, val, this);
},
get: function(attr_name) {
return this.attributes[attr_name];
},
_binder: binder
};
// Subscribe to the PubSub
binder.on(uid + ":input", function(evt, attr_name, new_val, initiator) {
if(initiator !== user) {
user.set(attr_name, new_val);
}
});
return user;
}
var DBind = new DBind(1);
DBind.set("name", "黄奇");
</script>
--vue的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1. 引入js文件-->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--2. 视图 view-->
<div id="app">
<h4>数据双向绑定----vue</h4>
<input type="text" name="" id="" v-model="message" />
<input type="text" name="" id="" v-model="message" />
</div>
</body>
</html>
<script type="text/javascript">
//数据模型
var dataModel = {
message: "hello"
}
//viewModel ----连接视图和数据模型
var app = new Vue({
el: "#app",
data: dataModel
})
</script>
vue 的发展史
2013.12.24 发布0.7.0
2014.1.27发布0.8.0
2014.2.25 发布0.9.0
2014.3.24发布0.10.0
2015.10.27发布1.0.0
2016.4.27发布2.0分prebiew的版本
vue的两大特点
1.响应的数据绑定/响应式编程
2.组件化
vue的优缺点
优点:轻量级的框架 简单易学 双向数据绑定 组件化 视图,数据,结构分离 虚拟DOM 运行速度更快
缺点:支持特性 前后端混合受限
MVVM模式
大致可以分为三个部分:
1. M: model,模型,在这里指的是数据模型
2. V: view,视图,在这里指的就是我们写的页面
3. VM ViewModel,是数据模型和视图连接的纽带(桥梁)
我们要把数据模型上面的数据绑定到视图上,要通过这个纽带(桥梁)来实现
vue的兼容
兼容性提示： Vue.js 不支持 IE8 及其以下版本。
vue的基本指令,具体的用法下面会进行介绍
v-bind: 绑定数据
v-model: 绑定模型
v-on: 绑定事件
v-if v-show: 条件渲染```
实例和选项
el data methods
$el $data $mount
vue的代理/数据
```每个vue的实例都会代理其data对象中的所有的属性
1.通过vue的实例,可以直接访问data对象中属性
2.通过vue的实例,可以设置data对象里面的内容,设置属性也会影响到原始的数据```
vue 的 $
Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分
了解 : $set 的使用存在一些问题,在vue2.0中作了简单修改
对于 Vue 实例，可以使用 $set(key, value) 实例方法：这样使用会报错,以下两种方式是可以使用的(存在疑问)
Vue.set(object, key, value)
this.$set(this.someObject,'b',2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
<ul>
<li v-for='item in arr'>{{item}}</li>
</ul>
</div>
</body>
</html>
<script>
var dataModel = {
arr : [1,2,3]
}
var vm= new Vue({
el:'#app',
data:dataModel
})
//读取值
console.log(vm.arr)
console.log(vm.$data.arr)
//设置值----存在的问题,当数组里面的值使用下标的形式修改的时候,视图和模型数据不会动态更新
vm.arr[0]=4;
//使用set方法设置的值,可以动态更新到模型数据和视图上
Vue.set(vm.arr,0,100)
//使用vue的实例暴露出来的属性和方法进行操作
vm.$set(vm.arr,1,200)
</script>
方法(使用methods来定义方法,使用v-on监听事件,绑定事件处理函数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--在这里使用v-on来绑定事件处理的方法(函数)-->
<button v-on:click='fn'>click</button>
</div>
</body>
</html>
<script>
var dataModel = {
message: 'hello world!'
}
var vm= new Vue({
el:'#app',
data:dataModel,
//在这里使用methods对象来定义方法(点击事件处理函数)
methods:{
fn: function(){
console.log("这个方法被调用了")
}
}
})
</script>
生命周期
1.vue在创建的时候会有一系列初始化的步骤
实例需要配置数据监测(data observe),模板编译,挂载到dom,然后在变化时更新dom
实例也会调用一些生命周期钩子,为我们提供了自定义逻辑的机会
所有的生命周期钩子自动绑定this上下文到实例中,箭头函数绑定
2.生命周期钩子函数
其实指的也就是生命周期方法,只不过是挂载到执行的各个阶段,所以叫钩子函数
补充:
1.activated
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
2.deactivated
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之生命周期</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="text" name="btnSetNumber" v-model="number">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
//在创建对象之前,监控数据变化和初始化事件之前调用
beforeCreate: function() {
console.log('beforeCreate 钩子执行...');
console.log(this.number) //数据监测还没有开始
},
//实例创建完成之后调用,挂载阶段还没有开始
created: function() {
console.log('cteated 钩子执行...');
console.log(this.number)
},
//开始挂载的时候执行,这时html还没有渲染到页面上
beforeMount: function() {
console.log('beforeMount 钩子执行...');
console.log(this.number)
},
//挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
mounted: function() {
console.log('mounted 钩子执行...');
console.log(this.number)
},
//数据更新之前调用
beforeUpdate: function() {
console.log('beforeUpdate 钩子执行...');
console.log(this.number)
},
//数据更新之后调用
updated: function() {
console.log('updated 钩子执行...');
console.log(this.number)
},
//数据销毁之前
beforeDestroy: function() {
console.log('beforeDestroy 钩子执行...');
console.log(this.number)
},
//数据销毁之后
destroyed: function() {
console.log('destroyed 钩子执行...');
console.log(this.number)
},
});
//实现数据的更新
// vm.$set(dataModel, 'number', 123)
//销毁钩子的执行
// vm.$destroy(true)
</script>
</body>
</html>
