Vue01基础课程脑图思维导图

灰色と青

2023-11-30

浏览量: 5

Vue框架

项目开发

前段部署

Vue基础课程重点知识及实例讲解

树图思维导图提供《Vue01基础课程脑图》在线思维导图免费制作，点击“编辑”按钮，可对《Vue01基础课程脑图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f93edbd634e3cdd2b36f9317949f967b

思维导图大纲

简单了解前端的发展过程

最初的网页以HTML为主，纯静态网页，网页是只读的，信息流只能从服务端到客户端单项流通，没有动态效果

什么是MVVM模式

M：即Model,模型，包括数据和一些基本操作

V：view 视图展示

VM：view Model 视图和数据模型的双向绑定

认识Vue

是一个轻量级的快速构建单页面应用SPA的前端框架，

Vue是一个轻量级的快速构建单页面应用（SPA）的前端框架，本质上就是一个JavaScript框架

前端框架三巨头：Vue.js、React.js、AngularJS，Vue.js以其轻量易用著称。

第一个Vue实例

引入vue.js

<script src="node_modules/vue/dist/vue.js"></script>

<div id="app">   <h1>{{message}}</h1> </div>

页面中的 h1 元素中，我们通过{{message}}的方式，来渲染刚刚定义的message属性。

/3.创建vue实例，vue实例必须创建才能在html页面中使用

var app = new Vue({ });

el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div，表示vue的作用域

el:"#app", //vue在id为app的标签内才可以生效，指定vue的作用域载体

data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

data:{ //key:value,数据对象,MVVM中的M(Model),可以设置很多属性，可以在标签中使用，渲染到视图中 message:"Hello Vue" }

这里我们指定了一个message属性页面中

双向绑定

普通双向绑定

v-model:如果时type类类型为text的input标签，表示input标签的value属性和model数据进行了双向绑定

我们在data添加了新的属性： num 在页面中有一个 input 元素，通过 v-model 与 num 进行绑定。同时通过 {{num}} 在页面输出 input与num绑定，input的value值变化，影响到了data中的num值页面 {{num}} 与数据num绑定，因此num值变化，引起了页面效果变化。没有任何dom操作，这就是双向绑定的魅力

const app = new Vue( { el:"#app", data:{ name:"张三", num:5 } } );

事件处理双线绑定

<button v-on:click="num++">点击+1</button>

这里用 v-on 指令绑定点击事件，而不是普通的 onclick ，然后直接操作num 普通click是无法直接操作num的。

Vue实例

创建Vue实例

var vm = new Vue({ // 选项 })

el 指代元素选择器

data 设置当前vue实例所使用的数据，data的值可以是一个对象

模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染我们可以通过el属性来指定

然后创建Vue实例，关联这个div 这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

var vm = new Vue({ el:"#app" })

数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视 data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统

html

var vm = new Vue({ el:"#app", data:{ num:5 } })

num的变化会影响到 input 的值 input中输入的值，也会导致vm中的num发生改变

方法

ue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。

methods: { //定义属于vue实例的自定义函数 //方式一 /* add:function(){ this.num++; } */

//方式二 add(){ this.num++; } },

生命周期钩子函数

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。 created：在创建Vue实例之后进行调用。 beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}} mounted：我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用 jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。此时页面中的{{name}}已被渲染成小三 beforeDestroy：该函数将在销毁实例前进行调用。 destroyed：改函数将在销毁实例时进行调用。 beforeUpdate：组件更新之前。 updated：组件更新之后。

//写法一 created() { //生命周期钩子函数 this.num=100; } //写法二 /* created:function(){ this.num=200; } */

在Vue中定义一个created函数，created代表在vue实例创建后，自动执行

this

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

其实就是创建的vue实例。

指令

指令 (Directives) 是带有 `v-` 前缀的特殊属性。指令特性的预期值是：单个 JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

插值表达式

该表达式支持JS语法，可以调用js内置函数（必须有返回值）

message:"Hello Vue",

表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;

num:5

可以直接获取Vue实例中定义的数据或函数

methods: { add(){ var $num = this.num+1; return $num; } },

v-text和v-html

使用v-text和v-html指令来替代{{}}

v-text：将数据输出到标签元素内部，如果输出的数据有HTML代码，会作为普通文本输出。

v-html：将数据输出到标签元素内部，如果输出的数据有HTML代码，会被渲染

v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

目前vmodel的可使用元素标签有

input select textarea checkbox radio components（Vue中的自定义组件）

多个 CheckBox 对应一个model模型数据时，model模型数据的类型是一个数组，单个 checkbox，model模型数据默认是boolean类型。

radio对应的值是input的value值。

text 和 textarea 默认对应是input的value的值

select 单选对应字符串，多选对应也是数组。

checkbox的value是有值的情况下： v-model在input的type是checkbox类型中使用时，也是将value属性的值和 vue实例的变量双向绑定注意：和checkbox绑定的vue实例变量，要求是一个数组

v-on

基本用法

v-on指令用于给页面元素绑定事件。

v-on:事件名="js片段或函数名"

另外，事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`，即v-on 可以简写为@

按键修饰符

监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

methods:{ show() { alert("哈哈哈哈") } }

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：全部的按键别名： 1. .enter 2. .tab 3. .delete (捕获“删除”和“退格”键) 4. .esc 5. .space 6. .up 7. .down 8. .left 9. .right

<input v-on:keyup.enter="show">  <input @keyup.enter="show">

v-for

标签内使用，遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。语法是固定的

数组的遍历

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好模型数据

item：迭代得到的数组元素的载体

<li v-for="user in users" :key="user.id"> {{user.id}}-{{user.name}}-{{user.gender}}-{{user.age}} </li>

key为下列数组中元素（对象）的唯一标识，即（id）

data:{ users:[ {id:1,name:'柳岩', gender:'女', age: 21}, {id:2,name:'苍老师', gender:'女', age: 18}, {id:3,name:'范冰冰', gender:'女', age: 24}, {id:4,name:'刘亦菲', gender:'女', age: 18}, {id:5,name:'古力娜扎', gender:'女', age: 25} ] }

:key : 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染，为了方便Vue能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key。这样为每个数据项添加唯一标识, 当页面发生变化时, 同样唯一标识的元素会直接复用，就不会重新创建渲染了。

.数组角标

v-for="(item,index) in items"

items：要迭代的数组 item：迭代得到的数组元素别名 index：迭代到的当前元素索引，从0开始。

<li v-for="(user,index) in users" :key="user.id"> {{index+1}}-{{user.id}}-{{user.name}}-{{user.gender}}-{{user.age}} </li>

遍历对象

v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值 2个参数时，第一个是属性值，第二个是属性名 3个参数时，第三个是索引，从0开始

v-if和v-show

v-if的基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染

v-if="布尔表达式"

data:{ show:true }

与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

<!-- v-for和v-if一起使用时，v-for优先级高，先遍历，后执行判断 - -> <li v-for="user in users" v-if="user.gender == '女'" :key="user.id"> {{user.id}}-{{user.name}}-{{user.gender}}-{{user.age}} </li>

data:{ users:[ //此数据一般是通过vue请求java后台接口获取 {id:1,name:'柳岩', gender:'女', age: 21}, {id:2,name:'苍老师', gender:'女', age: 18}, {id:3,name:'范冰冰', gender:'男', age: 24}, {id:4,name:'刘亦菲', gender:'女', age: 18}, {id:5,name:'古力娜扎', gender:'男', age: 25} ] }

与v-else-if和v-else结合

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

v-show

<button @click="show = !show">点击</button>  <h1 v-if="show"> v-if展示了 </h1>  <h1 v-show="show"> v-show展示了 </h1>

show: true

v-show实现效果和v-if是一模一样的 v-if的值如果是false，是不渲染标签的（没有标签代码），v-show的值如果是false，是渲染标签的（设置标签的属性样式为隐藏）

v-bind

属性绑定

html属性不能使用双大括号形式绑定，只能使用v-bind指令。 v-bind主要作用是针对标签的属性进行双向绑定，比如image中src：v-bin:src="xxx"; v-bind可以简写为

<h1 :title="title"></h1>

data:{ title:"aaaaaaaa" }

绑定class样式

v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

var app = new Vue({ el:"#app", data:{ aa:"abc" } });

也可以绑定成一个数组

.abc{ color: red; } .bb{ background-color: blue; }

data:{ aa:["abc","bb"] }

v-bind:class 可以简写为 :class

绑定style样式

<div id="app"> <div :style="[baseStyles,overridingStyles,fontColor]"> v-bind绑定style操作 </div> </div>

var app = new Vue({ el: "#app", data: { baseStyles: {'background-color': 'green'}, overridingStyles: {border: '10px solid black'}, fontColor: {'color':'blue'} } });

设计概论思维脑图思维导图