vue快速入门

一、Vue.js概念

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

二、Vue的优势

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

三、代码演示

1. 代码

   !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. 传统方式：

   !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&g服务器托管网t;
      div id="app">
      /div>
    /body>
   
    
    script src="./js/jquery-1.8.3.min.js">/script>
    script>
      $(document).ready(function () {
        $("#app").append("
   Hello World! !
   ");
      });
    /script>
   
   
   /html>
   
   

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

2. 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("
   Hello World! !
   ");
       });
     /script> -->
   
     script src="js/vue.min.js">/script>
     script>
       var VM = new Vue({
         el: "#app", //挂载点
         data: {
           name: "Hello Word! !",
         },
       });
     /script>
   /html>
   
   

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: H-ui前端框架 —— layer.js

layer.js是由前端大牛贤心编写的web弹窗插件。 laye.js是个轻量级的网页弹出层组件..支持类型丰富的弹出层类型，如消息框、页面层、i服务器托管网frame层等，具有较好的兼容性和灵活性。 layer.js用法 1.引入layer.js文件。在HT…