VUE快速入门手册
Author： 无聊大侠hello word
有一点思考，有一点想法，有一点理性！
CSDN@无聊大侠hello word
文章目录
- 前言
- 一、VUE入门
- 二、语法
前言
前言
博客：【无聊大侠hello word】
✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍
一、VUE入门
Vue介绍
VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
Vue.js是一个提供了MVVM风格的双向绑定的javascript库，专注于view层。它的核心是MVVM中的VM，也即是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性。
虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发，因此会经常使用vm（ViewModel的缩写）这个变量名表示Vue实例。
Vue特点：
- 采用组件化模式，提高代码复用率，且让代码更好维护
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
入门示例
- 创建一个html页面，引入vue的库（vue官方提供了两种方式的库：开发模式库会>提示警告和报错信息，生产模式库是压缩后的比较小）。
- 创建一个带有id的
- 在js中编写vue代码，使用构造函数new Vue()创建一个Vue的VM
- 使用el属性，让vue接管该id的区域
- 在data属性中加入需要绑定的变量和变量的值
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门title> <script src="js/vuejs-2.5.16.js">script> head> <body> <div id="app"> {{message}} div> body> <script> //view model // 创建VUE对象 new Vue({ el: "#app", // 由vue接管id为app的区域 data: { // data中的数据供el管理的容器内部使用 message: "hello vue!" // 变量名可以自定义，和页面中的变量名对应即可 } }); script> html>其中el表示element，值通常为一个css选择器，例如el:“#app”、el:“.app”，也可以是直接找到的element对象el: document.getElementById(‘app’)。
运行之后，在浏览器控制台可以看到两个提示：
1. 提示在浏览器安装vue的开发工具
解决方式：根据提示，在浏览器安装vue工具devtools
2. 提示当前使用的是vue开发模式库，不要在生产模式使用
在页面将vue.config的生产模式提示配置为false：>Vue.config.productionTip=false;，该属性在Vue 2.2.0之后才有
浏览器还会出现一个报错信息，找不到小图标favicon.ico，加入该图标即可。
提示：浏览器的报错信息在按F5刷新后可能就看不到了，这是因为浏览器并没有全部刷新，可以按住 shift + F5 强制刷新浏览器。
VS Code可以安装一个Live Server插件，使当前工作空间的静态资源以WebServer形式运行容器和Vue对象是一对一的关系：
- 当两个Vue对象接管同一个容器时，只有第一个生效
<body> <div id="app"> {{message}} div> body> <script> // 两个Vue对象接管同一个容器时，只有第一个生效。 new Vue({ el: "#app", data: { message: "hello vue!" } }); new Vue({ el: "#app", data: { message: "vue" } }); script>
- 当一个Vue对象对应多个容器时，只对第一个容器接管
<body> <div class="app"> {{message}} div> <div class="app"> {{message}} div> body> <script> new Vue({ el: ".app", data: { message: "hello vue!" } }); script>
- 多个Vue对象和多个容器，一一对应，可以正常的一对一接管
<body> <div id="app1"> {{message}} div> <div id="app2"> {{message}} div> body> <script> // 可以正常接管app1容器 const vm1 = new Vue({ el: "#app1", data: { message: "hello vue!" } }); // 可以正常接管app2容器 const vm2 = new Vue({ el: "#app2", data: { message: "VUE" } }); script>Vue代码和MVVM模型对应关系：
M：模型（Model），对应data中的数据
V：视图（View），页面模板
VM：视图模型（ViewModel），Vue实例对象二、语法
插值表达式
数据绑定最常见的形式就是使用"Mustache"语法（双大括号）的文本插值。vue提供了完全的javascript表达式支持。
<!-- 可以进行运算 --> {{ 2 + 1}} <!-- 可以进行逻辑判断 --> {{ ok ? 'YES' : 'NO'}} <!-- 其他js表达式 --> {{ Date.now() }}插值表达式的限制是：每个绑定只能包含单个表达式，所以下面的语句不会生效：
<!-- 这是语句，不是表达式 --> {{ var a = 1}} <!-- 流控制不会生效，需要换成三目运算形式 --> {{ if(ok) { return message } }}常用系统指令
v-on :
可以使用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。
例如：使用v-on:click处理onclick事件
- 在vue接管的div中添加一个button标签，标签使用v-on:click=“fun1(‘hello vue v-on’)”，为该button绑定一个点击事件，触发方法fun1，方法传值hello vue v-on。
- 在vue的js代码中，添加methods属性，并在该属性内添加触发的方法定义
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:clicktitle> <script src="js/vuejs-2.5.16.js">script> head> <body> <div id="app"> {{message}} <button v-on:click="fun1('hello vue v-on')">vue的onclickbutton> div> body> <script> //view model new Vue({ el: "#app", data: { message: "hello vue" }, methods: { fun1:function (msg) { // 或者简写为 // fun1(msg) { alert("hello"); this.message = msg; } } }) script> html>使用v-on:keydown绑定按键按下事件，使用$event作为参数获取事件对象：
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:keydowntitle> <script src="js/vuejs-2.5.16.js">script> head> <body> <div id="app"> <input type="text" v-on:keydown="fun($event)"> div> body> <script> new Vue({ el: "#app", methods: { // vue 中的event对象，和传统js中的event对象是一样的 fun:function(event) { if(event.keyCode == 13) { alert(1); } } } }) script> html>v-on 可以简写为@，例如：
<input type="text" v-on:keydown="fun($event)"> <!-- 简写 --> <input type="text" @keydown="fun($event)">vue中为v-on提供了事件修饰符来处理dom事件细节，如event.preventDefault()、event.stopPropagation()。
vue 中阻止事件传播：
在传统js中，如果在执行了child的鼠标移入事件后，不想继续传播给parent，可以通过调用event对象的stopPropagation()终止事件的传播。
例如：
function childMouseOver() { alert('鼠标移动到child上了'); event.stopPropagation(); // 终止事件的传播 } function parentMouseOver() { alert('鼠标移动到parent上了'); }因为vue的event对象和传统js的event对象是相同的，所以在vue中，如果要阻止事件的传播，也可以使用该语句：
event.stopPropagation();事件修饰符
vue通过由点（.）标示顿指令后缀来调用修饰符：
● .stop：阻止事件冒泡（向上层传播）。同js的event.stopPropagation()
● .prevent：阻止事件的默认行为，例如标签的跳转等。同js的event.preventDefault()
● .capture：使用事件的捕获模式
● .self：只有event.target是当前操作的元素时才触发事件
● .once：事件只触发一次
● .passive：事件的默认行为立即执行，无需等待事件回调执行完毕。例如：在有滚动条的页面使用@wheel监控鼠标的滚轮滚动事件，不加.passive时，需要等该事件绑定的函数执行完毕后，滚动条才会向下滚动；加上.passive后，即使滚轮绑定的函数没有执行完，滚动条也会立即开始滚动。表单提交前验证（表单提交前，验证方法如果不通过，则不进行提交）：
传统的js：
- 绑定一个方法到onsubmit事件，onsubmit需要使用return xxxxx()，否则即使验证不通过也依然会提交
- 绑定的方法需要有一个明确的boolean类型返回值，验证通过返回true，验证不通过返回false
DOCTYPE html> <html> <body> <div id="app"> <form action="https://www.baidu.com" method="post" onsubmit="return checkForm()"> <input type="submit" value="提交"> form> div> body> <script> function checkForm() { alert(1); // 表单验证必须有一个明确的boolean类型返回值 return false; } script> html>vue使用.prevent方式阻止表单提交：
<div id="app"> <!-- 使用.prevent阻止表单提交 --> <form @submit.prevent action="https://www.baidu.com" method="post"> <input type="submit" value="提交"> </form> </div> <script> // 需要vue接管该区域 new Vue({ el: '#app' }); </script>vue调用.stop修饰符的方式阻止事件冒泡传播：child在parent里面，鼠标移入child时除了触发child的鼠标移入事件，也会冒泡给parent。但是加上.stop后，在执行完child的方法后，不再向上冒泡执行parent的方法。
<div id='child' @mouseover.stop="fun2($event)"></div>vue使用.capture使用事件的捕获模式：
未使用.capture时：事件捕获阶段：点击事件会先捕获到外面的div1，后捕获到里面的div2。事件冒泡阶段：先执行里面的div2的事件方法，再冒泡执行div1的事件方法。<body> <div id="app"> <div id="div1" @click="showMsg(1)"> div1 <div id="div2" @click="showMsg(2)"> div2 </div> </div> </div> </body> <script> Vue.config.productionTip = false; const vm = new Vue({ el: '#app', methods: { showMsg(msg) { console.log(msg); } } }); </script>在div1加上.capture，启用捕获模式：
因为在捕获阶段是先捕获的外面的div1，所以加上.capture后，会先执行外面div1的绑定事件方法，后执行里面的div2事件方法<body> <div id="app"> <div id="div1" @click.capture="showMsg(1)"> div1 <div id="div2" @click="showMsg(2)"> div2 </div> </div> </div> </body> <script> Vue.config.productionTip = false; const vm = new Vue({ el: '#app', methods: { showMsg(msg) { console.log(msg); } } }); </script>事件修饰符可以流式处理，连续使用多个：
例如：先阻止冒泡，再阻止弹窗<a href="https://www.baidu.com" @click.stop.prevent="showInfo">点击提示信息</a>按键修饰符
● .enter
● .tab
● .delete（捕获“删除”和“退格”键）
● .esc
● .space
● .up
● .down
● .left
● .right
● .ctrl
● .alt
● .shift
● .meta（Windows按键）vue调用.enter获取回车键、调用delete获取删除键：
<body> <div id="app"> test:<input type="text" @keydown.enter="fun1" @keydown.delete="fun2"> <br> <!-- alt+C 组合键 --> test2:<input type="text" @keydown.alt.67="fun3"> </div> </body> <script> new Vue({ el: '#app', methods: { fun1: function () { alert("按下了回车键"); }, fun2: function () { alert("按下了删除键"); }, fun3: function () { alert("同时按下了alt和C"); } } }); </script>也可以使用按键的键名，例如：
@keydown.Enter // 此处的Enter是按键键名，vue中的enter是vue为该按键起的别名 // 获取键名和键值的方式： let keyName = event.key; let keyCode = event.keyCode; // 该方式对单个单词的键名有效，例如Enter、Control // 对于多个单词组成的键名，需要将单词转成小写，单词间使用横线连接 @keydown.CapsLock // 该写法无效，因为CpasLock是两个单词 @keydown.caps-lock // 该写法可以正常识别或者使用键值进行修饰（不推荐）:
虽然部分浏览器还支持这种写法，但是将来可能会被移除。不推荐使用这种写法。不同用户的键盘键值可能也有差异。@keydown.13 // 按下回车键也可以自定义按键别名：（也不推荐）
Vue.config.keyCodes.自定义键名 = 键码对于tab键，不适合使用keyup事件，因为tab键本身就会切换焦点，按下tab键后焦点就移动到其他地方去了。所以对于tab键，一般使用keydown事件。
ctrl、alt、shift、meta是系统修饰键，配合keydown可以正常使用。但是如果配合keyup事件，需要按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发。
methods中的this：<body> <div id="app"> <button v-on:click="showInfo">提示信息</button> </div> </body> <script> Vue.config.productionTip = false; const vm = new Vue({ el: '#app', methods: { // 此处不建议使用箭头函数，因为如果使用箭头函数则this变为window，而不是Vue实例。 // 如果是组件，那么this就是组件。使用了箭头函数就不再指向组件就会报错。 showInfo(event) { // 和普通的绑定事件函数一样，该函数也有一个默认event事件参数 console.log(event.target.innerHTML); // 可以通过event事件获取相关内容 console.log(this); // 此处的this是Vue实例 } } }); </script>methods中定义的函数最终也会被加进vm对象属性上。
所以，理论上，把showInfo写在data中也可以正常运行：const vm = new Vue({ el: '#app', data: { // 把方法写在data中也可以正常运行 showInfo(event) { console.log(event.target.innerHTML); console.log(this); } } });但是不推荐这么做。因为data中的内容vue是需要做数据代理的，但是methods中的内容不需要做数据代理也能运行。如果把函数写在data中，就会消耗资源让vue对函数做了没有意义的数据代理。
v-text 和 v-html
传统js的innerText和innerHTML：
window.onload = function () { // innerText会将<h1>作为字符串输出 document.getElementById("div1").innerText = 'text
'; // innerHTML会解析<h1>，将innerHTML字符串加粗 document.getElementById("div2").innerHTML = 'innerHTML
'; }vue里面使用v-text、v-html进行处理：
<div id="app"> <!-- 功能类似innerText --> <div v-text="message"></div> <!-- 功能类似innerHTML --> <div v-html="message"></div> </div> <script> new Vue({ el: "#app", data: { message: "text
" } }); </script>v-bind
插值语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。
例如：将html的color属性设置成变量<!-- 在color属性里面使用插值表达式 不会 生效 --> <font size="5" color="{{myColor}}">text</font>想要给Html标签属性设置变量，需要使用v-bind指令：
<body> <div id="app"> <font size="5" v-bind:color="myColor1">text1</font> <font size="5" v-bind:color="myColor2">text2</font> </div> </body> <script> new Vue({ el: '#app', data: { myColor1: "red",`在这里插入代码片` myColor2: "green" } }); </script>v-bind指令也可以进行简写：
<!-- 完整写法 --> <font size="5" v-bind:color="myColor2">text2</font> <!-- 简写 --> <font size="5" :color="myColor2">text2</font>绑定class属性时，普通的class和v-bind:class可以自动合并：
<!-- 如果a变量的值为normal，则最终生成的class会自动合并为：class='basic normal' --> <div class="basic" :class="a"></div> <!-- class绑定的变量a可以是数组，将数组中的每一项都加到class中 --> <script> new Vue({ data: { a: ['test1', 'test2', 'test3'] } }) </script> <!-- 也可以直接在绑定变量的位置写数组 --> <div class='basic' :class='["test1", "test2", "test3"]'></div> <!-- 也可以在绑定变量的写数组变量（变量名不加引号，加了引号就是字符串） --> <div class='basic' class='[a, b, c]'></div> <script> new Vue({ data: { a: 'test1', b: 'test2', c: 'test3' } }) </script>绑定class的对象写法：
<!-- class绑定的变量是一个对象，对象内部属性是样式名称 --> <div class='basic' :class="classObj"></div> <script> new Vue({ data: { classObj: { test1: true, // 使用test1样式 test2: false // 不使用test2样式 } } }); </script> <!-- 也可以直接在class上绑定 --> <div class='basic' :class="{test1:true, test2:false}"></div>v-bind绑定style：
<body> <div id="app"> <!-- 原始html写法 --> <div id="basic2" style="font-size:40px;">aaa</div> <!-- vue写法 --> <!-- style加上大括号做成对象，font-size换成小驼峰写法 --> <div id="basic" :style="{fontSize: fsize + 'px'}">aaa</div> </div> </body> <script> const vm = new Vue({ el: '#app', data: { fsize: 40 } }); </script>也可以写成
<body> <div id="app"> <!-- 将样式绑定到变量 --> <div id="basic" :style="styleObj">aaa</div> </div> </body> <script> const vm = new Vue({ el: '#app', data: { // 将样式变量写成对象形式 styleObj: { // 属性名使用小驼峰写法 fontSize: '40px', color:'red', backgroundColor:'orange' } } }); </script>style数组写法：
<body> <div id="app"> <!-- 使用数组形式指定多个样式对象 --> <div id="basic" :style="[styleObj, styleObj2]">aaa</div> </div> </body> <script> const vm = new Vue({ el: '#app', data: { styleObj: { fontSize: '40px' } styleObj2: { color:'red', backgroundColor:'orange' } }); </script>v-model
v-bind是单向的数据绑定：
<!-- v-bind可以将vue中的变量绑定到标签属性上，但是标签值变化时不能更新vue中变量的值 --> <input type="text" v-bind:value="user.username"> <br>使用v-model进行对象属性双向绑定：
v-model只能用在表单类输入元素上。
v-model:value可以简写为v-model，因为v-model收集的就是value属性值。<body> <div id="app"> <form action="" method="post"> 用户名: <input type="text" v-model:value="user.username"> <br> <!-- v-model:value可以简写成v-model --> 密码: <input type="text" v-model="user.password"> <br> </form> </div> </body> <script> new Vue({ el: '#app', data: { user: { username: 'tom', password: '123456' } } }); </script>v-for
使用v-for遍历数组：
<body> <div id="app"> <!-- 遍历字符串数组 --> <li v-for="(item) in list1">{{item}}</li> <!-- 遍历对象数组 --> <li v-for="(item) in list2">{{item.username + ":" + item.age}}</li> </div> </body> <script> new Vue({ el: '#app', data: { list1: ['tom', 'jane', 'marry'], list2: [ {username: 'tom', age: 10}, {username: 'jane', age: 30}, {username: 'marry', age: 18}, ] } }); </script>也可以遍历成2个参数，第1个参数为项目值，第2个参数为在数组中的下标：
<li v-for="(item, index) in list1">{{index + ": " + item}}</li>遍历对象：
<body> <div id="app"> <!-- 第1个参数为值，第2个参数为key --> <li v-for="(value, key) in list3">{{key + ":" + value}}</li> </div> </body> <script> new Vue({ el: '#app', data: { list3: { id: 1, name: 'tom', age: 19 } } }); </script>遍历字符串：
<div id="app"> <ul> <li v-for="(char, index) in str">{{index}}:{{char}}</li> </ul> </div> <script> const vm = new Vue({ data: { str: "hello" } }); </script>遍历指定次数：
<!-- 遍历5次：value为从1开始递增的数字，index为从0开始递增的数字 --> <li v-for="(value,index) in 5">{{index}}:{{value}}</li>双层循环
<body> <div id="app"> <table> <tr> <td>序号</td> <td>名称</td> <td>年龄</td> </tr> <!-- 第一层循环，遍历每个学生 --> <tr v-for="(item, index) in list2"> <td>{{index}}</td> <!-- 第2层循环，遍历学生的每个属性 --> <td v-for="(value, key) in item">{{key + ":" + value}}</td> </tr> </table> </div> </body> <script> new Vue({ el: '#app', data: { list2: [ {username: 'tom', age: 10}, {username: 'jane', age: 30}, {username: 'marry', age: 18}, ] } }); </script>v-for为每个数据添加key：
<body> <div id="app"> <h2>人员列表</h2> <ul> <!-- 为列表项动态绑定key --> <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li> </ul> </div> </body> <script> Vue.config.productionTip = false; const vm = new Vue({ el: '#app', data: { persons: [ { id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 30 } ] } }); </script>也可以将索引值定义为key：
<!-- v-for第二个参数为index，可以将索引值定义为Key --> <li v-for="(p,i) in persons" :key="i">{{p.name}}-{{p.age}}</li>Key的内部原理：
在虚拟DOM中，key是虚拟DOM对象的标识。
当状态中的数据发生变化时，Vue会根据“新数据”生成“新的虚拟DOM”，随后Vue进行“新虚拟DOM”与“旧虚拟DOM”的差异比较，比较规则为：
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变，直接使用之前的真实DOM
- 若虚拟DOM中内容变了，则直接生成新的真实DOM，随后替换到页面中之前的真实DOM
- 旧虚拟DOM中未找到与新虚拟DOM相同的key：
- 创建新的真实DOM，随后渲染到页面
用index索引值作为key可能会引发的问题：
- 若对数据进行逆序添加（不从尾部追加）、逆序删除（不是从后往前删除）等破坏顺序的操作，会产生没有必要的真实DOM更新，结果界面效果没有问题，但是效率变低
- 如果同时数据中还包含输入类的DOM，则会产生错误的DOM更新，致使界面错乱
开发中如何选择key：
- 最好使用每条数据的唯一标识作为key，例如id等
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
当v-for标签中没有写key时，vue会默认使用index作为key。
v-for里面可以使用of代替in，效果一样：
<!-- in 和 of 效果完全一样 --> <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li> <li v-for="p of persons" :key="p.id">{{p.name}}-{{p.age}}</li>示例：列表过滤并排序：
<body> <div id="app"> <h2>列表过滤并排序</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 1">年龄升序</button> <button @click="sortType = 2">年龄降序</button> <button @click="sortType = 0">原顺序</button> <ul> <li v-for="(p,index) of fillPersons"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> </body> <script> Vue.config.productionTip = false; const vm = new Vue({ el: '#app', data: { keyWord:'', sortType:0, // 0:原顺序，1：升序，2：降序 persons: [ {id:'001', name:'马冬梅', age: 19, sex:'女'}, {id:'002', name:'周冬雨', age: 20, sex:'女'}, {id:'004', name:'温兆伦', age: 22, sex:'男'}, {id:'003', name:'周杰伦', age: 21, sex:'男'} ] }, computed: { fillPersons() { const arr = this.persons.filter((p) => { return p.name.indexOf(this.keyWord) !== -1; }); if(this.sortType) { arr.sort((a,b) => { return this.sortType === 1 ? b.age-a.age : a.age-b.age; }); } return arr; } } }); </script>v-if
条件渲染指令：v-if、v-else-if、v-else，v-show。
v-show做条件渲染，判断是否展示该标签：<!-- v-show中使用布尔值 --> <h2 v-show='true'>aaa</h2> <!-- v-show使用表达式 --> <h2 v-show='1 == 2'>aaa</h2> <!-- v-show绑定变量 --> <h2 v-show='a'>aaa</h2> <script> new Vue({ data: { a: true } }); </script>v-if做条件渲染：
<!-- v-if中使用布尔值 --> <h2 v-if='true'>aaa</h2> <!-- v-if也可以使用表达式、变量 -->v-if如果为false时，该标签不再渲染出来。v-show为false时，会将该标签设置为display:none。
如果变量的值变化频繁，建议使用v-show，因为v-show的标签已经渲染出来，只是设置了display属性是否展示。
else的用法：<div v-if="n === 1"> Angular </div> <div v-else-if="n === 2"> React </div> <div v-else-if="n === 3"> Vue </div> <div v-else> abc </div>先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！