Vue 快速入门

最新推荐文章于 2024-05-27 18:55:13 发布

xianzhong_ge

最新推荐文章于 2024-05-27 18:55:13 发布

阅读量274

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xianzhong_ge/article/details/122990260

版权

Vue概述
- 什么是Vue
  - Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面 的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以 自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
  - 简:Vue是一套用于快捷开发前端应用的框架技术！
  - Vue是一款用于快捷开发前端应用的框架,他的特点用于构建用户界面的前端渐进式框架,采用自底向上的逐层应用,只关于视图层,技术简单易上手。
- 为什么要使用Vue
  - 使用Vue可以实现视图页面上的组件重复使用，提高了开发和维护的效率！同时优化了页面的加载和渲染的效率，提高了用户体验！
- Vue和其他框架对比
  - React
    - 重量级框架，一般中大型项目、大厂会直接使用React技术开发项目
    - 封装较为彻底，定制化功能较差，需要有一定的技术门槛
    - 运行时性能得到了优化
  - Angular
    - Angular 1：2016年最流行的前端开发框架技术
    - Angular 2+：国内逐渐失去了开发市场
  - Ember
    - 一个全能框架，学习路线较为漫长
    - 国内没有开发市场
  - Knockout
    - 一个传统的数据处理非常优秀的框架
    - 过时了
  - Polymer
    - 不适用于常规项目技术选型，有一定的技术门槛
  - Riot
    - 国内没有开发市场
Vue入门应用
- Vue数据渲染
- Vue数据绑定
- 总结：优点分析
  - 传统的js数据渲染到页面中，需要通过dom操作（innerText/innerHTML）实现
  - Vue应用中，可以直接通过Vue实例，使用固定语法（{{变量名称}}）将数据直接渲染到页面中，优化了dom操作。
Vue基础
- 常见指令
  - v-text/v-html/v-once/v-show/v-if/v-for/v-bind/v-on...
- 样式处理
  - class样式处理(掌握)
    - 对象格式：通过变量控制某个样式是否生效【一定掌握】
    - 数组格式：通过定义多个变量和样式名称映射的形式，使用数组表达式设置多个样式【使用较少】
  - style样式处理(了解)
    - 样式的处理有两种操作方式：行内样式的处理上，了解它的基本语法即可，一般项目处理中很少使用
      - 对象格式
      - 数组格式
  - <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    html, body{background:#ddd;}
    #title{text-align: center; line-height: 50px;width: 200px;height: 50px;background-color: white; color: black;}
    #title.active{background:orangered; color: white;}
    
    .dbg{background: #069;}
    .dfont{color: white;}
    .dfontsize{font-size: 22px;}
    </style>
    </head>
    <body>
    <div id="app">
    <div id="title"
    :class="{active:isActive}"
    @click="isActive=true">选项卡标题</div>
    
    <div :class="[dbg, dfont, dfontsize]">
    2022 中国冬奥运会
    </div>
    
    <hr>
    
    <div style="background-color: orangered;color: white;">7枚金牌 4枚银牌 2枚铜牌.. 持续增长中</div>
    <div :style="{backgroundColor:sbackground, color: scolor, fontSize:ssize}">7枚金牌 4枚银牌 2枚铜牌.. 持续增长中</div>
    </div>
    <script src="./vue.js"></script>
    <script>
    const vm = new Vue({
    el: "#app",
    data: {
    isActive: false,
    dbg: "dbg",
    dfont: "dfont",
    dfontsize: "dfontsize",
    sbackground: "orangered",
    scolor: "white",
    ssize: "22px"
    }
    })
    </script>
    </body>
    </html>
- 案例开发
  - 选项卡案例
  - 添加好友案例

xianzhong_ge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 快速入门

Vue概述什么是Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。简:Vue是一套用于快捷开发前端应用的框架技术！ Vue是一款用于快捷开发前端应用的..
复制链接

扫一扫