000 V Why Vue.js
本帖最后由 不二如是 于 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的用法（得瑟一下{:10_297:} ），后面我们来搞定～
是不是和小程序很像，没错小程序采用的是MVC模式。
MVVM是在MVC模式上演化出来滴，不理解没关系，了解一下即可～
最后一点“无关紧要”的说明：
本系列教程假设鱼油已了解关于 HTML、CSS 和 JavaScript 的中级知识。
如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！
之前有其它框架的使用经验会有帮助，但这不是必需的。
课后作业
1、MVVM模式由那几个核心部分组成？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 身为小白刚刚接触前端框架，正在犹豫Vue和React先学哪个（Angular压根就不打算考虑{:10_277:}）……正好看到这个，决定就先学Vue了！ 你好大神，我是学习python的web开发的。
我尝试用django或tornado作为后端，vue作为前端。
现在遇到的一个问题是，python的web框架的模板语言和vue冲突了。
因为他们共同的模板语言都是使用{{}}导致后端的程序报错。
如果我想把vue的{{}}改成两个中括号。能改吗？？？ wongyusing 发表于 2018-9-2 13:55
你好大神，我是学习python的web开发的。
我尝试用django或tornado作为后端，vue作为前端。
现在遇到 ...
理论上是肯定的可以的哈，vue也是通过正则匹配“{{}}”来操纵DOM
如果前后端分离写，不是太明白为什么会冲突 问题主要出在，
在python的web框架运行中使用的模板文件，是会导致后端报错。
而直接使用浏览器打开模板文件却没有问题。
文字好难说明这个问题。
要不我晚上发个例子给你看看。
我现在在写django搭建博客的书。 例子的链接例子
大神，关于这个问题的例子在vue_problem目录中。
详情都写在README.md了 wongyusing 发表于 2018-9-2 13:55
你好大神，我是学习python的web开发的。
我尝试用django或tornado作为后端，vue作为前端。
现在遇到 ...
https://cn.vuejs.org/v2/api/#delimiters 是这个吗 鹰搏空 发表于 2018-9-4 16:41
https://cn.vuejs.org/v2/api/#delimiters 是这个吗
是的，谢谢了。
鱼C的小伙伴真给力。
我之前在vue的源代码里面尝试修改还是不行。
原来要我们手动新建的。 已看,谢谢老板 {:5_109:} 1.view 2.model 3.viewmodel 有web开发找工作的吗？邀请擅长vue的工程师。qq：792414310 ADFDSFDF s gg
mark一下vue是个好东西 Happy day! model/view/view-model 3 model view view viewmodelmodel
页:
[1]
2