什么是 MVVM
Vue主要的就是MVVM的实现,它既实现了Anguler的模块化开发,又实现了React的虚拟DOM,但是作为一个后端开发人员,我们只要求会用就可以,并不用去了解ES6标准、Node.js啥的,在这里就Vue简单的一些操作进行梳理一下。
MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软 WPF(用于替代 WinForm,以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet,简单点说就是在浏览器上运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。
MVVM 源自于经典的 MVC(Model-View-Controller)模式(期间还演化出了 MVP(Model-View-Presenter) 模式)。MVVM 的核心是 ViewModel 层,负责转换 Model 中的数据对象来让数据变得更容易管理和使用,其作用如下:
该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互
这里引用一下官网的图:
在 MVVM 架构中,是不允许 数据 和 视图 直接通信的,只能通过 ViewModel 来通信,而 ViewModel 就是定义了一个 Observer 观察者
这里这我们引用了开发环境版本,采用Sublime来进行操作。我们没有使用vue-cli,因为是基础知识点梳理,所以并没有直接采用开发方式,后面我会再更新一个博客介绍一下vue-cli
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者: <!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
第一个Vue
接下来我们就来进行实操,首先第一个Vue项目:
<body> <div id="app"> {{message}}</div> </body> </html> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ message:"Hello World!" } }); </script>
这里的
el:是绑定元素的id
data:在数据对象data中有一个message的属性并设置初始值
注意:
在这里我还是比较推荐在js中运用单引号,在java中用双引号,因为双引号可以使用转义字符,同时单引号在JS中被浏览器(IE,Chrome,Safari)编译的速度更快(在FireFox中双引号更快)
v-if与v-else
这是判断语句,和if/else是相同的作用。
<span v-if="message">Yes</span> <span v-else>No</span> </div> </body> </html> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ message:true } });
注意:这里v-else是不需要等于任何属性值的。
v-else-if
连续条件判断语句
<body> <!--连续条件判断语句 --> <div id="app"> <span v-if="message === '尤'">尤</span> <span v-else-if="message === '雨'">雨</span> <span v-else-if="message === '溪'">溪</span> <span v-else>很厉害</span> </div> </body> </html> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'xx' } }); </script>
注意:
在这里 === 是全等, == 在判断两个值是否相同的时候会先判断数据类型是否一致,如果 如果数据类型一致,才继续判断内容是否相同 ==判断的时候,会忽略数据类型,直接判断内容
js中用undefined和null用 == 判断就是相等的,用 === 判断则是不相等的。
v-for循环遍历
body> <!--创建第一个Vue程序 --> <div id="app"> <span v-for="item in items"> <li>{{item.message}}</li> </span> </div> </body> </html> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ items:[ {message:'尤雨溪'}, {message:'很厉害'} ] } }); </script>
注意: items 是源数据数组并且 item 是数组元素迭代的别名
这里data会自动忽略掉,所以直接遍历items就可以。
v-on监听事件
<body> <!--创建第一个Vue程序 --> <div id="app"> <button v-on:click="sayHi">点击</button> </div> </body> </html> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'Hello' }, methods:{ sayHi:function(event){ //event: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.事件通常与函数结合使用,函数不会在事件发生前被执行! alert(this.message);//this指的是Vue实例 } } }); </script>
在这里我们使用了 v-on 绑定了 click 事件,并指定了名为 sayHi 的方法
v-model
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
单行文本
<div id="vue"> 单行文本:<input type="text" v-model="message" /> 单行文本是:{{message}} </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { message: "Hello Vue" } }); </script>
vue多行文本
<div id="vue"> 多行文本:<textarea v-model="message"></textarea> 多行文本是:{{message}} </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { message: "Hello Textarea" } }); </script>
vue单复选框
<div id="vue"> 单复选框:<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { checked: false } }); </script>
多复选框
<div id="vue"> 多复选框: <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <span>选中的值: {{ checkedNames }}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { checkedNames: [] } }); </script>
vue单选按钮
<div id="vue"> 单选按钮: <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <span>选中的值: {{ picked }}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { picked: '' } }); </script>
vue下拉框
<div id="vue"> 下拉框: <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>选中的值: {{ selected }}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { selected: '' } }); </script>
注意: 如果 v-model 表达式的初始值未能匹配任何选项, 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
结尾
好了 就先到这里了,我还会慢慢的向里面进行补充,十分感谢尤雨溪能够创造出这么好的前端框架,前阵子了解前端的时候就认识了他,同时也知道了刚去世不久的司徒正美,哎,一代才子的陨落呀