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指令的作用：获取和设置表单元素的值（双向数据绑定）

    绑定的数据会和表单元素值相关联

    绑定的数据<-->表单元素的值

     

  •  

posted @ 2020-07-30 16:46  雅典娜Athena  阅读(353)  评论(0)  编辑  收藏  举报