1.安装vue

1.安装node.js,安装完node.js之后,npm也会自动安装
查询是否安装成功的命令:
node -v
npm -v
2.npm install --global vue-cli
3.vue项目初始化命令如下,若没有安装webpack,则先安装webpack
npm install -g webpack
vue init webpack <font color=green>myVue(文件夹名字)</font>
注:安装过程 中有个选项(Use ESLint to line your code ?选择 No )
4.进入到myVue目录下,使用npm install 安装package.json包中的依赖
命令如下:
cd myVue
npm install
5.运行项目:
npm run serve / npm run dev

2.Vue.js 是什么

1、构建用户界面的渐进式框架。

2、关注视图层, 采用自底向上增量开发的设计。

3、通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

3.渐进式怎么理解

Vue的核心的功能,是一个视图模板引擎,但这不是说Vue就不能成为一个框架。
如下图所示,这里包含了Vue的所有部件,在声明式渲染(视图模板引擎)的基础上,我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。
更重要的是,这些功能相互独立,你可以在核心功能的基础上任意选用其他的部件,不一定要全部整合在一起。可以看到,所说的“渐进式”,其实就是Vue的使用方式,同时也体现了Vue的设计的理念。

4.框架和库的区别

(1)框架:是一套完整的解决方案,对项目的侵入性较大,如果项目需要更换框架,则需要重新架构整个项目。
(2)库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求。

5.常用指令

1  v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)?
  2  v-for 格式: v-for="字段名 in(of) 数组json"  循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index?
  3  v-show 显示内容 (同angular中的ng-show)?
  4  v-hide  隐藏内容(同angular中的ng-hide)?
  5  v-if    显示与隐藏  (dom元素的删除添加 同angular中的ng-if 默认值为false)?
  6  v-else-if  必须和v-if连用?
  7  v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误?
  8  v-bind  动态绑定  作用: 及时对页面的数据进行更改?
  9  v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数  函数必须写在methods里面?
  10  v-text  解析文本?
  11  v-html   解析html标签?
  12  v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三元型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'?
  13  v-once  进入页面时  只渲染一次 不在进行渲染?
  14  v-cloak  防止闪烁?
  15  v-pre  把标签内部的元素原位输出

6.v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

7.v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

8.事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

9.按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

10.系统修饰键

.ctrl
.alt
.shift
.meta

11.鼠标按钮修饰符

.left
.right
.middle

12.为什么在 HTML 中监听事件?

1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2.因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

3.当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。