一、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. django-south使用 [转]

    转自: http://alexliyu.blog.163.com/blog/static/16275449620126239949478/ 使用South之前铭记:请你一定要相信他的能力,抛弃对他的不 ...

  2. maven 配置多模块项目 pom modules

    所有用Maven管理的真实的项目都应该是分模块的,每个模块都对应着一个pom.xml.它们之间通过继承和聚合(也称作多模块,multi-module)相互关联.那么,为什么要这么做呢?我们明明在开发一 ...

  3. mysql数据库中的存储引擎是什么意思呢

    需求描述: 在看mysql的内容,经常提到存储引擎,那么到底什么是存储引擎呢 在这里对于概念进行理解,记录下. 概念解释: 存储引擎(storage engine):存储引擎就是mysql中的一个组件 ...

  4. [spring] 对实体 "characterEncoding" 的引用必须以 ';' 分隔符结尾

    org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 26 in XML document from ...

  5. haffman哈夫曼编码的实现

    <span style="font-size:18px;">/* 1.在一棵二叉树中,我们定义从A节点到B节点所经过的分支序列为从A节点到B节点的路径: 定义从A节点到 ...

  6. 当singleton Bean依赖propotype Bean，可以使用在配置Bean添加look-method来解决

    在Spring里面,当一个singleton bean依赖一个prototype bean,因为singleton bean是单例的,因此prototype bean在singleton bean里面 ...

  7. VMware克隆虚拟机后网络不能正常使用的解决方法

    1.问题情况 在vmware中克隆一个虚拟机后,新的虚拟机网络无法使用,并用原操作系统中的网卡eth0在克隆出来的新系统中,网卡号变成了eth1,并且IP地址也丢失了,网络不可正常使用. 2.环境情况 ...

  8. 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图（6）

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

  9. JavaBean与Map<String,Object>相互转换

    一.为什么要实现javaBean与Map<String,Object>相互转换 Spring中的BaseCommandController对象可以将传递过来的参数封装到一个JavaBean ...

  10. [WIFI] WIFI 破解（初级）

    话不多说,先来看看字典破解 wpa2 的效果 =================================== ========================================= ...