【Vue 2.x】学习vue之一基础部分

文章目录

Vue 一基础部分
- 第一章
- - 1、git
  - - 两个分支
    - - 主分支
      - 子分支
    - 使用方法
    - - 方式1：采用命令的方式操作分支
      - 方式2：在idea中使用git的分支
    - 向git远程仓库提交时忽略文件
    - 使用git时的一些冲突
    - 注意事项
  - 2、Vue
  - - 问题1：什么是Vue？
    - 问题2：目前常用的vue版本
    - 问题3：如何使用vue？
    - 问题4：开发vue使用什么工具呢？
  - 3、vue基础演示
- 第二章
- - 1、vue的模板语法
  - - 1、插值表达式
    - 2、模板指令
    - 3、事件修饰符
    - 4、v-model
    - 5、关联类样式
    - - 情况1：直接设置类样式
      - 情况2：动态设置内样式
      - 情况3：动态设置样式的简化写法
      - 情况4：根据条件动态加载样式
      - 情况5：根据条件动态加载样式2
    - 6、设置内联样式（行内样式）
    - - 用法1:直接设置内联样式
      - 用法2：动态设置内联样式
    - 7、v-for循环指令（列表指令）
    - - 1、通过下标取值
      - 2、用v-for对数组遍历
      - 3、用v-for遍历对象
      - 4、对一个数值进行遍历
      - 5、遍历对象中的属性
    - 8、条件渲染
    - 9、v-if与v-else
- 第三章
- - - 10、计算属性 computed
    - - **不带参数的计算属性**
      - **带参数的计算属性**
      - **计算属性实现计算器**
  - 11、过滤器
  - - - 1、全局过滤器
      - 2、局部过滤器
  - 12、vue中的指令分类
  - - 1、全局自定义指令
    - - 钩子函数
    - 2、局部指令
- 第四章
- - watch属性
  - - - 函数、计算属性、侦听属性的使用时机
  - vue的生命周期
  - - 钩子函数
    - ![Vue 实例生命周期](https://img-blog.csdnimg.cn/img_convert/be1666239ebaa2ea3ec0488c431fc9a9.png)重点关注的钩子函数
  - vue发送ajax请求与后台交互
  - - 1、vue-resurce发送请求
    - 2、采用jquery发送请求
    - 3、axios发送ajax请求
    - - **语法1**
      - 语法2

Vue 一基础部分

这是v2版

数组四种操作

unshift  ------头部添加
shift-----------删除头部
push----------尾部添加
prop----尾部

手动报错

throw new Error("给钱")；//会中断下面的程序运行
console.log("123");//不会运行

//这种方法不会运行后面的程序
try{throw new Error("给钱")；
}catch（err）{console.log("123");//不会运行
}finally{//不管是否错误都执行
}

第一章

1、git

git使用方式：1、通过命令的方式操作git2、通过idea操作git（使用更多）git中分支的概念：git中存在一个分支，分支可以分为：主分支与子分支主分支只有一个：master子分支：也称‘开发分支’

两个分支

主分支

主要作用：1、向git服务器推送代码2、将子分支的代码合并到主分支
//一般不会直接在主分支上进行开发

子分支

主要作用：1、子分支一般执行具体的开发操作

使用方法

方式1：采用命令的方式操作分支

合并分支（要合并分支，必须切换到主分支下才能进行合并）git merge 分支名称git merge aj//合并分支后，当前子分支下的代码，都会合并到主分支中

1、查看当前git版本库中的分支（默认只有主分支）git branch2、创建子分支（开发分支）git branch 子分支名称git branch  aj//注意：在主分支下创建子分支时，当前主分支中有哪些文件，子分支也会包含这些文件3、切换到子分支git checkout 分子名称git checkout aj4、在子分支进行开发5、在子分支下开发的代码，在代码没有提交到本地git版本库之前，子分支与主分支都可以看到这些代码，一旦子分支开发的代码提交到git库中，子分支下开发的代码只有子分支能看见，主分支无法看到这些代码切换到主分支git branch  master6、切换到子分支进行提交git add .git commit -m "子分支新增了two.txt文件"

方式2：在idea中使用git的分支

注意：向远程服务器推送文件之前，要先更新一下

向git远程仓库提交时忽略文件

我们在项目提交时，有些文件不需要提交到远程服务器中，因为其他用户用不到这些文件//此时我们就可以使用git的文件忽略，忽略的文件git就不会提交到仓库中

如果是红色，表示系统检查到当前文件未被提交，我们希望系统不要检测该文件的状态，也不用提交改文件，忽略该文件即可

使用git时的一些冲突

如果多个开发者修改了同一个文件中的同一行代码，就会发生冲突

注意事项

1、大家第一次用git不太熟悉，建议项目每天在本地备份一份2、建议一个给你完成后，及时提交，提交越早，冲突少一些3、使用git向服务器提交时，一定要确保功能是正确再提交

2、Vue

问题1：什么是Vue？

Vue (读音 /vjuː/，类似于 view)中文官网(cn.vuejs.org)是一套用于构建用户界面的渐进式框架。与
其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上
手，还便于与第三方库或既有项目整合。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效
地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

渐进式：

用哪些功能就掌握它对应的知识点即可，不论基本功如何，都可以根据自己的需求使用vue

Vue的特点：

1. 采用组件化模式，提高代码复用率，且让代码更好维护
2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率

问题2：目前常用的vue版本

1、vue2.x-----目前阶段我们使用2.x
2、vue3.x-----后期我们再学习3.x

英文官网: https://vuejs.org
中文官网: https://cn.vuejs.org
vue2的文档地址：https://v2.cn.vuejs.org/

问题3：如何使用vue？

首先要安装vue1、直接引入vue.js文件（第一部分我们采用该方式）2、使用vue的脚手架安装（后期我们采用这种方式）3、npm

问题4：开发vue使用什么工具呢？

idea，vscode都可以编写vue代码，我们可以使用vscode来编写

3、vue基础演示

<!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>
</head>
<body><div id="app"><!-- 它用于作为vue的容器，用于显示内容，vue操作的所有内推都必须包含早vue容器中 --><!-- {{xxx}}这种是插值表达式，它可以把数据模型data中的数据，插入到vue容器中的指定部分 -->{{msg}}</div><script src="js/vue.js"></script><script>//创建vue实例对象，对vue的所有操作都要通过实例对象完成var vm=new Vue({el:"#app",//指定的vue容器id名称data:{//用于声明数据模型，此处声明的数据可以在vue容器展示msg:"这是我的第一个vue程序",}})</script>
</body>
</html>

第二章

1、vue的模板语法

模板语法可分为两大类：

1、插值表达式

    功能：用于解析标签体内容（标签体内容是在两个标签之间的内容）写法：{{js表达式}}，可以直接读取到data中的所有属性示例：{{属性名}}使用方式：1、在插件表达式中，可以直接获得属性值进行显示{{msg}}2、可以用属性的方法进行显示	{{msg.toUpperCase()}}//转换成大写显示3、可以直接计算表达式 {{1+2}}

太牛了

2、模板指令

    功能：用于解析标签(包括：标签属性、标签体内容、绑定事件......)举例：1、v-bind作用：用于给标签中的属性动态绑定值用法：<标签 v-bind:属性名='data中的属性名称'>示例：<input type="button" v-bind:value="btn"></input>data{btn:"按钮"}v-bind的语法糖（简化写法）用法：<标签 :属性名='data中的属性名称'>2、v-on作用：用于动态关联事件语法：<标签 v-on:事件名="函数名">示例：<input type="button" value="动态关联事件" v-on:click="one">//带参数的使用<input type="button" :value="btn4" v-on:click="test(1)" >注意：1、v-on绑定事件时，事件名称前的on要去掉2、如果用的函数有参数，函数名称后面必须要写(),并且在()中传递对应的参数3、如果调用的函数没有参数，函数名称后面的()写不写都可以v-bind的语法糖（简化写法）用法：<标签 @事件名='函数名'><input type="button" :value="btn5" @click="show" >

3、事件修饰符

作用：在进行关联事件时，我们可以使用一组事件修饰符1、stop：作用：用于阻止事件冒泡事件冒泡：它是指触发内层组件的事件以后，系统会自动触发外部组件的事件阻止冒泡：触发内层组件事件后，外层事件不触发语法：<标签 @事件名.stop='函数名'><input type="button" :value="btn5" @click.stop="show" >

2、prevent:作用：用于阻止事件的默认事件<a href="http://www.baidu.com" @click="one">百度</a> 当点击该超链接后，会先执行点击事件，之后会默认跳转到百度网站，如果希望触发了点击事件之后不要跳转，则采用prevent阻止跳转语法：<标签 @事件名.prevent='函数名'><a href="https://www.baidu.com" @click.prevent="show">百度</a>此时，点击超链接触发事件之后并不会跳转应用场景：<a href="#" @click.prevent="xx">删除</a>

4、v-model

	作用：用于进行双向数据绑定特点：如果改变了数据模型中的数据，视图组件中的数据也会自动改变语法：<input type="text" v-model="msg"><input type="text" v-model="num1">注意：v-model双向关联，只能用于form表单中的输入控件例如： text,password,select,radio,checkbok...

简易计算器

		 
问题1：在methods的函数中，如何获得输入控件的值？答：输入控件通过v-model与数据模型中的属性进行了双向关联，只要取到数据模型中的属性，即为输入控件的内容在函数中，要获得当前数据模型中的属性值，需要通过this.属性进行获得this:它表示当前vue实例this.msg:获得msg的值

5、关联类样式

情况1：直接设置类样式

		<div class="one two">直接设置类样式</div>

情况2：动态设置内样式

        <div v-bind:class="['one','two']">动态设置内样式的数据</div>/*注意：如果直接设置内样式，设置的样式无法改变，如果是动态设置的类样式，类样式可以根据条件动态加载*/

情况3：动态设置样式的简化写法

        <div :class="['one','two']">简化写法</div>

情况4：根据条件动态加载样式

	<div :class="[flag ? 'one' : '']">根据条件显示内样式（三元运算符判断）</div>
/*此代码表示，如果flag的值为true，就应用one这个类样式，否则就不加
*/

情况5：根据条件动态加载样式2

 <div :class="{'one':flag,'two':flag}">（采用json格式判断）</div>
/*此代码表示，如果flag的值为true，就显示one这个样式
*/

6、设置内联样式（行内样式）

用法1:直接设置内联样式

        <div style="color: green;;font-size: 25px;">1、直接设置</div>

用法2：动态设置内联样式

  <div v-bind:style="{'color':'blue','font-size':'25px'}">2、动态设置</div>/*注意：	  1、要动态设置内联样式，样式规则必须写在{}中2、如果样式名称是一个单词构成，中间没有-，样式名称的两边‘’可以写也可以不写3、如果样式名称中间有-，样式名称的两边‘’必须要写4、样式值的两边，必须要有''
*/

7、v-for循环指令（列表指令）

v-for可以对数组遍历，生成列表，但是要注意，一般我们在使用v-for时，需要指定v-bind:key='唯一标识'语法糖：:key='唯一标识'因为，在vfor循环时，记录哪一条数据被选中，它记录的是被选中的数据下标，如果向数组的头部添加数据，会导致下标发生改变，这样会导致数据错误被选中解决：在循环时，给每一条数据指定一个唯一标识，记录哪条数据被选中时，是通过这个唯一标识进行判断<tr v-for="(item,indx) in stulist" align="center" :key="item.id"><td><input type="checkbox" name="" id=""></td><td>{{item.name}}</td><td>{{item.score}}</td></tr>

1、通过下标取值

		{{list[0]}}{{list[1]}}{{list[2]}}

2、用v-for对数组遍历

    <li v-for="item in list">{{item}}</li>/*list：表示一个数组item：表示从数组中遍历出来的每一个对象（变量名任意）*/

     <li v-for="(k,index) in list">值：{{k}}---下标：{{index}}</li>    /*list：表示一个数组k：表示从数组中遍历出来的每一个对象（变量名任意）inex:表示当前对象在数组中的下标（变量名任意）()可以写，也可以不写
*/

3、用v-for遍历对象

            <tr v-for="stu in stulist" align="center"><td>{{stu.id}}</td><td>{{stu.name}}</td><td>{{stu.score}}</td></tr>------------------------------------------------------------data: {//用于声明数据模型，此处声明的数据可以在vue容器展示stulist: [//定义一个对象数组{ id: 1, name: 'zs', score: 90 },{ id: 2, name: 'aj', score: 95 },{ id: 3, name: 'ww', score: 80 },{ id: 4, name: 'sd', score: 65 },]},

4、对一个数值进行遍历

        <h4>对数值遍历</h4>年龄：<select @change="pop" v-model="myage"><option value="-1">请选择</option><option v-for="age in 120" :value="age">{{age}}岁</option></select>
/*v-for="age in 120"：表示在页面中生成循环结构，从1开始，循环到120结束，把生成的每						   一个值赋值给变量age:value="age"：表示将当前age的值，赋值当前标签value属性
*/

5、遍历对象中的属性

<h4>遍历对象的属性</h4><div v-for="(value,key,index) in stu">键：{{key}}--值：{{value}}----下标：{{index}}</div>----------------------------------------data:{stu:{//定义一个对象id: 1, name: 'aj', score: 90},}

练习

定义一个动态数据<h4>练习（动态添加数据）</h4><div algin="center"><input type="text" placeholder="编号" name="" v-model="id"><input type="text" placeholder="姓名" name="" v-model="name"><input type="text" placeholder="成绩" name="" v-model="score"><input type="button" value="添加" @click="add"></div><table align="center" border="1" width="60%"><tr><th>编号</th><th>姓名</th><th>成绩</th></tr><tr v-for="(item,indx) in stulist" align="center" :key='item.id'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.score}}</td></tr></table>
---------------------------------------
data: {//用于声明数据模型，此处声明的数据可以在vue容器展示stulist: [//定义一个对象数组{ id: 1, name: 'zs', score: 90 },{ id: 2, name: 'aj', score: 95 },{ id: 3, name: 'ww', score: 80 },{ id: 4, name: 'sd', score: 65 },],id:"",name:"",score:"",},methods: {//编写vue中的各种函数，用于触发响应事件add(){//添加学生//组装对象let stu={id:this.id,name:this.name,score:this.score};//将数组添加到数组的尾部this.stulist.push(stu);//情况数据this.id="";this.name="";this.score="";}}

<h4>练习（动态添加数据）2</h4><div algin="center"><input type="text" placeholder="编号" name="" v-model="stu2.id"><input type="text" placeholder="姓名" name="" v-model="stu2.name"><input type="text" placeholder="成绩" name="" v-model="stu2.score"><input type="button" value="添加" @click="add2"></div><table align="center" border="1" width="60%"><tr><th>编号</th><th>姓名</th><th>成绩</th></tr><tr v-for="(item,indx) in stulist" align="center"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.score}}</td></tr></table>
------------------------------------------------stu2:{//定义一个对象id: "", name: "", score: 90},add2(){//添加学生2/将数组添加到数组的尾部this.stulist.push(this.stu2);//情况数据this.stu2={id:"",name:"",score:""}}

8、条件渲染

v-if

v-show

共同点：条件满足就显示，条件不满足就不显示区别：v-if  条件满足时，就创建元素，条件不满足时就删除元素v-show 条件满足时，就显示元素，条件不满足时就隐藏元素如果我们要频繁的切换显示样式，推荐使用v-show（避免频繁创建）
如果元素偶尔使用，推荐v-if节省资源

        <h1>条件渲染</h1><div v-if="falg">这是v-if</div><div v-show="falg">这是v-show</div><input type="button" value="按钮" @click="changes">--------------------------------------
falg：truechanges(){this.falg=!this.falg;
}

9、v-if与v-else

        <h1>v-if与v-else</h1><input type="text" name=""placeholder="请输入成绩" id="" v-model="score" @change="scoreChange"><br>分数是：{{score}}<br><div v-if="score>=0"><div v-if="score>=60"><b style="color: green;">合格</b></div><div v-else><b style="color: red;">不合格</b></div></div>

第三章

v-for指令

v-if v-show

计算属性过滤器指令综合应用通过vue前后交互

10、计算属性 computed

作用：将函数当做属性使用，如果在函数中参与运行的数据有任意一个值发生改变，计算属性会重新自动计算特点：1、将函数当属性用2、只有值改变就会重新自动计算3、计算属性得到结果会进行缓存，当下一次再使用该数据时，它不会重新计算，而是获得之前的缓存结果，速度会更快

        <h1>计算属性</h1><input type="text" v-model="num1">
+<input type="text" v-model="num2">
=<input type="text" v-model="result">
--------------------------------------------
computed:{//计算属性，把函数当做属性用result(){//计算结果                  		               let  count=parseInt(this.num1)+parseInt(this.num2)return count;//返回结果}}

不带参数的计算属性

		computed:{计算属性的名称(){.....return 返回值;}}{{show}}
//直接引用即可，可以把函数当做属性调用
----------------------------------computed:{show(){return "hello,world";}}

带参数的计算属性

        <h4>调用带参数的计算属性</h4>￥{{showMoeny(moeny)}}
--------------------------------------------data{moeny:5500,},computed:{showMoeny(){//带参数return(moeny)=>{//传进来的参数return moeny.toFixed(2);//.后面加两个0}}}

计算属性实现计算器

        <input type="text" v-model="num1"><select v-model="op"><option value="+">+</option><option value="-">-</option><option value="*">X</option><option value="/">/</option></select><input type="text" v-model="num2">=<input type="text" v-model="jsuan" >
-------------------------------------------------
data{num1:"",num2:"",op:"+"
},
computed:{jsuan(){//计算器let value=0;switch (this.op) {case "+":value = parseInt(this.num1) + parseInt(this.num2)break;case "-":value = this.num1 - this.num2break;case "*":value = this.num1 * this.num2break;case "/":value = this.num1 / this.num2break;}     return value            }
}

11、过滤器

	作用：用于转换数据显示格式分类：1、全局过滤器特点：它是在vue实例外部声明2、局部过滤器特点：它是在vue实例内部声明

1、全局过滤器

        Vue.fiter(过滤器名称,function(参数){...;return xxx;})调用：{{要传递给过滤器的参数|过滤器名称}}示例：//创建全局过滤器（在vue之外创建）Vue.filter("showDate",function(time){//处理日期格式let date=new Date(time);//分别获得年月日let y=date.getFullYear();let m=(date.getMonth()+1).toString().padStart(2,'0');let d=date.getDate().toString().padStart(2,'0');return  `${y}年${m}月${d}日`;})  
----------------------------
data{t:new Date,//日期
}
-----------------------------
调用过滤器日期：{{t|showDate}}

2、局部过滤器

		const vm=new Vue({el:"#app",date:{height:175,},filters:{showHeight(height){return height.toFixed(2)+"cm";//小数点后面加2个0 }}})
---------------------------------
调用过滤器(一样用法)身高：{{height:showHeight}}

12、vue中的指令分类

第一类：系统指令（它是vue提供，所有v-开头的命令，都是指令）v-bindv-onv-modelv-elsev-show....第二类：自定义指令（它需要用户自己创建）1、全局自定义指令在vue实例外部创建2、局部自定义在vue实例的内部创建

1、全局自定义指令

全局指令的基本语法：Vue.directive("指令名称",{钩子函数:function(组件){...对组件进行相关操作}})

钩子函数

钩子函数就是指在vue生命周期中不同阶段，由系统调用的函数自定义指令的钩子函数： bind:只调用一次，指令第一次绑定元素时调用。在这里可以进行一次性的初始化设置这个钩子函数主要用于组件设置样式inserted：被绑定元素插入父节点时调用这个钩子函数主要给组件设置默认动作，例如：获取焦点

示例

      Vue.directive('fours', {//调用此指令，会获得焦点inserted: function (el) {el.focus();}});Vue.directive('color', {//调用此指令，颜色会变红bind: function (el) {el.style.color = 'red';}});
----------------------
调用：<input type="text" name="" v-fours v-color id="">//一加载就会自动获取焦点

2、局部指令

它需要在vue实例的内部声明const vm=new Vue({el:"#app",directive:{指令名：{钩子函数:function(组件){...对组件进行相关操作}}}})

示例

        var vm = new Vue({el: '#app',//指定的vue容器id名称data: {//用于声明数据模型，此处声明的数据可以在vue容器展示msg: 'hello,world'},directives: {//自定义指令ses: {bind: function (el) {el.style.height = '30px';}}}})
--------------------
调用：<input type="text" name="" v-ses id="">//调用此指令，高度设为30px

第四章

watch属性

用于监听某一个属性，当某一个属性发生改变时，可以获得改变之前的值

使用方法

            data:{msg: '',newmsg: '',oldmsg: ''},watch: {//监听msg(newData, oldData) {this.newmsg = newDatathis.oldmsg = oldData}}
-------------------------------------
调用
msg:input  @change="msg" type="text" name="" v-model="msg" id="">msg最新值： <input type="text" name="" v-model="newmsg" id="">
msg旧值：   <input type="text" name="" v-model="oldmsg" id="">

函数、计算属性、侦听属性的使用时机

多个值的改变影响一个值：使用计算属性
num1+num2=total();一个值的改变影响多个值：使用监听属性total(newVal, oldVal) {let total = newVal;let ary = [];for (let index = 0; index < total; index++) {let x = index,y = total - index;ary.push([x, y]);}let index = Math.floor(Math.random() * ary.length)this.num1 = ary[index][0]this.num2 = ary[index][1]}

vue的生命周期

钩子函数

钩子函数：它是指在vue生命周期中的不同阶段由系统自动调用的函数vue的生命周期：指vue实例从创建、初始化、加载数据、渲染数据、修改数据、销毁实例的一个完整过程
vue的钩子函数: 指在vue实例的不同阶段，系统会自动调用的函数,就称为：“vue生命周期中的钩子函数”
vue生命周期的钩子函数都是在不同阶段，由系统自动调用

1、创建vue实例2、初始化vue实例之前-----------beforeCreate()该函数是vue生命周期中的第1个钩子函数在此阶段：初始化操作还未完成，vue实例中的数据模型、函数、计算属性、watch监听都还没有加载到实例中，此阶段，数据模型的数据无法访问，函数无法调用，计算属性、watch监听都不能执行3、初始化vue实例之后-----------created()该函数是vue生命周期中的第2个钩子函数此执行阶段： 初始化操作已经完成，vue实例中的数据模型、函数、计算属性、watch都已经加载，并且都可以访问如果要发送ajax请求，最早可以在此钩子函数中，调用函数发送ajax请求4、数据渲染到页面之前-----------beforeMount()该函数是vue生命周期中的第3个钩子函数,它是在将数据模型中的数据渲染到页面之前执行在这个阶段，数据模型数据还没有渲染到页面，此时用{{msg}}显示数据模型中的数据时，插值表达式还不会解析，依然是显示为{{msg}}5、数据渲染到页面之后-----------mounted()此函数，是vue生命周期中的第4个钩子函数，在数据渲染之后执行此时页面上的 {{msg}}，将会渲染成对应的内容hello6、当修改数据时，数据模型中的数据更新了，但在页面组件的数据更新之前-----------beforeUpdate()此钩子函数是vue生命周期中的第5个钩子函数此钩子函数将会在数据模型的数据发生改变时执行，在这一段阶段数据模型的数据会改变，但是并不会将数据模型数据的改变反映到页面组件中,页面组中的显示的还是改变之前的旧数据此阶段：数据模型中的数据与页面显示的数据是不同步的7、修改数据时，数据模型中的数据更新了，页面组件上的数据也同步更新之后-----------updated()该函数会数据修改完成以后执行，在此阶段，数据模型中的数据与页面上的数据是同步的8、vue实例要销毁之前-----------beforeDestroy9、vue实例销毁之后-----------destroyed

重点关注的钩子函数

1、beforeCreate()---------初始化前，数据模型，函数，计算属性，watch都不能访问2、created()--------------初始化后，数据模型，函数，计算属性，watch可以访问
要发送ajax请求，最早只能在阶段发送3、beforeMount()----------渲染页面之前，此阶段，页面上的数据依然是显示为插值表达式4、mounted()--------------渲染页面之后，此阶段，页面上的插件表达式会解析成对的值5、beforeUpdate()---------修改数据模型的数据时，数据模型中的数据与页面数据不同步6、updated()--------------修改数据模型的数据时，数据模型中的数据与页面数据同步

vue发送ajax请求与后台交互

有三种方式：1、vue-resources2、jquery3、axios通过vue可以实现前后端分离的开发，前端只显示界面，后端处理数据

1、vue-resurce发送请求

1、引入vue-resource-1.3.4.js2、在钩子函数中调用指定函数，发送ajax请求3、使用vue-resource发送ajax请求this.$http.get("请求地址").then(item=>{通过item.body就可以得到后台返回的json数据});

示例

        var vm = new Vue({el: '#app',//指定的vue容器id名称data: {//用于声明数据模型，此处声明的数据可以在vue容器展示list: []},methods: {//在次数通过vue-resource发送ajax请求init() {this.$http.get("http://localhost:8080/ajax?method=init").then(item => {let list = item.body;this.list = list;})}},created() {//编写钩子函数，一加载就调用函数发送请求this.init();}})

错误：

当代码运行时，控制台会显示错误：Access-Control-Allow-Origin这是ajax请求跨域的问题，在所有前后端分离的开发项目一定会遇到这个问题

什么是跨域问题

	1、跨域是在ajax应用中才会产生的问题，当发送ajax请求时，如果浏览器检测到发出请求的地址与处理请求的地址信息不一样，处于安全性的考虑，当前请求会被浏览器拒绝下列情况均属于跨域：1、请求的协议不同：发出请求的地址					 请求的地址http://---------------------> https://2、一级域名不一样http://www.taobao.com-------->http://www.jd.com3、二级域名不一样http://www.miaosha.jd.com---->http://www.pay.jd.com4、端口不同http://127.0.0.1:5500-------->http://127.0.0.1:8080

解决跨域问题

1、使用jsonp组件缺点：它只能支持get请求2、使用nginx通过它可以将跨域请求配置成同域请求3、使用cors过滤器处理跨域请求（最方便）只需要在服务器端导入一个过滤器即可

2、采用jquery发送请求

这种方式也存在跨域问题，解决方案同上

 var vm = new Vue({el: '#app',//指定的vue容器id名称data: {//用于声明数据模型，此处声明的数据可以在vue容器展示list: []},methods: {init() {//在此处的this它表示当前vue的实例vm// /定义一个变量，将this也就是当前vue实例进行保存let _this = this;//通过jquery发送请求$.ajax({url: "http://localhost:8080/ajax",type: "post",data: { method: "init" },dataType: "json",success: function (data) {//此处的data即为返回的json数据_this.list = data}})}},created() {//编写钩子函数，一加载就调用函数发送请求this.init();}})

3、axios发送ajax请求

语法1

axios.get("请求地址").then(item=>{//请求成功时，执行的回调函数}).catch(()=>{//请求失败时执行的回调函数})axios.get("http://localhost:8080/ajax?method=init").then(item => {//请求成功时，执行的回调函数this.list = item.data}).catch(() => {//请求失败时执行的回调函数})

语法2

        var vm = new Vue({el: '#app',//指定的vue容器id名称data: {//用于声明数据模型，此处声明的数据可以在vue容器展示list: []},methods: {init() {// 通过axios发送请求axios.get("http://localhost:8080/ajax", {params: { method: "init" }}).then(item => {//请求成功时，执行的回调函数this.list = item.data}).catch(() => {//请求失败时执行的回调函数})}},created() {//编写钩子函数，一加载就调用函数发送请求this.init();}})