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 构建版本。这里列出了它们之间的差别：
| 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初识的更多相关文章
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
随机推荐
- Mockito单元测试框架学习
基本使用方法: http://zhongl.iteye.com/blog/296136 一.问题:如何将mock的类自动注入到待测类,特别是在没有setter方法的情况下. 解答: 前提:待测的ser ...
- 帝国cms目录结构
/ 系统根目录├d/ 附件和数据存放目录 (data) │├file/ 附件存放目录 │├js/ JS调用生成目录 │└txt/ 内容存文本存放目录 ├ ...
- 基于pyteseract google ocr的图形验证码识别
先灰化图片,把图片二值化,利用pytesseract包的pytesseract.image_to_string转换出文字.
- 用代码走进Ftp
因为最近做一个关于集中采集的ftp改造开发.所以研究了哈ftp的开发. 一个简单常用的连接ftp的命令:ftp 主机ip 下面贴出我自己的ftp的demo. 1.FtpUtil工具类 import j ...
- Django管理工具django-admin.py创建项目
安装Django之后就安装了可用的管理工具django-admin.py,可以使用它来创建项目,运行django-admin.py来查看命令介绍:
- Ubuntu13.10：[3]如何开启SSH SERVER服务
作为最新版本的UBUNTU系统而言,开源,升级全部都不在话下.传说XP已经停止补丁更新了,使用UBUNTU也是一个很好的选择.ubuntu默认安装完成后只有ssh-agent(客户端模式),宾哥百度经 ...
- iOS 9 分屏多任务：入门（中文版）
本文转载至 http://www.cocoachina.com/ios/20150714/12555.html 本文由钢铁侠般的卿哥(微博)翻译自苹果官方文档:Adopting Multitaskin ...
- jQuery中的$.each的用法
$.each(Array,function(i,value){ this; //this指向当前对象 i; //i表示当前下标 value; //value表示当前元素 })
- GROW
经理今天介绍了一下,GROW,就给他放上来了: 有一个辅导的方法 叫做 GROW (G:goal:R:reality:O:option:W:will)这个辅导方法是这样的,客观地给自己或者别人提问 ...
- 封装JDBC工具类
JDBC连接数据库基本的步骤是固定的,这样就可以考虑封装一个工具类来简化数据库操作. 封装时用到了Java中的properties配置文件,是以一种键值对的形式存在的,可以把连接数据库要动态的信息保存 ...