1.1. vue的引入
先看下面這樣一個簡單的例子,實現了這樣一個功能
數據的雙向綁定:也就是數據的同步修改
邏輯分析: 1. 我們需要一個UI元素和屬性相互綁定的方法 2. 我們需要監視屬性和UI元素的變化 3. 我們需要讓所有綁定的對象和元素都能感知到變化
1.1.1. vue與js的對比
1.1.1.1. js的實現(了解)
<!DOCTYPE html>
<html>
<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>
1.1.1.2. 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>
1.2. Vue是什麼
1.2.1. 描述(vue的發展史)
1.2.2. 概念
vue是一個構建用戶界面的框架(庫),它的目標是通過儘可能簡單的api實現響應的數據綁定和組合的視圖集合 vue自身不是一個全能框架的核心是只關注視圖層,因此它非常容易學習，非常容易與其它庫或已有項目整合 vue在與相關工具和支持庫一起使用時, 也能完美地驅動複雜的單頁應用,在之後的課程中,我們會配合webpack來使用
1.2.3. 特點
1.2.3.1. 響應的數據綁定/響應式編程
保持狀態和數據的同步
Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步非常簡單。在使用 jQuery 手工操作 DOM時，我們的代碼常常是命令式的、重複的與易錯的。 Vue.js 擁抱數據驅動的視圖概念。通俗地講，它意味著我們在普通 HTML 模板中使用特殊的語法將 DOM「綁定」到底層數據。一旦創建了綁定，DOM 將與數據保持同步。 每當修改了數據，DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據了，不必與 DOM更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。
1.2.3.2. 組件化
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。 在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。