您的位置:首页 - 文章 - Vue - 正文

1.VUE进阶笔记梳理-VUE语法

一.前后端分离

既然我们在开发中使用前后端分离模式,也就是前端拿到后端的数据时怎么处理,怎么输出都有前端自己来实现,这样就需要写大量的js代码,而为了简化js的代码,就衍生出了很多的框架,比如jquery,Angular,Vue,React等。

二 Vue.js介绍

1.什么是Vue.js

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

2.Vue的特点

2.1 响应式编程

​ 当数据发生改变时,自动更新视图。

2.2 组件化

​ UI页面映射出一个组件树 ​ 组件可重用,可维护性好。

3.Vue的优势

​ vue是轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快。

​ 而且vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

4.Vue的响应式原理(MVVM)

​ Vue有一个重要特点是当数据发生变化时,可以自动更新视图,那这个是怎么实现的。这是因为Vue采用了MVVM架构模式。那什么是MVVM呢。

4.1MVC和MVVM结构对比

​ MVC模式结构图

MVVM模式结构图

可以看到MVVM是一个MVC的增强版,正式连接了视图和模型,将表示逻辑从Controller移出放到一个新的对象里,即ViewModel。它实现了View和Model的自动同步,即当Model的属性改变时,我们不用再自己手动操作Dom元素来改变View的显示,而是改变属性后该属性对应的View层显示会自动改变。

4.2 MVVM的组成部分

1.View

View 是视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建,为了更方便地展现 ViewModel 或者 Model 层的数据,已经产生了各种各样的前后端模板语言,比如 FreeMarker、Thymeleaf 等等,各大 MVVM 框架如 Vue.js,AngularJS,EJS 等也都有自己用来构建用户界面的内置模板语言。

2.Model

Model 是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则

3.ViewModel

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的.

视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定,ViewModel 的内容会实时展现在 View 层,这是激动人心的,因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。

MVVM 框架已经把最脏最累的一块做好了,我们开发者只需要处理和维护 ViewModel,更新数据视图就会自动得到相应更新,真正实现 事件驱动编程。

View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。

三 Vue.js基础语法

1 下载

​ 方式1:

​ Vue官网下载:https://cn.vuejs.org/v2/guide/installation.html

 

2 第一个入门程序

​ 开发Vue的工具很多,这里我们先使用之前讲解web前端时使用的工具Hbuilder

​ Vue.js 的核心是实现了 MVVM 模式,它扮演的角色就是 ViewModel 层,那么我们的第一个应用程序就是展示她的 数据绑定 功能,操作流程如下:

2.1 在Hbuilder中创建一个web项目

​ 

创建出来的项目结构如下:

2.2 导入Vue.js

2.3 创建一个Vue实例 ,并将数据绑定到div中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="d1">
{{message}}
</div>
<script type="text/javascript">
var v=new Vue({
el:'#d1', //注意 这里el里面的是字符l 不是数字1 d1是上面div的id号
data:{
message:'Hello Daimenglaoshi' //初始数据
}
})
</script>
</body>
</html>

 

说明

new Vue:创建vue对象,里面的el和data是属性。
el:'#d1':绑定元素的 ID;
data:{message:'Hello Daimenglaoshi!'}:数据对象中有一个名为 `message` 的属性,并设置了初始值
{{message}}:在绑定的元素中使用 双花括号 将Vue创建的名为 message 属性包裹起来,即可实现数据绑定功能。不需要自己写js赋值。

2.4 运行测试

2.5 测试Vue的自动更新功能

​ Vue可以做到当数据发生改变时,自动更新视图

说明:

在之前的代码中,我们创建了一个名为 v 的 Vue 实例. var v=new Vue({ el:'#d1', data:{ message:'Hello Daimenglaoshi' }}) 此时就可以在控制台直接输入 v.message 来修改值,中间是可以省略 data 的,在这个操作中,我们并没有主动操作 DOM,就让页面的内容发生了变化,这就是借助了Vue的数据绑定功能实现的;MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定,以做到数据与视图的快速响应。

3.Vue实例的生命周期

3.1 什么是Vue实例的生命周期

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。

在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

3.3 什么是生命周期钩子

生命周期钩子:就是生命周期事件的别名。生命周期钩子又叫生命周期函数 也叫生命周期事件。

3.4 生命周期钩子函数有哪些

创建期间的生命周期函数:

beforeCreate

实例刚在内存中被创建出来,此时,还没有初始化好 data和methods属性。

触发时机:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经在内存中创建完成。此时data和methods已经在内存中创建完成,但是还没有开始编译模板。

触发时机:实例已经创建完成之后被调用。

beforeMount

此时已经完成了模板的编译,但是还没有挂载到页面中显示。

触发时机:挂载开始之前被调用

mounted

此时,已经将编译好的模板,挂载到了页面指定的容器中显示。

触发时机:挂载到实例之后调用

运行期间的生命周期函数:

beforeUpdate

此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点。

触发时机:状态更新之前调用

updated

此时 data 中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

触发时机:实例更新完毕之后将会调用此函数

销毁期间的生命周期函数:

beforeDestroy

在这一步,实例仍然完全可用。

触发时机:实例销毁之前调用

destroyed

调用之后Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

触发时机:Vue 实例销毁后调用,组件销毁有很多种情况,比如页面关闭,页面跳转。

3.5 测试生命周期

创建一个测试页面,写入需要测试的钩子函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script>
var v = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el));
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>

 

页面运行以后,按F12,查看Console里的信息:

在Console中修改message的值:

关闭页面,会调用对应的销毁函数。

 

4.Vue内部指令

4.1 v-bind

v-bind 属性绑定

<a v-bind:href="url">百度</a>
<input type="text" v-bind:value="msg" />

说明:

v-bind

后面是 :属性名=,"url"是找到data里面的属性url
当我们在控制台改变url和value时,对应值也会变化。类似的,我们还可以绑定其它属性,如src属性、class属性等

v-bind也可以简化为:

<a :href="url">百度</a>
<input type="text" :value="msg" />

4.2 v-text和 v-html

v-text用来输出双标签里的内容,内容中有标签,标签按原样显示

v-html也是用来输出双标签里的内容,内容中有标签,会解析标签

4.3 v-if,v-else-if,v-else

<div v-if="num>100">库存充足</div>
<div v-else-if="num>0">库存紧张</div>
<div v-else>缺货中</div>

4.4 v-for

<a href="#" v-for="item in list">{{item}}</a>

<p href="#" v-for="(item,index) in list">{{index}}-------{{item}}</p>

item用来循环数值,index用来循环下标
2.for循环对象数组

<tr v-for="user in userList">

<td>{{user.id}}</td>

<td>{{user.name}}</td>

</tr>

 

5.Vue数据双向绑定

5.1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。

5.2 怎么实现双向数据绑定

v-model

v-model 指令可以在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

<input type="text" v-model="msg" />

6.Vue事件绑定

v-on

v-on:事件名 = “方法名”
简写方式: @事件名 = “方法名”
事件名有哪些: click|keydown|keyup|mouseover|mouseout|自定义事件名

8.Template 标签

template的作用是模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上

如果不想多一个标签,可以用template,template不会渲染到页面上

<template v-for="value in user">
<div>{{value}}</div>
<span>{{value}}</span>
</template>

9.Vue组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

9.1全局组件

<div id="app">
<mycomponent></mycomponent>
</div>
<script>
//注册组件
Vue.component("mycomponent",{
template:'<li>这里是组件的内容</li>'
});
var v= new Vue({
el:"#app",
});
</script>

 

9.2 如何在其它html页面访问vue组件

1.将组件内容写入一个vue页面中

welcome.vue

2.在html页面中导入vue组件并使用

因为html中不能直接使用vue页面的内容,需要用到插件http-vue-loader。

下载http-vue-loader.js文件 或者在线调用:

<script src="https://unpkg.com/http-vue-loader"></script>

9.3 局部组件

一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。

因此,对于一些并不频繁使用的组件,我们会采用局部注册。

案例代码:

<div id="app">
<welcome></welcome>
</div>
<script>
var msg = {
template: "<div>您好,{{name}}</div>",
data() {
return {
name: "西决"
}
}
}
//该组件只在本Vue实例中使用 var v=new Vue({ el:"#app", components:{ welcome:msg } })
</script>

9.4 父子组件

组件可以嵌套,父组件中可以套入一个子组件

测试代码:

<div id="app">
<father></father>
</div>
<script>
//注册父组件
Vue.component("father", {
template: "<div style='background-color:red'><p>我是一个父组件</p><son></son></div>",
//父组件中添加子组件
components: {
son: {
template: "<span style='background-color:yellow'>我是一个子组件</span>"
}
}
}) var v = new Vue({
el: "#app"
})
</script>

格式:props:['value'] data里面的数据会传递到组件里的props属性

<div id="app">
<!-- 改变文本框的值,组件中的值也会变 --> <input type="text" v-model="item" />
<mydiv v-html="item"></mydiv>
</div>
<script>
Vue.component("mydiv", {
props: ['value'],
template: '<li>{{value}}</li>'
});
var app = new Vue({
el: "#app",
data: {
item: '西决'
}
});
</script>

10.Watch 选项
vue的选项很多,除了前面用到的el,data,methods等,还有其它的。比如Watch

数据变化的监控经常使用,例如天气预报的穿衣指数,它主要是根据温度来进行提示的。温度大于25度时,我们建议穿T恤短袖,温度小于25度大于0度时,我们建议穿毛衣外套,温度小于0度时我们建议穿棉衣羽绒服。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body> 输入温度,显示穿衣指数 <div id="app">
<p>温度:{{temperature}}</p>
<p>穿衣建议:{{advise}}</p> 输入温度:<input type="text" v-model="temperature" />
</div>
<script>
var v = new Vue({
el: "#app",
data: {
temperature: "",
advise: ""
}, //监控温度的变化
watch: {
temperature: function(newVal, oldVal) {
if (newVal > 25) {
this.advise = "建议穿T恤短袖";
} else if (newVal >= 0 && newVal <= 25) {
this.advise = "建议穿毛衣外套";
} else {
this.advise = "建议穿棉服羽绒服";
}
}
}
})
</script>
</body>
</html>

四.Axios异步通信

1 什么是Axios?

Axios是一个类库,基于Promise管理的HTTP 库,是前端通信框架,可以用在浏览器和 node.js 中。axios实现了对ajax的封装,常用于Ajax请求。

注解:promise是Java Script的一个对象,代表了未来将要发生的事件,用来传递异步操作的消息。

2 Axios和Ajax的关系

Axios是AJAX技术的一种实现,就像Jquery中的$.ajax也是AJAX技术的一种实现。

Axios是通过Promise实现XHR封装,其中Promise是控制手段,XHR是实际发送Http请求的客户端。

Jquery中的$.ajax是通过callback+XHR实现(XHR就是XmlHttpRequest对象)

再通俗一点讲:AJAX是汽车,Axios是奥迪,$.ajax是奔驰

3 为什么要用Axios?

因为vue的边界很明确,就是为了处理DOM,所以并不具备通信功能,为了解决通信问题,作者单独开发了一个名为 vue-resource 的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架,此时就需要额外使用一个通信框架与服务器交互。

功能就像jQuery提供的AJAX通信功能。

4 Axios的API

axios({ method: 'get', url: '/user/12345', data: { id:1, name:'aa' }
});
axios.get('url'[,'参数']).then(resp=>(this.user=resp.data));
axios.post('url'[,'参数']).then(resp=>(this.user=resp.data));
axios.put('url'[,'参数']).then(resp=>(this.user=resp.data));
axios.delete('url'[,'参数']).then(resp=>(this.user=resp.data));

5 Axios的使用

​ axios提供了多种请求方式,比如直接发起get或post请求:

5.1.get请求

axios.get('user.json').then(resp=>(console.log(resp.data)));// 为给定 ID 的 user 创建请求
axios.get('/user?id=1')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 可选地,上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

5.2.post请求

axios.post("http://localhost:8080/users","uname="+this.uname+"&upwd="+this.upwd).then(function(response) { console.log(response); })

 

未完待续..........

本文原创,作者:西决,其版权均为品创网络所有。如需转载,请注明出处:https://www.sxpcwlkj.com/vuecli01/

发表评论