vue 项目html 与js,什么是VUE?VUE与JS的对比

1.1. vue的引入

先看下面这样一个简单的例子,实现了这样一个功能

数据的双向绑定:也就是数据的同步修改

逻辑分析: 1. 我们需要一个UI元素和属性相互绑定的方法 2. 我们需要监视属性和UI元素的变化 3. 我们需要让所有绑定的对象和元素都能感知到变化

1.1.1. vue与js的对比

1.1.1.1. js的实现(了解)

Demo

数据的双向绑定----js的实现

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", "黄奇");

1.1.1.2. vue的实现

数据双向绑定----vue

//数据模型

var dataModel = {

message: "hello"

}

//viewModel ----连接视图和数据模型

var app = new Vue({

el: "#app",

data: dataModel

})

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 特性扩展。

举报/反馈