马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-8-28 10:26 编辑
没看错，17年创建的专辑，终于要开始更了...
最近在和小甲鱼老师打磨《零基础入门学习Web》（H5&C3）篇（传送门），抽出空闲来填坑～
Vue (读音类似于 view) 是一套用于构建用户界面的渐进式框架。
为什么要开启这个系列呢，理由很简单：
H5+C3+JS是基础的水泥沙子和钢筋，能建楼；Vue是在此基础上演化出的模块，直接组合快速建楼，底层也是前面那些东西，只不过程序员只管用就好。
从某些角度讲，小程序的核心理念和Vue有异曲同工之妙。
（推荐：微信小程序 - 庖丁解牛）
官方（传送门）用三个很有气势的句子，描述了Vue的优点：
没必要夸了，反正就是使用Vue会让Web开发变得简单。
此处友情提醒：
抛开以后很久很久才会遇到的坑，对于初学者来说Vue还是极其友好滴～
作为系列的第一篇，鱼油只需要了解MVVM模式
与很多知名的前端框架Angular、Ember一样，Vue.js在设计上采用MVVM（Model-View-ViewModel）模式。
（还有MVC、MVP...）
当View（试图层）发生变化时，会自动更新ViewModel（视图模型），反之亦然。
View和ViewModel之间通过双向绑定（data-binding）建立联系，如下图所示：
对比看不同
光说枯燥的定义很无聊，咱们拿代码说话～
用过JQuery的鱼油，对于其方便的操纵DOM、绑定事件的能力一定大为赞叹～
（JQ相关教程：传送门）
比如我们想在网页中插入一个元素(target类)，并且添加一个单击事件，就可以这么写：if(target){
var btn = $("<button>Hi</button>");
btn.onclick(function () {
console.log("Hi");
});
$("#app").append(btn);
}
Vue就会把上述过程中混合（耦合）在一起的视图和业务逻辑分看。
通过MVVM模式拆分为数据和视图两部分，只需要关心数据即可，DOM部分Vue帮你搞定：<div id="app">
<button v-if="showBtn" v-on:click="handleClick">Hi</button>
</div>
<script>
new Vue({
el:"#app",
data:{
showBtn:true
},
methods:{
handleClick:function () {
console.log("hi");
}
}
})
</script>
看不懂没关系，这里只是展示Vue的用法（得瑟一下 ），后面我们来搞定～
是不是和小程序很像，没错小程序采用的是MVC模式。
MVVM是在MVC模式上演化出来滴，不理解没关系，了解一下即可～
最后一点“无关紧要”的说明：
本系列教程假设鱼油已了解关于 HTML、CSS 和 JavaScript 的中级知识。
如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！
之前有其它框架的使用经验会有帮助，但这不是必需的。
课后作业
1、MVVM模式由那几个核心部分组成？
答案：
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢Vue，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-8-27 11:12:01
置顶卡
千斤顶
显身卡
发表于 2018-8-27 20:49:16
）……正好看到这个，决定就先学Vue了！
楼主
发表于 2018-10-20 15:24:45
