Vue.js 2.x笔记：安装与起步（1）
1. 环境准备
Vue是一套用于构建用户界面的渐进式框架，设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。
安装Node.js，下载：https://nodejs.org/
查看安装：
$ node -v
npm包管理器，集成在node中。
查看npm版本：
$ npm -v
npm是国外资源，资源网络存在部分限制因素.
安装国内镜像cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 安装vue-cli脚手架构建工具
2.1 全局安装vue-cli
$ npm install -g vue-cli
或：
$ cnpm install -g vue-cli
安装vue-cli 3、4：
npm install -g @vue/cli
查看安装的vue版本：
vue -V
2.2 使用vue-cli构建项目
指定项目目录：
C:\Users\Libing>cd /d F:\Projects
构建项目：
F:\Projects>vue init webpack libing.vue
安装项目依赖包：
F:\Projects\libing.vue>cnpm install
运行项目：
F:\10-Projects\libing.vue>cnpm run dev
项目运行成功之后，在浏览器中打开地址查看：http://localhost:8080
修改端口号：config/index.js
项目打包：打包完成后，会生成 dist 文件夹。项目上线时，只需要将 dist 文件夹放到服务器。
$ npm run build
或：
$ cnpm run build
2.3 Vue.js目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建（webpack）相关代码 |
| config | 配置目录，包括端口号等。 |
| dist | 打包目录 |
| node_modules | npm 加载的项目依赖模块 |
| src |
开发目录，目录及文件： ◊ assets：存放图片、Logo等； ◊ components: 目存放一个组件文件，可以不用。 ◊ App.vue: 项目入口文件，可以直接将组件写这里，而不使用 components 目录。 ◊ main.js：项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| xxxx文件 | 配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，可添加一些 meta 信息或统计代码 |
| package.json | 项目配置文件 |
| README.md | 项目说明文档，markdown 格式 |
3. 起步示例
3.1 示例
示例1：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>libing.vue</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head> <body>
<div id="app">
<h1>{{ title }}</h1>
<ul>
<li v-for="todo in todos" v-bind:key="todo.id">
{{ todo.text }}
{{ getTitle() }}
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Todo List",
todos: [{
id: 1,
text: "Pending"
},
{
id: 2,
text: "In Procedure"
},
{
id: 3,
text: "Done"
}
]
},
methods: {
getTitle: function () {
return this.title;
},
add: function () { },
remove: function () { }
}
}); </script>
</body> </html>
示例2：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>libing.vue</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head> <body>
<div id="app">
<h1>{{ title }}</h1>
<input type="text" v-model="newTodo" v-on:keyup.enter="add">
<ul>
<li v-for="(todo,index) in todos">
{{ todo.text }}
<button v-on:click="remove(index)">X</button>
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "Todo List",
newTodo: "",
todos: [{
text: "Pending"
},
{
text: "In Procedure"
},
{
text: "Done"
}
]
},
methods: {
add: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
remove: function (index) {
this.todos.splice(index, 1)
}
}
}); </script>
</body> </html>
3.2 说明
每个Vue应用都需要通过实例化 Vue 来实现。
var vm = new Vue({
// 选项
});
Vue构造函数参数：
el：DOM 元素中的 id
data：定义属性
methods：定义函数，可以通过 return 来返回函数值。
{{ }}：输出对象属性和函数返回值
4. Vue生命周期图示
Vue.js 2.x笔记：安装与起步（1）的更多相关文章
- vue.js初学，笔记1，安装
最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue.js初始学习笔记&vue-cli
笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
- Vue.js 2.x笔记：状态管理Vuex（7）
1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...
- 【vue.js】windows下安装vue.js
windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...
- Vue.js devtool插件下载安装及后续问题解决
在中国,你是无法使用谷歌应用商店,所以你下载插件,要使用一些别的手段,一种是下载源码编译,另一种是通过第三方网站.第一种不适合小白,所以现在介绍第二组. 下载插件网站 国外网站:https://www ...
随机推荐
- 利用GitLab webhook来实现触发Jenkins自动操作
本文针对如何设置GitLab以及Jenkins,实现每次GitLab上有提交事件的时候,都能触发Jenkins执行相应的操作,主要分为以下几个步骤: 1.新建GitLab测试用例 进入个人GitLab ...
- Spring Boot 2.x 系列教程：WebFlux 系列教程大纲（一）
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! WebFlux 系列教程大纲 一.背景 大家都知道,Sprin ...
- Bootstrap 前端框架 遇到的问题 解决方案
bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏 直接放代码,更容易理解.下次可以套这个代码 <!DOCTYPE html> <html> &l ...
- k8s滚动更新（六）--技术流ken
实践 滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停机,整个更新过程始终有副本在运行,从而保证了业务的连续性. 下面我们部署三副本应用, ...
- vscode下面开发vue.js项目
vscode下面开发vue.js项目 https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...
- javascript小记三则：ASP.NET启动web调试，窗体自动放大的方法
源码如下,简单一句JS,轻松解决窗体不会自动放大的浏览器: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- Java UrlRewriter伪静态技术运用深入分析
通常我们为了更好的缓解服务器压力,和增强搜索引擎的友好面,都将文章内容生成静态页面. 但是有时为了能实时的显示一些信息,或者还想运用动态脚本解决一些问题,不能用静态的方式来展示网站内容,必须用到动态页 ...
- 折腾Java设计模式之状态模式
原文地址 折腾Java设计模式之状态模式 状态模式 在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计模式属于行为型模式.在状态模式中,我们创建表示各种状态的对象 ...
- v-if与v-show的使用
vue中的v-if与v-show 区别:v-if='false'的会直接在html里删掉,浏览器中看html的结构不会有 v-show='false'只是样式为overflow:hidden; 所以很 ...
- js 更改对象属性名
来自:https://segmentfault.com/q/1010000011923504 侵删 [ { "Id":"3972679ef2c04151972b376dd ...