08-Vue入门实现

一、VUE简介什么是VUE？VUE是一个基于MVVM设计模式的渐进式（集成式）纯前端JS框架。基于这个框架，我们可以让客户端的操作更加简单。如何理解框架？可以理解为已经包含部分核心功能的半成品代码，缺乏个性化定制，主要用于避免重复编码实现。什么场景使用VUE？大多数专注于数据操作（增删改查）的PC或移动端项目都可以用Vue开发，例如：美团、饿了么、淘宝、知乎、大众点评、微博...VUE快速入门官方js文件下载cn.vuejs.org业务及代码实现搭建一个html页面，呈现如下效果，实现点击图中加减按钮时中间数字的变化（需基于vue实现技术）。第一步：定义HTML页面，引入vue.js文件。第2步：在html页面的正文中添加以下元素。-{{n}}+div>说明：1）在界面中添加vue对象监听元素，习惯上使用id="app"2）寻找界面中以后可能变化的位置，用{标记出来{变量名}}特殊语法3）在界面中找到可点击的位置并绑定事件处理器。第三步：在html页面的body底部构建JS代码，在JS中创建一个Vue类型的对象来监听页面中的内容。其中：1）el（元素缩写）属性：“selector”，也就是要选择的范围被Vue对象监控。2）页面上的所有变量都必须存储在data属性中，以对象属性的形式存储。3）页面上所有的事件处理函数都必须存放在methods属性中，并以对象方法的形式存放。02-10月8日发布的VUEvue.js中的MVVM设计分析MVVM介绍背景分析在早期的web前端开发中，我们通常将页面组成分为三部分：html用于定义网页结构和呈现web页面内容。css为页面元素添加相关样式。JS为页面添加交互性。在这种开发结构中，由于HTML和CSS不支持变量，不支持分支循环等程序结构，任何地方的任何修改都需要依赖js来实现。导致很多重复的步骤和js中的编码！MVVM设计概述MVVM是一种增强早期web前端开发的设计理念，将前端代码按照职责分为三部分：界面（View）部分：由html+css组成，并允许在html中，直接在CSS中使用变量、表达式、语句等。模型部分（Model）：一般是一个JSON格式的对象，用于存放视图中需要的数据和功能。视图模型（ViewModel）：负责自动维护模型对象中的变量和界面中的变量的同步。因为ViewModel的存在，数据可以自动同步到界面，几乎避免了很多重复的编码！2.VUE中MVVM实现设计分析VUE前端框架中MVVM的设计，如图：代码实践分析以VUE中MVVM分析为基础，首先分析代码实现??过程，如图图中：3.VUEinInterpolation（插值）语法实现后台分析我们可以在传统的html页面中定义变量吗？当然不是，那么如果我们想通过变量来实现对页面内容的数据操作，也是不行的。当然我们可以在服务端定义html标签库，然后以html为模板，也可以在服务端进行解析，但是这个必须要通过服务端来处理。如何在客户端html页面中实现它？VUE中的插值语法是在html中添加变量，在js程序中使用variable方法与变量值同步，从而简化代码编写。它的基本语法是：{{变量或js表达式}}在{{}}里面可以写：变量、算术计算、三元、访问数组元素、创建对象、调用函数等，总之只要返回的是合法的js变量和表达式即可。但是不能写出没有返回值的程序结构（分支和循环）和js表达式。例如：

用户名：{{username}}

性别：{{gender==1?"Male":"Female"}}

小计：￥{{(price*count).toFixed(2)}}

下单时间：{{newDate(orderTime).toLocaleString()}}

今天星期几{{week[newDate().getDay()]}}