vue快速入门

一、Vue.js概念

  • Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计 为可以自底向上逐层应用。
  • Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
  • 当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue的优势

  • 声明式渲染: 前后端分离是未来趋势 --> 直接声明数据,Vue帮我们将数据渲染到HTML。
  • 渐进式框架: 适用于各种业务需求
  • 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

三、代码演示

  1. 代码

    js 复制代码
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
        
            <!-- 1.引入vue.js -->
            <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
            <script src="./js/vue.min.js"></script>
          </head>
        <body>
            <!-- 2.定义app div,此区域作为vue的接管区域 -->
            <div id="app">
                <!-- {{}} 双括号是vue的插值表达式,将表达式的值输出到html页面 -->
                {{value}}<br>
                {{person}}<br>
                {{names}}<br>
            </div>
        </body>
    
    <script>
        //3.创建vue实例,接管app区域
        var VM = new Vue({
            //定义 vue实例的挂载元素节点,表示vue接管该div
            el:'#app',
            data:{
                value:"测试数据",
                //对象类型
                person:{
                    name:"张三",
                    age:18
                },
                //数组类型
                names:["王五", "赵六"],
                
            },
    
        });
        //4.定义model(数据对象)
    
    
    </script>
    
    
    </html>
  2. 测试结果:

四、声明式渲染 和 传统方式对比

  1. 传统方式:

    javascript 复制代码
    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
     </head>
     <body>
       <div id="app">
       </div>
     </body>
    
     
     <script src="./js/jquery-1.8.3.min.js"></script>
     <script>
       $(document).ready(function () {
         $("#app").append("<h2>Hello World! !</h2>");
       });
     </script>
    
    
    </html>

    jQuery中,如果 DOM 发生变化, js代码也需要做相应的改变,高耦合

  2. vue方式

    js 复制代码
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <h2>{{name}}</h2>
        </div>
      </body>
    
      
      <!-- <script src="./js/jquery-1.8.3.min.js"></script>
      <script>
        $(document).ready(function () {
          $("#app").append("<h2>Hello World! !</h2>");
        });
      </script> -->
    
      <script src="js/vue.min.js"></script>
      <script>
        var VM = new Vue({
          el: "#app", //挂载点
          data: {
            name: "Hello Word! !",
          },
        });
      </script>
    </html>

    在用 Vue中,只需要定义好展示数据,并把它放在 DOM 合适的位置就可以。

相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js