vue快速入门

最新推荐文章于 2024-11-14 19:13:04 发布

码进未来

最新推荐文章于 2024-11-14 19:13:04 发布

阅读量1k

点赞数 28

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/CAUC_lin/article/details/135748542

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基本概念，强调其渐进式特性和声明式渲染的优势，并通过代码演示了如何在HTML中使用Vue。同时，对比了Vue与传统JavaScript方法在DOM操作上的区别。

摘要由CSDN通过智能技术生成

一、Vue.js概念

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

二、Vue的优势

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

三、代码演示

代码

<!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>

测试结果：

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

传统方式：

<!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代码也需要做相应的改变，高耦合

vue方式

<!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>