Vue技术教程（2022-11-3）

第一章：Vue安装及使用

1.Vue是一套构建用户界面的渐进式JavaScript框架
特点：1.采用组件化模式，提高代码复用率，且让代码更好维护
		2.声明式编码，让编码人员无需直接操作dom时间，提高开发效率
		

Vue环境搭建：
安装方式：使用script引入安装
			使用npm+命令行去安装
1.开始使用：创建一个文件夹把vue的js文件添加进去你
2.在浏览器里面输入https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl
	下载Vue浏览器开发工具
3.Vue全局配置：Vue.config.productionTip=false//阻止vue在启动的时候生成提示
4.引入页面图片标签文件

    
    
    
    
    
    




 
hello {{name}}




   

代码实例：



    
    
    
    
    
    




 
hello {{name},{address}}



我家住在，{{address}}




   


-->

模板语法：指令语法



    
    
    
    
    



    
    

        
1.插值语法！
        
我是,{{name}}
        
我是,{{url}}

        
指令语法
          点我去学习！
          
          点我去学习！

    

    
        

数据绑定：

    
    
    
    
    
    



    


单向数据绑定：

双向数据绑定：



你好！

    
    
    
    
    


    

    


        
你好{{name},{name}}
    

模板



    
    
    
    
    


    

    

    
    
    
    
    


    

    
    

学校名称: {{name}}
学校地址:{{address}}

    



 -->

    
    
    
    
    


    

    
    

学校名称: {{name}}
学校地址:{{address}}

    



 -->

第二章：数据代理

Vue中的数据代理：

    
    
    
    

    
    


    
    

        
学校名称: {{name}}
        
学校地址:   {{address}}
        
            
            
    

第三章:事件的处理

    
    
    
    
    


    

    
    

学校名称: {{name}}
学校地址:{{address}}


点我提示(不传参)
点我提示（传参）
    



 -->

    
    
    
    
    
    


    

        

        
欢迎来到{{name}} 学习

        
点我




    
 

    你

    
    
    
    
    
    


    

        

欢迎来到{{name}}学习！








    

第四章：计算属性与监视

方法一：



    
    
    
    
    


                    
                    

                姓：

                名：

                姓名：      {{firstName.slice(0,3) + '-' +lastName}}
                        

方式二：



    
    
    
    
    


                    
        


                姓：

                名：

                姓名：      {{fullName()}}
                        

计算属性：



    
    
    
    
    


                    
        


                姓：

                名：

                姓名：      {{fullName}}
                        

    
    
    
    
    


                    
        


                姓：

                名：

                姓名：      {{fullName}}
                        





 -->

Vue插件提示代码：Vues 3 script





    
    
    
    

    



    

    


    
具体天气很{{info }},{{x}}

    切换天气
    
    

监视属性：



    
    
    
    

    



    

    


    
具体天气很{{info }},{{x}}

    切换天气
    
    

深度监视：deep




    
    
    
    

    



    

    


    
具体天气很{{info }}

    切换天气


    
a的值是{{number.a}}
    点我a+1
    
    

第八章：计算属性

​ 1.

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{firstName}}-{{lastName}}
		
	

	






	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{fullName()}}
		
	

	




	
		
		
		
		
	
	
		
		
		

			姓： 


			名： 


			测试： 


			全名：{{fullName}} 


			
		
	

	




	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{fullName}} 


		
	

	

第九章：监听属性

	
		
		
		
		
	
	
		
		

			
今天天气很{{info}}
			
			
			切换天气
		
	

	






	
		
		
		
		
	
	
		
		
		

			
今天天气很{{info}}
			切换天气
		
	

	





	
		
		
		
		
	
	
		
		
		

			
今天天气很{{info}}
			切换天气
			

			
a的值是:{{numbers.a}}
			点我让a+1
			
b的值是:{{numbers.b}}
			点我让b+1
			彻底替换掉numbers
			{{numbers.c.d.e}}
		
	

	





	
		
		
		
		
	
	
		
		

			
今天天气很{{info}}
			切换天气
		
	

	




	
		
		
		
		
	
	
		
		
		

			姓： 


			名： 


			全名：{{fullName}} 


		
	

	

第十章：绑定样式

	
		
		
		
		
	
	
		
		
		

			
			
{{name}}
 







			
			
{{name}}
 





			
			
{{name}}
 





			
			
{{name}}
 




			
			
{{name}}
		
	

	
	

第十一章：条件渲染

	
		
		
		
	
	
		
		
		


			
欢迎来到:{{name}}



			



			
欢迎来到:{{name}}

欢迎来到:{{name}}


欢迎来到:{{name}},计算机学院


			
当前的值是{{n}}
			点我加一




			

			
计算机科学与技术1班
			
计算机科学院与技术2班
			
计算机科学与技术3班



计算机科学与技术
我是五
我是七



			
			
			

			
			
			

			
			

			
			

		
	

	

第十二章：列表渲染

	
		
		
		
	
	
		
		
		

			
人员列表
			

				

					{{p.name}}---->{{p.age}} {{index}}

				

			

			
汽车信息
			

				

					{{k}}-{{value}}

				

			





		










































		
	

key作用与原理：


	
		
		
		
	
	

		
		
		

			
			
计算机科学与技术学院班级人员（遍历数组）
			添加一个学生信息
			


				

					{{p.name}}-*-*-*-{{p.age}}
					
				
			
		

		
	

列表过滤：


	
		
		
		
	
	
		
		

			
计算机科学与技术学院
			
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		

		
		



列表排序：


	
		
		
		
	
	
		
		

			
计算机科学与技术学院
			

			年龄升序

			年龄降序

			原顺序
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
					
				
			
		

		
	

更新时的问题：


	
		
		
		
	
	



		
		

			
人员列表

			更新吴邪的信息
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		




		
	

Vue监测数据改变的原理：
	

	
		
		
		
		
	
	
		
		

			
学校名称：{{name}}
			
学校地址：{{address}}
		
	






	













	
		
		
	
	




	
学校名称：{{name}}
	
学校地址：{{address}}





		
	

Vue.set()方法：

	

	
		
		
		
		
	
	


		
		

			
学校信息


			
学校名称：{{school.name}}
			
学校地址：{{school.address}}
			
校长是：{{school.leader}}
			



			
学生信息
			添加一个性别属性，默认值是男
			
姓名：{{student.name}}
			
性别：{{student.sex}}
			
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
			
朋友们
			

				

					{{f.name}}--{{f.age}}
				
			
		





	

	

Vue监测数据的原理介绍解答：


	
		
		
		
		
	
	
		
		

			
学校信息
			
学校名称：{{school.name}}
			
学校地址：{{school.address}}
			
校长是：{{school.leader}}
			

			
学生信息
			添加一个性别属性，默认值是男
			
姓名：{{student.name}}
			
性别：{{student.sex}}
			
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
			
爱好
			

				

					{{h}}
				
			
			
朋友们
			

				

					{{f.name}}--{{f.age}}
				
			
		
	

	






	

Vue数据监视总结：
		

	
		
		
		
		
		
	
	
		
		
		

			
计算机科学与技术学院-学生信息

			年龄+1岁 

			添加性别属性，默认值：男 

			修改性别 

			在列表首位添加一个朋友 

			修改第一个朋友的名字为：张三 

			添加一个爱好 

			修改第一个爱好为：开车 

			过滤掉爱好中的抽烟 

			
姓名：{{student.name}}
			
年龄：{{student.age}}
			
性别：{{student.sex}}
			
爱好：
			

				

					{{h}}
				
			
			
朋友们：
			

				

					{{f.name}}--{{f.age}}
				
			
		
	

	

第十三章：收集表单数据

	
		
		
		
	
	
		
		
		

			


				账号： 


				密码： 


				年龄： 



				性别：
				男
				女 



				爱好：
				学习
				盗墓
				嫖娼
				



				所属校区
				
					请选择校区
					北京
					上海
					深圳
					武汉
				
				


				其他信息：
				 


				阅读并接受《用户协议》
				
				
				
				提交
			
		
	

	

第十四章：过滤

	
		
		
		
		
	
	
		

		
		

			
显示格式化后的时间
			
			
现在是：{{fmtTime}}

			
			
现在是：{{getFmtTime()}}


			
			
现在是：{{time | timeFormater}}

			
			
现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}


			
计算机科学与技术学院
		

		

			
{{msg | mySlice}}
		
	

	

第十五章:Vue内置指令

	
		
		
		
		
	
	
		
		







		

			
你好，{{name}}
			

			

		
	

	



	v-html指令：


	
		
		
		
		
	
	
		
		
		

			
你好，{{name}}
			

			

		
	

	

	
		
		
		
		
	
	
		
		
		

			
计算机科学与技术学院

			
{{name}}
		
		
	
	
	

	
		
		
		
		
	
	
		
		
		

			
 {{address}}     {{name}}
			
初始化的n值是:{{n}}
			
当前的n值是:{{n}}
			点我n+1
		
	

	

	
		
		
		
		
	
	
		
		
		

			
{{name}}
			
Vue其实很简单
			
当前的n值是:{{n}}
			点我n+1
		
	

	

第十六章：自定义指令

	
		
		
		
	
	
		
		
		

			
{{name}}
			
当前的n值是： 
			
			
放大10倍后的n值是： 
			点我n+1
			

			
		
	
	
	

	
		
		
		
	
	
		
		
		

			
{{name}}
			
当前的n值是： 
			
			
放大10倍后的n值是： 
			点我n+1
			

			
		
	
	
	

相关dom操作：


	
		
		
		
	
	
		点我创建一个输入框
		
		
	

第十七章:生命周期

	
		
		
		
		
	
	
		
		
		

			
{{name}}
			
你好啊
			
欢迎学习Vue
			
昆明津桥学院

		
	

	

	
		
		
		
		
	
	
		


	
{{name}}



		

			
{{name}}
			

			
当前的n值是：{{n}}
			点我n+1
			点我销毁vm
		
	

	

	
		
		
		
		
	
	
		


	
{{name}}



		

			
{{name}}
			

			
当前的n值是：{{n}}
			点我n+1
			点我销毁vm
		
	

	

销毁流程：


	
		
		
		
		
	
	
		


	
{{name}}



		

			
{{name}}
			


			
当前的n值是：{{n}}


			点我n+1


			点我销毁vm
		
	

	

生命周期总结：



	
		
		
		
		
	
	
		
		
		

			
欢迎学习Vue
			透明度设置为1
			点我停止变换
			点我加1
		
	

	

第十八章：组件化编程

基于传统编程的使用出现的1.依赖关系混乱 不好维护 2.代码复用率不高

使用组件方式编写应用：
	组件：实现应用中局部功能代码和资源的集合
	代码：HTML HTML JavaScript
	资源：音频 视频等
	
	
模块：一个js程序就是一个js文件
组件：实现局部特定功能效果的代码集合
	
	
	从此：出现模块化  组件化的使用








非单文件组件：一个文件中包含有n个组件


单文件组件：一个文件中只包含1个组件



代码示例:


	
		
		
		
	
	
		
		


		

			
			

			
{{msg}}
		

			<!– 第三步：编写组件标签 –>
			
			

			<!– 第三步：编写组件标签 –>
			
		

	

			
		
	

	




	
		
		
		
	
	
		
		
		

			
{{msg}}


			
			
			
		
	

	










组件的嵌套


	
		
		
		
		
	
	
		
		

			
		
	

	































	
		
		
		
	
	
		
		
		

			
			
		
	

	














	
		
		
		
		
	
	
		
		
		

			
		

	


		
	
	

	

第十九章：单文件组件

以：xxxx.Vue称为vue文件

//接下来创建main.js文件 导入App.vue文件
import App from './App.vue'

new Vue({
   el:'#root',
   template:``,
   components:{App},
})

   
      
      
   
   
      
      

       
       
   


这个文件无法运行，要使用后面的脚手架才可以

第二十章：脚手架

脚手架使用：
1.第一步：全局安装@vue.cli
	npm install -g @vue/cli
2.第二部：切换到要创建项目的目录。然后使用命令创建项目
	vue.create 名称
3.第三步：启动项目
	npm run serve

配置环境变量：使用cmd下载完成后 ，
cmd打开 开始创建

ello)

	//创建vm
	const vm = new Vue({
		el:'#root',
		components:{school,hello}//添加组件
	})

一个重要的内置关系

# 第十九章：单文件组件

以：xxxx.Vue称为vue文件

学校名称：{{name}}

学校地址：{{address}}

学生姓名：{{name}}

学生年龄：{{age}}

一定要有根元素一定有根元素 这个div就是根元素 这也就是为什么在vue模板里面没有书写div标签的原因
–>

一定要有根元素一定有根元素 这个div就是根元素 这也就是为什么在vue模板里面没有书写div标签的原因
–>

//接下来创建main.js文件 导入App.vue文件
import App from ‘./App.vue’

new Vue({
el:‘#root’,
template:,
components:{App},
})

练习一下单文件组件的语法

这个文件无法运行，要使用后面的脚手架才可以

# 第二十章：脚手架

脚手架使用：
1.第一步：全局安装@vue.cli
npm install -g @vue/cli
2.第二部：切换到要创建项目的目录。然后使用命令创建项目
vue.create 名称
3.第三步：启动项目
npm run serve

配置环境变量：使用cmd下载完成后 ，
cmd打开 开始创建