vue入门及常用指令

柔情只为你懂 2021-09-13 15:50 391阅读 0赞

## 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 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。