01开篇，初探VUE
VUE，大名鼎鼎，可以说是目前国内前端使用的主流js框架。
不知道其他的同学有没有同感，对这家伙感觉既熟悉又陌生。如何说，就是拿起来就用，随手就是一个DEMO，然后感觉可以直接上手，随手就把JQuery替代了，写出来的效果，你别说还不错，但是当我们深入使用后，发现它有许多内容，让人找不到到关联。
现在开始我们用一个月的时间通过以下几个阶段对整个VUE熟悉一遍（身为一个菜鸟是不敢说对某一样技术是精通的）。
整体学习过程
认识、观察、拓展、深入沟通、一探究竟
作为一门技术，首先是我们先要对它有一个大概认知，比如经常我们需要做一些技术选型，需要知道它的优缺点。
然后在通过demo去写一些例子，在整个过程中，我们会加强对VUE设计理念的理解，当然也会出现许多困惑，这个时候我们只需要进行记录，无需太过深究。
这时候我们已经可以在实际项目中进行使用了，我们可以进行一定的拓展，了解以下VUE的全家桶，可以加强我们的了解。
再者，这个时候我们更多的是去解决我们之前存在的困惑，然后一点点去扣，不要着急去看源码。
最后源码直接上手。
目的
- 对VUE有一个系统的认识。
- 了解VUE的设计理念。
- 对VUE的所有demo进行复现。
- 在实际项目中进行使用，并逐步使用尽可能更多的特性。
- 总结之前的困惑，然后进行拓展使用
- 解决困惑，补足底层知识。
- 然后上源码
简介
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
来源VUE菜鸟教程的介绍。
VUE的介绍非常的简单，但是却直接透露出了它的设计本质。
1、什么是渐进式编程？
了解渐进式编程，需要了解渐进式、渐进式学习等名词。
渐进式，我认为就是一种向上的渐变过程，它和步进式或跳跃式是可以作为一起比较的。
渐进式学习，是我可以系统的，由浅到深的学习过程，不会让人产生一口气吃个胖子的想法。
渐进式编程，我们可以结合渐进式学习同步进行，在前端项目中逐渐使用，直到完全使用。
2、VUE只关注视图层吗？如果说自底向上增量开发。
是的VUE的核心是视图层，不是说前端的关注是视图层。
换句话说，如果一个公司成立，总要由一个理念和核心走向，那么我理解的VUE发展的核心就是提供更优质的视图呈现解决方案，当然既不是视觉也不是说数据控制。如何说，纵观VUE，其实都是在作DOM对象本来就有的内容。经典的内容就是V-model。
如果说自底向上增量开发，我的理解就是这是一个增量复用的过程，迭代成本低。
3、通过一个例子我们直接开始了解双向绑定
以下是我在2019年开始接触VUE和React时，想到的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="./js/jquery.js"></script> -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>这是数据绑定输入框</h3>
<input dyn-value="name" />
<h3>这是数据绑定输入框2</h3>
<input dyn-value="name" />
<h3>这是普通输入框</h3>
<input />
<h3>以下是动态绑定是的数据</h3>
<p dyn-value="name"></p>
<script>
var ObjBuild = (function() {
var name = "";
var value = "";
var relationDom = [];
function reback() {
$.each(relationDom, function(i, o) {
if (o.tagName == "INPUT") {
$(o).val(value);
} else {
$(o).html(value);
}
})
}
function ObjBuild(val, name) {
value = val
name = name
}
ObjBuild.prototype.setValue = function(val) {
value = val
reback()
}
ObjBuild.prototype.getValue = function() {
return value
}
ObjBuild.prototype.addRelationDom = function(dom) {
relationDom.push(dom)
}
ObjBuild.prototype.getRelationDom = function(dom) {
return relationDom;
}
return ObjBuild
})();
var data = {};
$(document).ready(function() {
var input_list = $("input")
$.each(input_list, (i, o) => {
if ($(o).attr("dyn-value")) {
let key = $(o).attr("dyn-value")
if (!data[key]) {
let obj = new ObjBuild("1");
let list = $("[dyn-value='" + key + "']")
$.each(list, function(i, o) {
obj.addRelationDom(o)
})
data[key] = obj
}
o.oninput = function() {
onInput(key, $(o));
}
}
})
});
function onInput(key, obj) {
data[key].setValue($(obj).val())
}
</script>
</body>
</html>
VUE的使用
在学习过程中我们先通过最简单的引入方式进行学习。使用VUE官方提供的js进行引入，如果你现在有其他疑问，先记下来不要着急
资料来源 https://cn.vuejs.org/v2/guide/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
看完例子也许你有很多疑问，不妨我们把它们列举出来，让我们不带着疑问去看。
- 为什么使用new的方式创建？
- 使用el绑定html标签是 什么意思？
- 数据是如何绑定在
{{}}上的？ - data中的数据是什么意思，直接定义一个变量是不是可以绑定？
- ……
2724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
