Vue入门

zoukankan html css js c++ java

Vue入门
Vue

Soc：关注度分离原则

Vue只负责视图层 HTML+CSS+JS

视图：给用户看，刷新后台给的数据

不管

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

前端三要素
- HTML（结构）：超文本标记语言，决定网页的结构和内容
- CSS（表现）：层叠样式表，设定网页的表现样式
- JavaScript（行为）：是一种弱脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。
css/新技能

M：模型 V：视图 C：控制

JavaScript框架
- jQuery：大家熟知的JavaScripts框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE
  
  6，7，8
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如：1代->2代，除了名字，基本是两个东西）
- React：Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真是DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要格外学习【jSX】语言
- Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发，路由，状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点；
- Axios：前端通信框架；因为Vue的边界很明确，就是处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择jQuery提供的AJAX通信能力；
虚拟DOM：利用内存

计算属性-->Vue特色

集大成者

MVVM+DOM

UI框架
- Ant-Design：阿里巴巴出品，基于React的UI框架
- ELemeUI，iview，ice：饿了么出品，基于Vue的UI框架
- Bootstrap：Twitter推出的一个用于前端开发的开源工具包
- AmazeUI：一款HTML5跨屏前端框架
JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
- WebPack：模块打包器，主要作用是打包，压缩，合并及按序加载
三端统一

混合开发（Hybrid App）

主要目的是实现一套代码三端统一（PC，Android：.apk，iOS：.ipa）并能够调用设备底层硬件（如：传感器，GPS，摄像头等），打包方式主要有以下两种：
- 云打包：HBuild->HBuildX，DCloud出品，API Cloud
- 本地打包：Gordova（前身是PhoneGap）
微信小程序

详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WebUI

主流前端框架

Vue.js

SpringMVC工作流程

大前端时代

后端人员：轻松，便要去研究分布式，微服务，大数据

前端为主的MV*时代
- MVC（同步通信为主）：Model，View，Controller
- MVP（异步通信为主）：Model，View，Presenter
- MVVM（异步通信为主）：Model，View，ViewModel
SPA

优点
- 前后端指责很清晰：前端工作在浏览器，后端工作在服务器。清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发。后端则可以专注于业务逻辑的处理，输出RESTful等接口
- 前端开发的的复杂性可控：前端代码很重，但合理的分层，让前端代码能各司其职。
- 部署相对独立：可以快速改进产品体验
Vue的语法

vue文档：cn.vuejs.org
```
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>计算器</title>
 </head>
 <body>
     <div id="app">
         
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span v-text="num"></span>
            <button @click="add">
                +
            </button>
        </div>
     </div>
     
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         //创建Vue实例
         var app=new Vue({
             el:"#app",
             data:{
                 //content:"heimachengxuyun"
                num:1
             },
             methods:{
                 add:function(){
                     //console.log('add');
                     if(this.num<10)
                     this.num++;
                     else
                     alert('别点了，最大啦');
                 },
                 sub:function(){
                     //console.log('sub');
                     if(this.num>0)
                     this.num--;
                     else
                     alert('别点了，最小了');
                 }
             }
         })
     </script>
 </body>
 </html>
```
- 创建Vue实例时：el(挂载点)，data(数据)，methods(方法)
- v-on指令的作用是绑定事件，简写为@
- 方法中通过this，关键字获取data中的数据
- v-text指令的作用是：设置元素的文本值，简写{{}}
- v-html指令的作用是：
- v-show指令的作用是：根据表达式的真假，切换元素的显示和隐藏
  
  原理是修改元素的display，实现显示隐藏
  
  指令后面的内容，最终都会解析为布尔值
  
  值为true元素显示，值为false元素隐藏
  
  数据改变之后，
- v-if指令的作用是：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）
  
  v-show和v-if的区别：v-show是操纵样式，v-if是操纵dom
  
  表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  
  频繁操作的用v-show，正常使用可以v-if。因为操纵dom，性能消耗比较大
- v-blind指令的作用是：为元素绑定属性
  
  完整写法 v-bind：属性名=表达式
  
  简写写法直接省略v-bind，只保留 :属性名
  
  使用动态增删，更建议使用class
- 轮播图
  
  列表数据使用数组保存
  
  v-bind指令可以设置元素的属性，比如src
  
  v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
- v-for指令是根据数据生成列表结构
  
  数组经常和v-for结合使用
  
  语法是(item,index) in 数据
  
  item和index可以结合其他指令一起使用
  
  数组长度的更新会同步到页面上，是响应式的
- v-on补充
  
  v-on指令可以传递自定义参数，事件修饰符
- v-model
  
  v-model指令的作用：获取和设置表单元素的值（双向数据绑定）
  
  绑定的数据会和表单元素值相关联
  
  绑定的数据<-->表单元素的值
查看全文

相关阅读:
2009年信息技术十大趋势
 转：ASP.NET MVC 第五个预览版和表单提交场景
 终于在博客园开通了
 与虚拟机Oracle连接出现ora12154问题的解决
 Frame框架页面加载中进度条的实现
 WordPress安装部署
 Xmarks不会关闭了，太好了！
抠出淘宝的菜单树
 asp.net实现类似MaskTextBox功能
 win2003 64位系统下ODBC连接使用

原文地址：https://www.cnblogs.com/Athena-life/p/13404787.html

Vue

前端三要素

UI框架

JavaScript构建工具

三端统一

混合开发（Hybrid App）

微信小程序

主流前端框架

SpringMVC工作流程

大前端时代

前端为主的MV*时代

Vue的语法