• vue学习之一vue初识


    一、vue.js是什么

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

     二、vue.js安装

    Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

    2.1、下载vue.min.js

    https://vuejs.org/js/vue.min.js

    并引用

    <script src="vue.js"></script>

    2.2、直接引用

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    2.3、版本介绍

    在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别:

     UMDCommonJSES Module
    完整版 vue.js vue.common.js vue.esm.js
    只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
    完整版 (生产环境) vue.min.js - -
    只包含运行时版 (生产环境) vue.runtime.min.js -
    • 完整版:同时包含编译器和运行时的版本。

    • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。

    • 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

    • UMD:UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。

    • CommonJS:CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

    • ES Module:ES module 版本用来配合现代打包工具比如 webpack 2 或 Rollup。这些打包工具的默认文件 (pkg.module) 是只包含运行时的 ES Module 版本 (vue.runtime.esm.js)。

    三、基本使用

    3.1、简单实例

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      {{ message }}
    </div>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    
    </body>
    </html>
    

      对比jquery不需要关注找标签、只关注数据就可以了。

  • 相关阅读:
    浏览器内核
    为什么一般请求可以下载文件,Ajax 请求就不能下载
    转 深入理解javascript原型和闭包(10)——this
    node读取文本文件时,去掉BOM
    AMD & CMD
    gulp requirejs Error: ENOENT: no such file or directory, open '/js/require_config.js', 一直报找不到require_config.js,坑死了
    [BZOJ3224]普通平衡树
    [NOIP2014D2]
    [NOIP2014D1]
    [NOIP2013D2]
  • 原文地址:https://www.cnblogs.com/wangshuyang/p/9875264.html
Copyright © 2020-2023  润新知