1.Vue的初步使用

刚刚开始接触Vue的时候，阿菜是这样写

html部分:

    <div id="me"><!--vue内部的data数据被放到了这里的myName、myCountry--><p>大家好，我叫{{myName}},来自{{myCountry}}。</p></div>

javascript部分:

new Vue({el: "#me", //操作在id值为me的divdata: {myName: "阿菜",myCountry: "中国"}
})

运行结果：

== 总结 ==
Vue其实是一种声明式编程，new Vue的时候，

el: 用来指向自己想要控制的html标签（如，这里是id值为me的div标签）

data: 这里的变量将会显示在html页面上，前提是html页面的变量要用 {{}}来包围。（如，这里的{{myName}}、{{myCountry}}

2.关于MVVM架构的Vue设计

不久前，一位后端的同学问我，你们前端有架构么。当时我未学Vue，一脸懵逼。如今才知道，原来，前端也是有自己的架构滴——比如MVVM架构。

MVVM架构：
M即Model层，V即View层，VM即ViewModel层，用一句话解释该架构的逻辑就是：VM层(ViewModel)通过接口从后台M层(Model层)请求数据，然后和V层(View层)实现数据的双向绑定。

MVVM架构就是为前后端分离来使用的，前端仅需要通过调用接口来获取后端的数据或传输数据给后台即可，十分方便~

下面是一个使用了MVVM架构的计时器demo:
index.html文件：

<body><!-- MVVC架构包括：view层、viewModule层（中间桥梁作用）、module层--><!-- view层--><div id="myCounter"><h4>当前总数：{{number}}</h4><!--当点击+、-按钮的时候，当前总数的数值会变化--><!-- 法一：使用语法糖--><button @click="add">+</button><button @click="sub">-</button><!-- 法二：-->
<!--        <button v-on:click="add">+</button>-->
<!--        <button v-on:click="sub">-</button>--></div><script src="js/vue.js"></script><script src="js/demo02.js"></script>
</body>

demo02.js文件：

//module层
let myCounter = {number: 0,
}//viewModule层
new Vue({el: "#myCounter",data: myCounter, //注意这里指的是module层定义的myCounter对象methods: {add: function(){console.log("计数器总数+1");this.number ++;},sub: function(){console.log("计数器总数-1");this.number --;}}
})

运行效果：

参考文献
前端框架MVVM是什么

—————————————————————————— —

下一篇
阿菜的Vue学习之旅（二）

阿菜的Vue学习之旅（一）相关推荐

Vue学习之旅Part1：Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
在Vue里有好几种数据渲染的方法及相关指令下面将一一介绍: 一.插值表达式插值表达式是用两个花括号{{}}包裹属性属性在Vue实例里定义: 通过Vue提供的指令即可很方便地将数据渲染到页面上 ...
Vue学习之旅-01
Vue01 1. 初体验 2. 插值操作 3. 动态绑定属性 4. 计算属性 5. 事件监听 6. 条件判断 1. 初体验初体验 <!DOCTYPE html> <html lan ...
Vue学习之旅-02
Vue02 7. 循环遍历 8. v-model的使用 9. 组件化开发 10. 组件通信 11. 插槽 7. 循环遍历 v-for遍历数组 <div id="app"> ...
【菜鸡的自动化学习之旅】《电力电子技术》学习笔记1 ———— 电力电子器件
目录一.电力电子器件的基本概念 1. 电力电子器件 2. 主电路二.电力电子器件的基本特征三.理想的电力电子器件 1. 基本要求 2. 具体特征四.电力电子器件的分类五.具体器件介绍一.电 ...
Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
乐鑫Esp32学习之旅② 巧用eclipes编辑器，官方教程在Windows下搭建esp32开发环境，打印 “Hello World”。
本系列博客学习由非官方人员半颗心脏潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. 爬坑学习新旅程,虚拟机搭建esp32开发环境,打印 " ...
如何系统地自学python100天_Github上发布了一个Python学习秘笈，从萌新到王者的100天Python学习之旅...
北京千锋互联科技有限公司成都分公司骆昊(jackfrued)在Github上发布了一个Python学习秘笈,从萌新到王者的100天Python学习之旅. 简单的说,Python是一个"优雅& ...
小猪的Python学习之旅 —— 1.基础知识储备
小猪的Python学习之旅 -- 1.基础知识储备引言: (文章比较长,建议看目录按需学习-) 以前刚学编程的时候就对Python略有耳闻,不过学校只有C,C++,Java,C#. 和PHP有句&q ...
猿创征文｜我的前端学习之旅【来自一名大四老学长的真情流露】
猿创征文 | 我的前端学习之旅自我介绍我浑噩的大一大二(是不是另一个你) 我的大三生活大三上(学习过程.学习方法.推荐网站) 大三下(技术提升.荣誉证书.推荐比赛) 我与 CSDN 的机缘(从小 ...

阿菜的Vue学习之旅（一）

阿菜的Vue学习之旅（一）

1.Vue的初步使用

2.关于MVVM架构的Vue设计

阿菜的Vue学习之旅（一）相关推荐

最新文章

热门文章