极简Vue基础指令与方法

前言：

最近感觉南方挺热的，走在路上能听见能听到很大声的蝉鸣。不过我喜欢蝉鸣。也喜欢夏天。最喜欢在夏天旅行。夏天，你好。ヽ(｡◕‿◕｡)ﾉﾟ

最近挺久没更新了，不如，就写篇vue基础的文章把。这是一篇极简Vue基础指令与方法的文章，快速回忆vue基础指令。

@TOC

一.vue脚手架安装：

vue-cli让人们迅速搭建一个vue项目。

1.先打开cmd终端，在终端回车执行如下命令，先全局安装@vue/cli脚⼿架⼯具。

npm install -g @vue/cli

安装完成之后，使⽤如下命令查看版本号：

vue --version

2.进入一个位置创建项目，如我在D盘新建一个空文件夹ceshiItem，我要在里面建一个项目：

打开该目录下的终端，输入以下命令：

vue create 项目名字

如，我建一个叫auroras的项目：

3.选一个项目，箭头代表选中的选项，上下键可以移动箭头，选好之后回车。选最后一个，回车，表示自己手动选择配置。

4.上下键移动，空格进行选中和不选中，选择如下4个，选完直接回车，Router是路由，vuex是状态机，Babel是编译，TypeScript是TypeScript支持，CSS Pre-processors是CSS预编译器（包括：SCSS/Sass、Less、Stylus）等等：

5.选择2.x回车，目前还是2.x版本的用得多，回车后输入y，再回车：

6. 选择Babel等配置文件存放位置，第一个回车，然后出现是否记录以便下次使用该配置，输入y回车，然后为该配置起个名字，好下次直接选择该配置，我就起个auroras：

7. 等待项目初始化，初始化完成，/ceshiItem目录下有了auroras这个项目：

8. 右键通过vscode方式打开auroras这个文件夹，在终端输入如下命令运行项目：

npm run serve

9.等待片刻，出现网址，浏览器输入第一个网址就是项目了：

vue文件的初始模板如下，可将App.vue文件内容删除换成下面的开始学习：

其它：

到这就创建项目好了，其实还有个方法就是用vue可视化面板创建项目，我认为这个简单直观得多，打开本地cmd终端，输入命令 vue ui

可视化面板：

使用可视化面板创建项目可以参考我另一篇文章，里面的第三点详细写有：https://auroras.blog.csdn.net/article/details/117536679

二.页面基渲染 {{x}}：

在data中定义⼀个变量，通过 Mustache 语法 (双大括号：{{xxx}} ) 可以将其内容快速渲染至页面：

核心语法：

{{ msg }}

定义一个msg变量：

data() { return { msg:'hello world' }; },

渲染到页面上：

效果：

在双大括号内部，还可以绑定 JavaScript 表达式，如下 :

看效果：

三.属性渲染 v-bind：

双大括号语法不能作用在 HTML attribute 上，遇到这种情况应该使⽤v-bind指令，简单点来说，就是比如有个div盒子，它有一个title属性，但这个值是什么，不确定，想用变量表示，行，在该属性前用v-bind指令绑定其再指定一个变量做为值:

核心语法：

{{ v-bind }}

如下：

定义title这个变量值为 你好呀：

data() { return { msg:'hello world', title: '你好呀' }; },

效果：

当然，v-bind这个单词是可以省略的，直接这样写 :title=“title”

四.快速渲染 v-for：

比如，我有一个数组，如 arr = [1,2,3,4]，我还有一个div盒子，我想在这个div里放4个子div，每个子div里放一个数字，一 一对应数组里的数据，那怎么写，下面这样吗？：

这样可以，但是万一有一千一万个数也这样？这样是不行的，所以可以用v-for指令根据数组内容动态渲染，先在data定义数组变量：

data() { return { arr: [1,2,3,4] }; },

给要重复生成的子div盒子动态渲染：

item指数组里的每个元素，名字自定义。in表示在哪个数组里，固定写法。in后面表示遍历哪个数组，我们这是arr。:key=“item” 表示索引值，就让当前item为索引值。

效果：

五.条件渲染 v-if，v-else，v-show：

v-if 指令用于条件性地渲染⼀个内容。这个内容只会在指令的表达式返回 true值的时候被渲染。 也可以与 v-else⼀起使用。如我有个div盒子，我想根据变量的值判断显不显示它：

pan变量为假：

data() { return { pan: 0 }; },

看页面什么都无：

改变量为真：

data() { return { pan: 1 }; },

看，出来了：

配合v-else一起用，注意，v-if 与 v-else 同时使用时，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后⾯，否则它将不会被识别：

data() { return { pan: 1 }; },

看效果：

v-show：

另⼀个⽤于根据条件展示元素的选项是 v-show 指令。用法大致⼀样与 v-if ⼀样:

data() { return { pan: 1 }; },

一样的效果：

既然如此，为啥既生v-if还生我v-show，是因为，v-if原理为元素生成和销毁达到效果，而v-show是通过控制样式的显示和隐藏达到效果。所以，某元素未来要频繁渲染用v-show，不频繁用v-if。

六.监听DOM事件 v-on：

以前在写原生 js 的时候，假如要给一个按钮绑定鼠标或键盘等事件，那么要先获取元素然后再绑定，而在vue里简单了操作，直接在标签里完成绑定，如给给一个按钮绑定点击事件：

直接在该DOM元素上写 v-on，后面跟着绑定什么事件，如我是click鼠标点击事件，双引号里要写执行的函数名字，如hand这个函数，且要在vue的 methods ：{ } 这个对象里写执行的函数，如：

methods: { hand(){ console.log('点我了'); } },

效果：

v-on：这个可用@代替，如直接这样写 @click=“hand”

同时，也可以传递参数，如 @click=“hand(e)”

七.双向数据绑定 v-model：

可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元素上创建双向数据绑定。就是如输入框的value值和vue实例里的一个变量能实时保持相同，不论谁改变同步更新。

如,为该标签绑定msg这个变量，同时页面渲染出来看看：

v-model=“变量名字”

定义这个变量：

data() { return { msg:"" }; },

看效果，输入后同步更新：

八.变量识别标签v-html：

如给div写上v-html等于一个变量msg：

定义msg值里放一个h1标签：

data() { return { msg:'北极光之夜' };

相当于直接给div生成了一个子标签 < i>北极光之夜< /i>：

九.八大生命周期钩子函数：

我们把一个vue实例对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。

生命周期详细文章地址：https://auroras.blog.csdn.net/article/details/117658191

十.watch监听器：

Vue 通过 watch 选项提供了⼀个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例子如下：

比如我有一个input输入框，v-model双向绑定一个一个变量monitor：

声明该变量，空字符串就好：

data() { return { monitor:"" };

关键来了，假如我想monitor这个变量的值一改变，就能自动识别到它的改变并执行某些操作要咋办，这就用到监听器了 watch：{…}了。他跟data（）{…}和methods：{…}这些是同一级别的。

如监听monitor，它的值一改变就触发在控制台输出“666666”这个操作：

data() { return { monitor:"" }; }, watch:{ monitor:function(){ console.log(6666); } }, ......略

在watch为monitor声明一个函数，当monitor值一改变，将会自动执行函数里的内容。

看效果：

十一.watch深度监听：

当改变⼀个对象的某个属性，需要触发监听事件时，使用第十点的基本监听可能无法触发事件，此时可以使用深度监听。

如有一个对象 people：{name：‘Aurora’，age：18}，有一个按钮，当点击该按钮时，触发事件改变 people.age 的值，监听器监听到people改变时，输出‘6666666’：

先写一个按钮和点击事件：