000 V Why Vue.js

不二如是

没看错，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类)，并且添加一个单击事件，就可以这么写：

1. if(target){
   
2.     var btn = $("<button>Hi</button>");
   
3.     btn.onclick(function () {
   
4.         console.log("Hi");
   
5.     });
   
6.     $("#app").append(btn);
   
7. }

复制代码

Vue就会把上述过程中混合（耦合）在一起的视图和业务逻辑分看。

通过MVVM模式拆分为数据和视图两部分，只需要关心数据即可，DOM部分Vue帮你搞定：

1. <div id="app">
   
2.     <button v-if="showBtn" v-on:click="handleClick">Hi</button>
   
3. </div>
   
4. <script>
   
5.     new Vue({
   
6.         el:"#app",
   
7.         data:{
   
8.             showBtn:true
   
9.         },
   
10.         methods:{
    
11.             handleClick:function () {
    
12.                 console.log("hi");
    
13.             }
    
14.         }
    
15.     })
    
16. </script>

复制代码

看不懂没关系，这里只是展示Vue的用法（得瑟一下 ），后面我们来搞定～

是不是和小程序很像，没错小程序采用的是MVC模式。

MVVM是在MVC模式上演化出来滴，不理解没关系，了解一下即可～

最后一点“无关紧要”的说明：

本系列教程假设鱼油已了解关于 HTML、CSS 和 JavaScript 的中级知识。

如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！

之前有其它框架的使用经验会有帮助，但这不是必需的。

---

课后作业


1、MVVM模式由那几个核心部分组成？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

天圆突破

身为小白刚刚接触前端框架，正在犹豫Vue和React先学哪个（Angular压根就不打算考虑）……正好看到这个，决定就先学Vue了！

wongyusing

你好大神，我是学习python的web开发的。  
我尝试用django或tornado作为后端，vue作为前端。  
现在遇到的一个问题是，python的web框架的模板语言和vue冲突了。  
因为他们共同的模板语言都是使用{{}}导致后端的程序报错。  
如果我想把vue的{{}}改成两个中括号。能改吗？？？

不二如是

wongyusing 发表于 2018-9-2 13:55
你好大神，我是学习python的web开发的。  
我尝试用django或tornado作为后端，vue作为前端。  
现在遇到 ...

理论上是肯定的可以的哈，vue也是通过正则匹配“{{}}”来操纵DOM

如果前后端分离写，不是太明白为什么会冲突

wongyusing

问题主要出在，
在python的web框架运行中使用的模板文件，是会导致后端报错。  
而直接使用浏览器打开模板文件却没有问题。  
文字好难说明这个问题。  
要不我晚上发个例子给你看看。  
我现在在写django搭建博客的书。

wongyusing

例子的链接例子  
大神，关于这个问题的例子在vue_problem目录中。  
详情都写在README.md了

鹰搏空

wongyusing 发表于 2018-9-2 13:55
你好大神，我是学习python的web开发的。  
我尝试用django或tornado作为后端，vue作为前端。  
现在遇到 ...

https://cn.vuejs.org/v2/api/#delimiters 是这个吗

wongyusing

鹰搏空 发表于 2018-9-4 16:41
https://cn.vuejs.org/v2/api/#delimiters 是这个吗

是的，谢谢了。  
鱼C的小伙伴真给力。  
我之前在vue的源代码里面尝试修改还是不行。  
原来要我们手动新建的。

差点夹不住屁

已看,谢谢老板

你很6

lbjstudypython

1.view 2.model 3.viewmodel

极地飞客

有web开发找工作的吗？邀请擅长vue的工程师。qq：792414310

果酱淋

ADFDSFDF

jack2018

s

Baron_

gg

helloTOM

mark一下  vue是个好东西

Ruide

Happy day!

suweixuan1998

model/view/view-model

xuan1788

3 model view

kmq116

view viewmodel  model