zoukankan      html  css  js  c++  java
  • Vue学习笔记--Vue 简述

    Vue 在 JavaScript 前端开发库领域属于后来者,其他前端开发库有 jQuery、ExtJS、 Anguals、React 等。
    
    Vue (读音 /vjuː /,类似于 View) 是一套用于构建用户界面的渐进式框架。
         Vue 的渐进式表现为: 
    声明式渲染→组件系统→客户端路由→大数据状态管理→构建工具 
    
    前端框架 Vue.js 的作者是尤雨溪(Evan You)。时至今日,Vue 已 成为全世界三大前端框架之一,GitHub 上拥有 15 万 Star 领先于 React 和 Angular,在 国内更是首选。
    现在的 Vue 跟运行初期相比,最大的区别就是框架涵盖的范围变大了许多。一开始 Vue 只有一个核心库,现在则是包含了路由、状态管理、CLI 工具链、浏览器开发者插件、 ESLint 插件等等的全套设施。 
    Vue 的定位就是为前端开发提供一个低门槛,高效率,但同时又能够伴随用户成长的 框架。所谓的“伴随用户成长”,就是当一个新手用户入门的时候,Vue 尽可能地让这个 过程简单直接,而当之后用户开始做更复杂的应用了,有更复杂的需求了,他会发现 Vue 依 然能够提供良好的支持。这样 Vue 可以在新手成长到进阶的开发者的一路上都提供价值
    为什么选择 Vue 
    如果你开发的 项目数据交互较多,并且前后端分离明显,那么 Vue 将会是你未来技术长足成长的不二选 择。它之所以非常火,是因为它有以下几个突出的优点: 
    1.轻量级框架
    2.双向数据绑定
    3.组件化 
    4.视图,数据,结构分离
    5.虚拟 DOM
    6.运行速度更快

    注意:在开发中建议大家选用开发版本,在控制台有错误提示信息,方便调试程序。
    单击开发版本,会下载到本地一个 Vue.js 文件,直接使用<script> 标签引入即可,格式代码如下:
    
    <script src="文件路径/Vue.js"></script>
    Vue 开发工具
    
    WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具
    1.下载 Webstorm 工具 
    官网地址:https://www.jetbrains.com/webstorm/download/#section=windows。Webstorm 的安装也比较简单,基本一路下一步就可以了。
    安装成功后,就可以创建第一个项目了

    JavaScript 版本修改为最新的 ES6
    在学习 Vue.js 之前,我们首先要了解 ES6,ECMAScript 6(简称 ES6)是 JavaScript 的语 言标准。Vue.js 是需要 ES6 的语法支持,所以我们需要更改 Webstorm 中的 ECMAScript 版 本

    在使用 Vue 的时候我们是需要通过构造函数 Vue()来创建一个 Vue 根实例,这个根实例 是 View 和 Model 交互的桥梁,格式代码如下:
         
    var App= new Vue({ 
        //编写选项代码
     });
    
          
           使用关键字 new 调用 Vue 构造器创建了一个新的 Vue 实例,在实例中需要传入一些选 项对象,选项对象包括 el(挂载元素)、data(数据)、methods(方法)、template(模板)、 生命周期钩子函数等
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--使用CDN方式引入Vue.js-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <!--创建了一个id为App的div标签-->
    <div id="app">
        <!--是用来输出Vue对象中的message值。如果message内容改变,这里输出也会改变。-->
        {{ message }}
    </div>
    <script>
        /*在script标签内,创建了Vue实例对象,该对象中有两个属性:el和data。el属性的作用是将Vue实例绑定到id为App的DOM中,data用于数据的存储*/
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello world'
            }
        })
    </script>
    
    </body>
    </html>
    在 Chrome 浏览器上运行第一个 Vue 应用程序,并按 F12(单击右键检查) 进入开发者工具模式

     

     

    在控制台输入 App.message = ‘Hello world吴裕雄’,然后回车,你会发现浏览器中显示的内容会 直接变成 Hello world吴裕雄,这也是Vue的双向数据绑定
  • 相关阅读:
    URAL1966 Cipher Message 3
    hdu5307 He is Flying
    UVA12633 Super Rooks on Chessboard
    spoj-TSUM Triple Sums
    bzoj3160 万径人踪灭
    bzoj2194 快速傅立叶之二
    FFT NTT 模板
    NOI2009 植物大战僵尸
    最长k可重线段集问题
    最长k可重区间集问题
  • 原文地址:https://www.cnblogs.com/tszr/p/15389370.html
Copyright © 2011-2022 走看看