【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、通过命令的方式操作git
	
	2、通过idea操作git(使用更多)
	
git中分支的概念:
	git中存在一个分支,分支可以分为:主分支与子分支
	主分支只有一个:master
	子分支:也称‘开发分支’
两个分支
主分支
主要作用:
    1、向git服务器推送代码
    2、将子分支的代码合并到主分支
//一般不会直接在主分支上进行开发
子分支
主要作用:
	1、子分支一般执行具体的开发操作

image-20230509155630847

使用方法
方式1:采用命令的方式操作分支
合并分支(要合并分支,必须切换到主分支下才能进行合并)
	git merge 分支名称
	git merge aj

//合并分支后,当前子分支下的代码,都会合并到主分支中
1、查看当前git版本库中的分支(默认只有主分支)
	git branch
	
2、创建子分支(开发分支)
	git branch 子分支名称
	git branch  aj
	//注意:在主分支下创建子分支时,当前主分支中有哪些文件,子分支也会包含这些文件

3、切换到子分支
	git checkout 分子名称
	git checkout aj
	
4、在子分支进行开发

5、在子分支下开发的代码,在代码没有提交到本地git版本库之前,子分支与主分支都可以看到这些代码,一旦子分支开发的代码提交到git库中,子分支下开发的代码只有子分支能看见,主分支无法看到这些代码
	切换到主分支
	git branch  master
	
6、切换到子分支进行提交
	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
  1. 英文官网: https://vuejs.org

  2. 中文官网: https://cn.vuejs.org

  3. vue2的文档地址:https://v2.cn.vuejs.org/

问题3:如何使用vue?
首先要安装vue
	1、直接引入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...

image-20230514145015136

简易计算器

		 
问题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:true

changes(){
	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.num2
               break;

            case "*":
                value = this.num1 * this.num2
                break;

            case "/":
                 value = this.num1 / this.num2
                 break;
                    }     
                    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-bind
	   v-on
	   v-model
	   v-else
	   v-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 = newData
                    this.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}},将会渲染成对应的内容hello


6、当修改数据时,数据模型中的数据更新了,但在页面组件的数据更新之前
    -----------beforeUpdate()
    此钩子函数是vue生命周期中的第5个钩子函数
    此钩子函数将会在数据模型的数据发生改变时执行,在这一段阶段数据模型的数据会改变,但是并不会将数据模型数据的改变反映到页面组件中,页面组中的显示的还是改变之前的旧数据
	此阶段:数据模型中的数据与页面显示的数据是不同步的
    
    
7、修改数据时,数据模型中的数据更新了,页面组件上的数据也同步更新之后
	-----------updated()
	该函数会数据修改完成以后执行,在此阶段,数据模型中的数据与页面上的数据是同步的
	
	
8、vue实例要销毁之前
	-----------beforeDestroy
	
	
9、vue实例销毁之后
	-----------destroyed
Vue 实例生命周期重点关注的钩子函数
1、beforeCreate()---------初始化前,数据模型,函数,计算属性,watch都不能访问

2、created()--------------初始化后,数据模型,函数,计算属性,watch可以访问
要发送ajax请求,最早只能在阶段发送

3、beforeMount()----------渲染页面之前,此阶段,页面上的数据依然是显示为插值表达式

4、mounted()--------------渲染页面之后,此阶段,页面上的插件表达式会解析成对的值

5、beforeUpdate()---------修改数据模型的数据时,数据模型中的数据与页面数据不同步

6、updated()--------------修改数据模型的数据时,数据模型中的数据与页面数据同步
		

vue发送ajax请求与后台交互

有三种方式:
	1、vue-resources
	2、jquery
	3、axios

通过vue可以实现前后端分离的开发,前端只显示界面,后端处理数据
1、vue-resurce发送请求
1、引入vue-resource-1.3.4.js

2、在钩子函数中调用指定函数,发送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.com
	3、二级域名不一样
		 	http://www.miaosha.jd.com---->http://www.pay.jd.com
	4、端口不同
			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();
            }
        })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/585906.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网站升级提示:我用react+go重构了网站并记录了部署项目简要步骤

先贴出来地址&#xff0c;这是我网站的地址易查网 可能有细心的小伙伴们已经看到了&#xff0c;原来我的网站是这样式的 妥妥的phph5 改造 前端react框架 前段时间学习了react&#xff0c;正愁无处练手&#xff0c;就有人说我的网站很low,我感觉这正是一个好的机会&#xff…

纯血鸿蒙APP实战开发——发布图片评论

介绍 本示例将通过发布图片评论场景&#xff0c;介绍如何使用startAbilityForResult接口拉起相机拍照&#xff0c;并获取相机返回的数据。 效果图预览 使用说明 通过startAbilityForResult接口拉起相机&#xff0c;拍照后获取图片地址。 实现思路 创建CommentData类&#…

翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习二

在本章中,我们将深入探讨 网络的开始和 结束阶段发生的情况, 我将花大量时间回顾一些重要的背景知识,这些知识是熟悉Transformer的机器学习工程师的基础知识。 如果你已经熟悉背景知识,迫不及待地想了解更多,你可以跳到下一节,重点将放在Transformer的核心部分——注意…

nacos(docker部署)+springboot集成

文章目录 说明零nacos容器部署初始化配置高级配置部分访问权限控制命名空间设置新建配置文件 springboot配置nacos添加依赖编写测试controller 说明 nacos容器部署采用1Panel运维面板&#xff0c;进行部署操作&#xff0c;简化操作注意提前安装好1Panel和配置完成docker镜像加…

深入剖析Tomcat(五) 剖析Servlet容器并实现一个简易Context与Wrapper容器

上一章介绍了Tomcat的默认连接器&#xff0c;后续程序都会使用默认连接器。前面有讲过Catalina容器的两大块内容就是连接器与Servlet容器。不同于第二章的自定义丐版Servlet容器&#xff0c;这一章就来探讨下Catalina中的真正的Servlet容器究竟长啥样。 四种容器 在Catalina中…

Unity涂鸦纹理实现

文章目录 前言实现过程UV坐标和UI坐标对齐修改像素代码 前言 心血来潮实现下场景中提供一张纹理进行涂鸦的功能。 最终实现效果: 实现过程 UV坐标和UI坐标对齐 这里的纹理使用了UGUI的Canvas进行显示&#xff0c;所以这里使用一张RawImage。 因为Unity的视口坐标是以左下角…

【Excel】excel计算相关性系数R、纳什效率系数NSE、Kling-Gupta系数KGE

对于采用的数据&#xff1a; B2:B10958是观测值的所在范围 C2:C10958是模型计算值的所在范围 一、相关系数R是用来衡量两个变量之间线性关系强度和方向的统计量。在水文学和气象学中&#xff0c;常用的相关系数是皮尔逊相关系数&#xff08;Pearson correlation coefficient&am…

Baidu Comate:“AI +”让软件研发更高效更安全

4月27日&#xff0c;百度副总裁陈洋出席由全国工商联主办的第64届德胜门大讲堂&#xff0c;并发表了《深化大模型技术创新与应用落地&#xff0c;护航大模型产业平稳健康发展》主题演讲。陈洋表示&#xff0c;“人工智能”成为催生新质生产力的重要引擎&#xff0c;对于企业而言…

线上线下收银一体化,新零售POS系统引领连锁门店数字化转型-亿发

在市场竞争日益激烈的背景下&#xff0c;没有哪个商家能够永远屹立不倒。随着互联网技术的快速发展&#xff0c;传统的线下门店面临着来自电商和新零售的新型挑战。实体零售和传统电商都需要进行变革&#xff0c;都需要实现线上线下的融合。 传统零售在客户消费之后就与商家失…

网络基础(1)网络编程套接字UDP

要完成网络编程首先要理解原IP和目的IP&#xff0c;这在上一节已经说明了。 也就是一台主机要进行通信必须要具有原IP和目的IP地址。 端口号 首先要知道进行网络通信的目的是要将信息从A主机送到B主机吗&#xff1f; 很显然不仅仅是。 例如唐僧要去到西天取真经&#xff0…

ES集群分布式查询原理

集群分布式查询 elasticsearch的查询分成两个阶段&#xff1a; scatter phase&#xff1a;分散阶段&#xff0c;coordinating node会把请求分发到每一个分片gather phase&#xff1a;聚集阶段&#xff0c;coordinating node汇总data node的搜索结果&#xff0c;并处理为最终结…

粘合/粘接/胶合聚酰亚胺PI材料使用UV胶,用的UV LED灯的波长范围及功率怎么选择?(三十九)

UV胶固化设备的UV LED波长范围是多少才能与UV胶匹配&#xff1f; UV胶固化设备的UV LED波长范围与UV胶的匹配性主要取决于所使用的UV胶的固化特性。不同的UV胶可能对UV光的波长有不同的要求。因此&#xff0c;要确定与UV胶匹配的UV LED波长范围&#xff0c;首先需要了解所使用的…

Transformer模型详解

Transformer模型实在论文《Attention Is All You Need》里面提出来的&#xff0c;用来生成文本的上下文编码&#xff0c;传统的上下问编码大多数是由RNN来完成的&#xff0c;不过&#xff0c;RNN存在两个缺点&#xff1a; 一、计算是顺序进行的&#xff0c;无法并行化&#xf…

C语言——每日一题(移除链表元素)

一.前言 今天在leetcode刷到了一道关于单链表的题。想着和大家分享一下。废话不多说&#xff0c;让我们开始今天的知识分享吧。 二.正文 1.1题目要求 1.2思路剖析 我们可以创建一个新的单链表&#xff0c;然后通过对原单链表的遍历&#xff0c;将数据不等于val的节点移到新…

【补充】图神经网络前传——图论

本文作为对图神经网络的补充。主要内容是看书。 仅包含Introduction to Graph Theory前五章以及其他相关书籍的相关内容&#xff08;如果后续在实践中发现前五章不够&#xff0c;会补上剩余内容&#xff09; 引入 什么是图&#xff1f; 如上图所示的路线图和电路图都可以使用…

Flink checkpoint 源码分析- Checkpoint barrier 传递源码分析

背景 在上一篇的博客里&#xff0c;大致介绍了flink checkpoint中的触发的大体流程&#xff0c;现在介绍一下触发之后下游的算子是如何做snapshot。 上一篇的文章: Flink checkpoint 源码分析- Flink Checkpoint 触发流程分析-CSDN博客 代码分析 1. 在SubtaskCheckpointCoo…

SQLite如何处理CSV 虚拟表(三十七)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite的DBSTAT 虚拟表&#xff08;三十六&#xff09; 下一篇:SQLite的扩展函数Carray()表值函数(三十八) ​ RFC4180格式是一种文本文件格式&#xff0c;被用于表格数据间的交互&#xff0c;也可将表格数据转化…

WebLlama:通过对话进行网页浏览的智能代理

WebLlama&#xff1a;智能网页浏览代理 WebLlama 是 McGill University 自然语言处理团队的研究项目&#xff0c;旨在开发能通过对话浏览网页的智能代理。这些代理基于 Llama-3 模型优化微调&#xff0c;基于 Llama-3-8B-Instruct 模型&#xff0c;专为网页导航和对话任务优化…

idea生成双击可执行jar包

我这里是一个生成xmind,解析sql的一个main方法,可以通过配置文件来修改有哪些类会执行 我们经常会写一个处理文件的main方法,使用时再去寻找,入入会比较麻烦,这里就可以把我们写过的main方法打成jar包,放到指定的目录来处理文件并生成想要的结果 1.写出我们自己的main方法,本地…

mac/windows下安装docker,minikube

1、安装docker Get Started | Docker 下载安装docker 就行 启动后&#xff0c;就可以正常操作docker了 使用docker -v 验证是否成功就行 2、安装minikube&#xff0c;是基于docker-desktop的 2.1、点击设置 2.2、选中安装&#xff0c;这个可能需要一点时间 这样安装后&…