VUE2速成-1（基础知识）

---

一、.Vue 环境搭建与创建项目

首先需要安装nodejs。

# 查看nodejs是否安装成功（vue对nodejs版本要求不高只要v10+即可）
node -v

# nodejs的包管理工具是npm，而npm的镜像cnpm是淘宝推出的国内镜像。
npm -v
# 安装npm国内镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

# webpack是一个前端工程构建工具

1. 搭建Vue环境

• 前端开发工具使用VSCode
  官网：https://code.visualstudio.com/
  
  需要安装的插件如下：

# 产生vue的高亮语法效果
Vetur

# 中文语言包
Chinese (Simplified) Language Pack for Visual Studio Code
按 "Ctrl+Shift+P" 以显示“命令面板”，然后开始键入 "display" 以筛选和显示“配置显示语言”命令。

# 图标库
vscode-icons

# 小括号匹配显示
Bracket Pair Colorizer

# 代码格式化
Better Align
/* 选中，ctrl + shift + p，align  */

# 其他插件
indent-rainbow
Auto Rename Tag
AZ AL Dev Tools/AL Code Outline
js-beautify
CSS Peek
Debugger for Chrome
VS Code ESLint extension
Node npm
Git Patch
git start-bash
gitignore extension for Visual Studio Code
HTML CSS Support
HTML Snippets
JavaScript (ES6) snippets
jQuery Code Snippets
language-stylus
Live Server
Markdown PDF
Markdown All in One
Paste Image
Path Intellisense
Stylus Support
View In Browser
VS Color Picker
Vue 3 Snippets
Vue 2 Snippets
AI Doc Writer

VSCode的快捷键（默认）
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
自定义可以：

• 官网：https://cn.vuejs.org/index.html
  
  Vue CLI是Vue开发的脚手架工具。
  Vue CLI的官网：https://cli.vuejs.org/zh/
• 修改镜像源加速npm

# 查看当前使用的镜像源
npm config get registry

# 临时修改镜像源
npm install 软件包名 --registry https://registry.npm.taobao.org/

# 全局修改镜像源
npm config set registry https://registry.npm.taobao.org/

还可以参考“修改镜像源加速npm”

• 安装

npm install -g @vue/cli

• 创建项目（项目名称不要使用大写字母）

vue create my-project

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli

Vue CLI v4.5.13
Failed to check for updates
? Please pick a preset: (Use arrow keys)  
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features  <---选择这个

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files
> In package.json

? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: 
  Use Yarn
> Use NPM

�🎉  Successfully created project test-prj.
�👉  Get started with the following commands:

 $ cd test-prj
 $ npm run serve

Babel 是ES6转ES5的方案。
Progressive Web App (PWA) Support 表示PC端和手机端兼容。
CSS Pre-processors 表示CSS预处理语言LESS/SASS。

npm run 运行命令的参数：

2. vue-cli工程的目录

• node_modules/
  包含所有的依赖包/模块。该文件夹不用上传至任何平台中。后期可以再安装。
• public/
  项目主目录。里边的favicon.ico可以换成你的图标，这个图标是浏览器标签页上的图标。index.html是挂载你页面的最外层HTML页面——$mount(‘#app’)。在index.html中可以修改你网页的title，或者引入script，比如引入百度地图的key等<script>。
• src/
  包含所有的源代码文件。

二、Vue的基础知识

可以参考手册：https://cn.vuejs.org/v2/guide/

1. 模板语法

vue模版基本结构

<template>
	<!--描述结构-->
</template>

<script> //脚本部分
export default {
  name: 'HelloWorld',
  data() { //数据绑定
    return {
      hello:"我就是试一下" //绑定值的变量
    }
  methods:{
  	clickHandler(){
  		console.log("来啦"); //v-on:事件绑定
  		//可以使用this来引用data中的属性。
  	}
  }
}
</script>

<style scoped> <!--scoped表示样式只在当前组件内有效-->
  # 样式
</style>

vue语法通过标签属性来产生动态绑定效果。

data()方法返回值中定义的变量（冒号前的名称）将出现在template模版标签内的各标签中——要么作为标签值，位于双大括号中。要么作为标签的属性值，位于双引号中。

1.1 插值

• 文本
  数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

• 原始HTML
  双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

• Attribute
  Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

其中id为标签的attribute。通过v-bind:来定义绑定。

• 使用 JavaScript 表达式
  插值只能使用单行表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

1.2 指令

指令 (Directives) 是带有 v-前缀的特殊 attribute。

<p v-if="seen">现在你看到我了</p>

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>

v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。

1.3 修饰符

<form v-on:submit.prevent="onSubmit">...</form>

1.4 缩写

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

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

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

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

2. 条件渲染

# 单个标签v-if
<h1 v-if="awesome">Vue is awesome!</h1>

# 单个标签v-if v-else
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

# 一组标签v-if
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

# 一组标签v-if v-else
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

# 一组标签v-if v-else-if v-else
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

使用template标签，则该标签不会被渲染到页面上。其他的容器标签是会被渲染到页面上的（比如：div）。

v-show条件渲染

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display——style=“display:none;”。
注意，v-show 不支持 template 标签元素，也不支持 v-else。

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. 列表渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

也可以用 v-for 来遍历一个对象的 property。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

4. 事件处理

• vue的生命周期
  
  注意红色的部分——钩子函数。

• 事件需要注意的几个要点
  ♦ 事件处理函数的绑定需要在methods:部分定义。
  ♦ 可以使用this来引用data中的属性。
  ♦ 事件处理函数可以传递参数：
  不给参数，则默认传递内置event对象；否则就传递显式给出的函数参数。

1. 默认传递event
<li @click="getMsg" v-for="(item,index) in result" :key="index">{{item.text}}</li>

2. 显式传递参数
<li @click="getMsg(item.text)" v-for="(item,index) in result" :key="index">{{item.text}}</li>

3. 显式传递参数并传递默认参数（原生参数，如$event，一般放参数列表的最后。）
<li @click="getMsg(item.text,$event)" v-for="(item,index) in result" :key="index">{{item.text}}</li>

• 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

• v-on 还可以接收一个需要调用的方法名称。

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

......
 methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
......

• 内联处理器中的方法

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

• 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

• 事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 阻止单击事件冒泡 -->
<a v-on:click.prevent="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown">

• 按键码
  为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
  .enter
  .tab
  .delete (捕获“删除”和“退格”键)
  .esc
  .space
  .up
  .down
  .left
  .right
  可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
  .ctrl
  .alt
  .shift
  .meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

• 鼠标
  .left
  .right
  .middle

5. 数组更新检测

• 变更方法
  push()
  pop()
  shift()
  unshift()
  splice()
  sort()
  reverse()
• 替换数组
  变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。
  当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

vue中用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

6. 表单输入绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

修饰符的使用

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

<input v-model.number="age" type="number">

<input v-model.trim="msg">

7. 计算属性和侦听器

7.1 计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

......
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
......

注意在模版template中调用时computed属性不用加“()”，而使用methods需要加“()”。
computed属性值有缓存，而methods每一次调用都要重新求值。

7.2 侦听器

<template>
	<div>
		<input type="text" v-model="dataFieldName" />
	</div>
</template>
......
data: {
	return {
		balbla:"",
		dataFieldName:""
	}
}
watch: {
    dataFieldName(newValue,oldValue){
    	console.log(newValue,oldValue);
    }
}

要求其中的方法名必须是你监听的属性名（data中定义）。

8. Class与 Style 绑定

• Class绑定

<p :class="{ 'active':isActive }">一个class</p>
<p :class="['a1','a2']">两个class</p> 
<p :class="[{'active':true},'a1','a2']">三个class</p>
......
data: {
  isActive: true
}

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的真值。
语法要求嵌套使用时必须是数组嵌套对象——[{}]。