一、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 的系统：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   {{ message }}
  11. </div>
  12. var app = new Vue({
  13.   el: '#app',
  14.   data: {
  15.     message: 'Hello Vue!'
  16.   }
  17. })
  18.  
  19. </body>
  20. </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. 最值得一看的几条简单的谷歌 Google 搜索技巧，瞬间提升你的网络搜索能力

    可能你和我一样,几乎每天都必须与搜索引擎打交道,不过很多时候,你辛辛苦苦搜了半天也没找到合适的资料,然而“高手们”上来一眨眼功夫就能命中目标了.这并不是别人运气好,而是搜索引擎其实是有很多技巧可以帮助 ...

  2. 勒布朗法则( LeBlanc)

    看<代码整洁之道>看到了一个概念:勒布朗法则. 咦?这个不是NBA中的勒布朗·詹姆斯法则,当然NBA中针对一些球星的Bug表现也制定了一系列的法则,如乔丹法则(乔丹太过于强大).奥尼尔法则 ...

  3. c #include "" 和 <>

    <>先去系统目录中找头文件,如果没有在到当前目录下找.所以像标准的头文件 stdio.h.stdlib.h等用这个方法. 而""首先在当前目录下寻找,如果找不到,再到系 ...

  4. TCP处理主要开销

    快速的网络TCP 通常受限 发送主机 与 接收主机. 而不是网络设备或协议本身的实现. TCP的处理的主要开销 分为中断操作.数据复制和协议处理. 1:中断操作 2:数据复制 3:协议处理 TCP的处 ...

  5. Vs2010创建WebService

    在Visual Studio 2010中已经找不到直接创建WebService的模板方式了,但下面的方法可心实现: 在 Visual Studio 2010 的新建 Web 应用程序或者 Web 网站 ...

  6. 分布式消息队列RocketMQ与Kafka架构上的巨大差异之1 -- 为什么RocketMQ要去除ZK依赖？

    我们知道,在早期的RocketMQ版本中,是有依赖ZK的.而现在的版本中,是去掉了对ZK的依赖,转而使用自己开发的NameSrv. 并且这个NameSrv是无状态的,你可以随意的部署多台,其代码也非常 ...

  7. php学习三：函数

    1.  php中的函数和js中的区别 在php中,函数的形参可以给一个默认值,若有实参的传递则函数使用传递过来的参数,没有的话显示默认值 代码如下: function showSelf($name=& ...

  8. php 数据库练习之租房子

    题目: 示例图 本次只做图4这个表,因为之前的都已做过 自己在mydb数据库建了一个house表 如图: 自己做的代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  9. c++11——列表初始化

    1. 使用列表初始化 在c++98/03中,对象的初始化方法有很多种,例如 int ar[3] = {1,2,3}; int arr[] = {1,2,3}; //普通数组 struct A{ int ...

  10. css3-巧用选择器 “:target”

    今天(昨天)又发现一个知识盲区 css3的:target标签,之前学习的时候就是一眼扫过,说是认识了,但其实也就记了三分钟,合上书就全忘光了. 直到昨天,遇到一个有意思的题目,用css3新特性做一个类 ...