vue学习笔记(二)——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^
Vue官网:https://cn.vuejs.org/
菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html
1.简单的介绍
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。
Vue当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
2.Vue的安装
1.独立版本:直接下载并用 <script>
标签引入,Vue
会被注册为一个全局变量。
2.NPM: 在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。
Vue.js 也提供配套工具来开发单文件组件。
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
#从此以后 cnpm同npm一样使用
npm 版本需要大于 3.0,如果低于此版本需要升级它:
# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
# 最新稳定版
$ cnpm install vue
3.命令行工具:
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project
npm install
npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目,安装并运行:
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms > Listening at http://localhost:8080
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
注意:Vue.js 不支持 IE8 及其以下 IE 版本。
vue学习笔记(二)——简单的介绍以及安装的更多相关文章
- Html学习笔记(二) 简单标签
标签的重点 标签的用途 标签在浏览器中的默认样式 <body>标签: 在网页上显示的内容 <p>标签: 添加段落 <hx>标签: 添加标题 标签一共有6个,h1.h ...
- kvm虚拟化学习笔记(二)之linux kvm虚拟机安装
KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之kvm虚拟化环境安装http://koumm.blog.51 ...
- Java设计模式学习笔记(二) 简单工厂模式
前言 本篇是设计模式学习笔记的其中一篇文章,如对其他模式有兴趣,可从该地址查找设计模式学习笔记汇总地址 正文开始... 1. 简介 简单工厂模式不属于GoF23中设计模式之一,但在软件开发中应用也较为 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- redis 学习笔记二 (简单动态字符串)
redis的基本数据结构是动态数组 一.c语言动态数组 先看下一般的动态数组结构 struct MyData { int nLen; char data[0]; }; 这是个广泛使用的常见技巧,常用来 ...
- Vue学习笔记二:v-cloak,v-text,v-html的使用
目录 v-cloak:解决插值表达式闪烁问题 安装插件Live Server 右键以HTTP形式运行HTML v-text:以属性方式使用插值表达式 v-cloak和v-text的区别 v-html: ...
- VUE 学习笔记 二 生命周期
1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...
- vue学习笔记二:v-if和v-show的区别
v-if vs v-show v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做—— ...
- VUE学习笔记二
package.json不可以写注释!!!!!!!!!!初始化:npm init -y 有时候使用 npm i node-sass -D 装不上,这时候,就必须使用 cnpm i node-sass ...
- nodejs学习笔记<二>简单的node服务器
在环境搭建好后,就可以开始动手架设(node驱动)一个简单的web服务器. 首先,nodejs还是用js编写.先来看一段node官网上的实例代码. var http = require('http') ...
随机推荐
- JavaScript 遍历多维数组
基于ECMAScript5提供遍历数组的forEach方法仅能遍历一维数组,没有提供循环遍历多维数组的方法,所以根据白鹤翔老师的讲解,实现如下遍历多维数组的each方法,以此遍历多维数组. <s ...
- [js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...
- Java学习笔记2(输入与随机数简单介绍)
输入: import java.util.Scanner; public class ScannerDemo{ public static void main(String[ ] args){ Sca ...
- 常用数学符号的 LaTeX 表示方法
常用数学符号的 LaTeX 表示方法 (以下内容主要摘自"一份不太简短的 LATEX2e 介绍") 1.指数和下标可以用^和_后加相应字符来实现.比如: 2.平方根(square ...
- 浏览器history操作实现一些功能
返回拦截 功能:从广告进入到落地页后,给history增加一个页面,拦截返回动作 主要用到的是h5中的history对象,使用了pushState,和replaceState来操作. 并且加入了一些条 ...
- java数据结构与算法(一)
1.数据结构概念 所谓的数据结构是数据之间的关系,都是为了提高程序效率而设计的. 分为逻辑关系和物理关系两种. 逻辑关系:人为的一种逻辑思维的认为. (1)集合:在一个范围内有多个数据,数据之间没有关 ...
- python requirements使用方法
记得导入导出包的时候要想激活虚拟环境. 1.导出requirements方法 pip freeze > requirements.txt 2.安装requirements方法 pip insta ...
- 设备树的interrupt
http://www.cnblogs.com/targethero/p/5080499.html https://www.cnblogs.com/xiaojiang1025/p/6131381.htm ...
- Keepalived实战(3)
一.环境 如上图所示: keepalived的mater为proxy-master,keepalived的slave为proxy-slave. 要求:当mater出现问题时,主动切换到slave上.这 ...
- 进行app性能和安全性测试的重要性
如何让用户感觉App运行速度更快呢,这需要对App进行性能测试.限制App性能的因素按照App的系统结构分为App自身和App需要用到的后台服务. 测试App连接网络的速度 一般采用在模拟Mock环境 ...