Vue学习之从入门到神经(两万字收藏篇)

• 5.3.Post请求

• 5.4.跨域请求

• 六、VueJs Ajax

• • 6.1.vue-resource

• 6.2.axios

• • 6.2.1.引入axios

• 6.2.2.get请求

• 6.2.3.post请求

• 七、综合案例

• • 7.1.需求

• 7.2. 数据库设计与表结构

• 7.3.服务器端

• • 7.3.1.配置文件

• 7.3.2.Controller

• 7.3.3.Dao

• 7.4.客户端

• • 7.4.1.user.html页面

• 7.4.2.user.js

---

前言

==============================================================

概述：Vue是一款前端渐进式框架，可以提高前端开发效率。

特点：

​ Vue通过MVVM模式,能够实现视图与模型的双向绑定。

​ 简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

Vue.js三种安装方式

========================================================================

此处引荐下大佬的文章 讲的非常详细

Vue.js三种方式安装

一、 Vue导入

====================================================================

概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

语法：

案例

用户名:

您输入的用户名是: {{name}}

二、Vue基本语法

=====================================================================

1.钩子函数

---

**概述：**钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

语法：

补充：Vue声明周期和钩子函数

（1）什么是vue生命周期?

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

（2）vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段?

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

（4）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

（6）简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在此阶段加loading事件，在加载实例时触发；

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

mounted : 挂载元素，获取到DOM节点；

updated : 如果对数据统一处理，在这里写上相应函数；

beforeDestroy : 可以做一个确认停止事件的确认框；

nextTick : 更新数据后立即操作dom；

2. 插值表达式

---

**概述：**插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

案例：

欢迎来到-->{{ name }}

3.显示数据(v-text和v-html)

---

概述：

​ v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

​ 当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

​ 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

语法：

v-text：

v-html：

区别：

v-text：把数据当作纯文本显示.

v-html：遇到html标签,会正常解析

4.数据双向绑定数据(v-model)

---

概述：

​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

1. 双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等

2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型

3. 单个复选框, 绑定的是boolean类型

4. 多个复选框, 绑定的是数组

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

4.1.绑定文本框

代码:

用户名:

效果:

4.2.绑定单个复选框

代码:

同意

效果:

4.3.绑定多个复选框

代码:

Java

Python

Swift

效果:

4.4.form表单数据提交

例子:传json格式跟formData格式的两种情况

<span class=“but” @click=“onSubmit()”>提交

5.事件处理(v-on)

---

5.1.事件绑定(v-on)

概述：

​ Vue中也可以给页面元素绑定事件.

语法：

<button v-on:事件名=“函数名/vue表达式”>点我

<button @事件名=“函数名/vue表达式”>点我

注意：

​ Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

案例：

<button @click=“show”>点我

5.2.事件修饰符

**概述：**事件修饰符主要对事件的发生范围进行限定

语法：

<button @事件名.事件修饰符=“函数名/vue表达式”>点我

分类：

.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件

.prevent ：阻止默认事件发生

.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行

.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

.once ：只执行一次

案例：

<button @click=“show”>点我

6.循环遍历(v-for)

---

6.1.遍历数组

语法：

v-for=“item in items”

v-for=“(item,index) in items”

items：要迭代的数组

item：存储数组元素的变量名

index：迭代到的当前元素索引，从0开始。

代码：

• {{index}}–{{user.name}}–{{user.age}}–{{user.gender}}

  6.2.遍历对象

  语法：

  v-for=“value in object”

  v-for=“(value,key) in object”

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

  value，对象的值

  key， 对象的键

  index, 索引，从0开始

  代码：

• {{index}}–{{key}}–{{value}}

  6.3.key

  概述：

  ​ :key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.

  案例:

  <button @click=“add”>添加

• {{name}}

  效果:

  

  解决方案:

  <button @click=“add”>添加

• {{name}}

  7.判断语法(v-if和v-show)

  ---

  概述：

  v-if与v-show可以根据条件的结果,来决定是否显示指定内容.

  ​ v-if: 条件不满足时, 元素不会存在.

  ​ v-show: 条件不满足时, 元素不会显示(但仍然存在).

  案例：

  <button @click=“show = !show”>点我

  Hello v-if.

  Hello v-show.

  8.显示数据(v-bind)

  ---

  概述：

  v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值

  语法：

  <标签名 v-bind:标签属性名=“vue实例中的数据属性名”/>

  <标签名 :标签属性名=“vue实例中的数据属性名”/>

  案例：

  9.Vue页面跳转(两种方法)

  ---

  9.1.方法一(标签实现)

  <router-link :to=“{name: ‘bookshelf’, params: { entityId: this.entityId } }”

  :class=“{‘flex-item-1’:‘flex-item-1’,cur:tabs[0].isShow}” href=“javascript:”>

  书 架

  9.1.方法二(this.$router.push()实现)

  当this.$router.push()只有一个参数时 默认为跳转地址 最多可传两个参数 第二个参数为地址参数

  <a @click=“toIndex” :class=“{‘flex-item-1’:‘flex-item-1’,cur:tabs[2].isShow}” href=“javascript:”>

  首 页

  toIndex: function(){

  this.$router.push(“/?entityId=”+ localStorage.getItem(“entityId”));

  }

  三、Vue其他语法

  =====================================================================

  3.1.计算属性

  ---

  概述：计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.

  语法：

  var app = new Vue({

  el:“#app”,

  //计算属性必须放在Vue的computed中

  computed:{

  //定义计算属性

  属性名(){

  return “返回值”;

  }

  }

  });

  案例：

  {{birth}}

  3.2.watch监控

  ---

  概述：

  ​ watch可以监听简单属性值及其对象中属性值的变化.

  ​ watch类似于onchange事件,可以在属性值修改的时候,执行某些操作.

  语法：

  var app = new Vue({

  el:“#app”,

  data:{

  message:“白大锅”,

  person:{“name”:“heima”, “age”:13}

  },

  //watch监听

  watch:{

  //监听message属性值,newValue代表新值,oldValue代表旧值

  message(newValue, oldValue){

  console.log(“新值：” + newValue + “；旧值：” + oldValue);

  },

  //监控person对象的值,对象的监控只能获取新值

  person: {

  //开启深度监控；监控对象中的属性值变化

  deep: true,

  //获取到对象的最新属性数据(obj代表新对象)

  handler(obj){

  console.log("name = " + obj.name + “; age=” + obj.age);

  }

  }

  }

  });

  四、Vue组件

  ===================================================================

  4.1.基本使用

  ---

  概述：

  组件, 类似于模版, 模块. 在项目需要重用某个模块（头部、尾部、新闻。。。）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。

  案例：

  注意:

  1. 组件的模版中, 只能书写一个跟标签

  2. 组件的定义必须放在Vue创建对象之前, 否则报错

  4.2.父组件向子组件通信

  ---

  概述：

  子组件无法直接使用父组件中的数据, 如果需要使用, 则必须由父组件把数据传递给子组件才可以.

  本质: 让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递

  意义：

  可以把父组件中的数据, 更新传递到子组件

  示例：

  4.3.子组件向父组件通信

  ---

  下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

  

  进阶阶段

  进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

  JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

  我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

  然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

  1、JavaScript 和 ES6

  在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

  

  2、前端框架

  前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  以 Vue 为例，我整理了如下的面试题。