南京建设网页培训班_电子商务网站应该如何建设_网页设计需要学什么软件_网络营销和直播电商专业学什么

文章目录

1. Vue概述
2. 入门程序
3. Vue指令
- 3.1 v-bind和v-model
- 3.2 v-on
- 3.3 v-if和v-show
- 3.4 v-for
- 3.5 事件驱动
- 3.6 侦听属性
4. 生命周期

1. Vue概述

Vue.js 是一套构建用户界面的 渐进式框架。采用自底向上增量开发的设计。Vue 的核心库只关注视图层，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
在开发中，因为数据是通过请求从后台获取的，所有需要需要我们使用DOM操作，将后台获取到的数据呈现到页面上。

MVVM(Model-View-ViewModel)前端开发思想:

Model: 数据模型，指前端中通过Ajax来发起请求从后台获取的数据
View: 视图，用于展示数据的页面。可以通过ElementUI框架替代HTML+CSS，从而更加方便的搭建View
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

让开发者更加关注数据，而非数据绑定到视图这种机械化的操作。

其中ViewModel部分开发的vue前端框架，可以替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。参考下图对比：
在这里插入图片描述

因为vue全部帮我们封装好了，所以我们看不到之前的DOM操作。

2. 入门程序

在创建vue对象时，有几个常用的属性：

el: 用来指定哪些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data: 用来定义数据模型
methods: 用来定义函数。这个我们在后面就会用到

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title>//编写<script>标签来引入vue.js文件<script src="js/vue.js"></script>
</head>//在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的
<body><div id="app"><input type="text" v-model="message">{{message}}</div></body>
//js代码区域定义vue对象
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue"}})
</script>
</html>

浏览器打开效果如图所示：
在这里插入图片描述

3. Vue指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。
在vue中，通过大量的指令来实现数据绑定到视图的，如下表所示：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

3.1 v-bind和v-model

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定

（1）v-bind
为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
代码如下：

<body><div id="app">//值来自于vue对象的数据模型中的url变量<a v-bind:href="url">链接1</a>//v-bind指令是可以省略的，但是:不能省略<a :href="url">链接2</a><input type="text" ></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{url: "https://www.baidu.com"}})
</script>

效果如图所示：
在这里插入图片描述

注意：html属性前面有 : 表示采用的vue的属性绑定！

（2）v-model
在表单元素上创建双向数据绑定。

什么是双向：

vue对象的data属性中的数据变化，视图展示会一起变化
视图数据发生变化，vue对象的data属性中的数据也会随着变化。

<input type="text" v-model="url">

打开浏览器，我们修改表单项标签，发现vue对象data中的数据也发生了变化，如下图所示：
在这里插入图片描述
因为我们双向绑定，在视图发生变化时，同时vue的data中的数据模型也会随着变化。
双向绑定的作用：可以获取表单的数据的值，然后提交给服务器.

3.2 v-on

用来给html标签绑定事件的。

注意：

v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有on

例如：在js中，事件绑定demo函数

<input onclick="demo()">

vue中，事件绑定demo函数

<input v-on:click="demo()">

示例代码：

<body><div id="app">//给第一个按钮，通过v-on指令绑定单击事件<input type="button" value="点我一下" v-on:click="handle()">//v-on: 可以替换成@<input type="button" value="点我一下" @click="handle()"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},//在vue对象的methods属性中定义事件绑定时需要的handle()函数methods: {handle: function(){alert("你点我了一下...");}}})
</script>

3.3 v-if和v-show

指令	描述
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性

代码如下：

<body><div id="app">年龄<input type="text" v-model="age">经判定,为:<span v-if="age <= 35">年轻人(35及以下)</span><span v-else-if="age > 35 && age < 60">中年人(35-60)</span><span v-else>老年人(60及以上)</span><br><br><!-- v-show和v-if的作用效果是一样的，只是原理不一样 -->年龄<input type="text" v-model="age">经判定,为:<span v-show="age <= 35">年轻人(35及以下)</span><span v-show="age > 35 && age < 60">中年人(35-60)</span><span v-show="age >= 60">老年人(60及以上)</span></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{age: 20},methods: {}})
</script>

因为采用了双向绑定到age属性，所以可以通过表单输入框来改变age的值。
打开浏览器，展示效果如下所示：
在这里插入图片描述
浏览器呈现的效果是一样的，但是浏览器中html源码不一样。
v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

3.4 v-for

列表渲染，遍历容器的元素或者对象的属性。其语法格式如下：

//不需要索引
<标签 v-for="变量名 in 集合模型数据">{{变量名}}
</标签>
//需要使用索引
<标签 v-for="(变量名,索引变量) in 集合模型数据"><!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->{{索引变量 + 1}} {{变量名}}
</标签>

注意：
需要循环那个标签，v-for 指令就写在那个标签上。

代码演示：

<body><div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>

浏览器打开，呈现如下效果：
在这里插入图片描述

3.5 事件驱动

（1）字符串顺序反转
HTML代码

<div id="app"><p>{{message}}</p><!-- v-on:事件类型="事件响应函数的函数名" --><button v-on:click="reverseMessage">Click me,reverse message</button></div>

Vue代码

var app = new Vue({"el":"#app","data":{"message":"Hello Vue!"				},"methods":{"reverseMessage":function(){this.message = this.message.split("").reverse().join("");}}
});

（2）获取鼠标移动时的坐标信息
HTML代码

<div id="app"><div id="area" v-on:mousemove="recordPosition"></div><p id="showPosition">{{position}}</p></div>

Vue代码

var app = new Vue({"el":"#app","data":{"position":"暂时没有获取到鼠标的位置信息"},"methods":{"recordPosition":function(event){this.position = event.clientX + " " + event.clientY;}}
});

3.6 侦听属性

侦听就是对message属性进行监控。例如：
当firstName或lastName属性的值发生变化时，调用准备好的函数。
1、提出需求

<div id="app"><p>尊姓：{{firstName}}</p><p>大名：{{lastName}}</p>尊姓：<input type="text" v-model="firstName" /><br/>大名：<input type="text" v-model="lastName" /><br/><p>全名：{{fullName}}</p></div>

2、Vue代码
在watch属性中声明对firstName和lastName属性进行侦听的函数：

var app = new Vue({"el":"#app","data":{"firstName":"jim","lastName":"green","fullName":"jim green"},"watch":{"firstName":function(inputValue){this.fullName = inputValue + " " + this.lastName;},"lastName":function(inputValue){this.fullName = this.firstName + " " + inputValue;}}
});

4. 生命周期

vue对象从创建到销毁的过程。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：
在这里插入图片描述

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。【一般用于页面初始化自动的ajax请求后台数据】。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<!-- 编写mounted声明周期的钩子函数，与methods同级 -->
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script></html>

浏览器打开，运行结果如下：
在这里插入图片描述

这时页面加载完成，vue对象创建并且完成了挂在，自动触发mounted所绑定的钩子函数，然后自动执行弹框。