一、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 构建版本。这里列出了它们之间的差别：

  UMD CommonJS ES 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不需要关注找标签、只关注数据就可以了。

vue学习之一vue初识的更多相关文章

  1. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  2. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  3. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

随机推荐

  1. error MSB8031

    http://go.microsoft.com/fwlink/p/?LinkId=286820 下载

  2. TFS对签入文件忽略设置，解决pdb弹出警告

    我们在使用TFS项目老是出现冲突,要么编译的时候 提示PDB被签出这类的大量弹出,很烦人. 在群友的指点下,对签入文件进行限制.对PDB禁止签入以后,整个世界安静了.非常感谢 TFS=>服务器管 ...

  3. cesium可视化空间数据2

    圆柱圆锥体 <!DOCTYPE html> <html> <head> <!-- Use correct character set. --> < ...

  4. fildder教程

    转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.c ...

  5. 上千万或上亿数据（有反复），统计当中出现次数最多的N个数据. C++实现

    上千万或上亿的数据,如今的机器的内存应该能存下.所以考虑採用hash_map/搜索二叉树/红黑树等来进行统计次数. 然后就是取出前N个出现次数最多的数据了,能够用第2题提到的堆机制完毕. #inclu ...

  6. 超全面的JavaWeb笔记day06<Schema&SAX&dom4j>

    1.Schema的简介和快速入门(了解) 2.Schema文档的开发流程(了解) 3.Schema文档的名称空间(了解) 4.SAX解析原理分析(*********) 5.SAX解析xml获得整个文档 ...

  7. VS2015编译GEOS3.5.1源码

    官网下载下来的geos3.5.1,执行CMakeLists.txt,发现会报错:GenerateSourceGroups 去github上搜索geos,然后去\cmake\modules目录下复制一份 ...

  8. case when 的实战应用(分别取图片展示问题)

    SELECT lg.product_id, lg.goods_id, lg.goods_no, lg.product_price, lg.product_stock, lg.limit_amount, ...

  9. cstring、string、wstring、int、char*、tchar、 int、dword等相互转换代码输出测试

    #include <string> #include <tchar.h> // _TCHAR #include <stdlib.h> #include <io ...

  10. PyQt4重写事件处理方法

    PyQt中的事件处理主要以来重写事件处理函数来实现. #!/usr/bin/python # -*- coding: utf-8 -*- import sys from PyQt4 import Qt ...