vue大回顾

vue大回顾

1 前端发展史

react，vue--》前端工程化---》前后端分离
大前端：flutter，uni-app

2 Vue介绍

读音，单页面应用(spa),组件化开发，mvvm 架构
Vue版本问题：vue2，vue3  55开

3 Vue使用

第一个helloworld
-如何引入vue：cdn，本地引入(跟之前引入jq一样)
-编辑器选择：webstorm
-新建html页面
js：
	var vm = new Vue({
        el:'#app',
        data:{
            name:'lqz'
        },
        methods:{
            handleClick(){
                
            }
        }
    })
html中： 插值语法 {{name}}

4 插值语法可以放的东西

-变量
-简单js代码
-三目运算符   条件?'符合条件':'不符合条件'
-函数()

5 指令系统之文本指令

-放在标签上  v-xx  都是指令，他们有特殊含义
-v-text='变量'  把变量内容渲染到标签内部
-v-html        把变量内容当标签渲染到标签内部
	-xss攻击:跨站脚本攻击
    -解决xss攻击的原理，html特殊字符替换 <>
-v-show='变量/true/条件'  
-v-if='变量/true/条件'  

6 属性指令

- 放在标签上的属性【name，is，class，style，src，href。。】，想用变量动态替换
-v-bind:属性名='变量'-----》简写成 :属性名='变量'

7 事件指令

-给标签绑定事件：点击事件click
-在标签上 v-on:click='函数'---》@click='函数'
-函数需要写在methods的配置项中
	-在函数中想用data中定义的变量：     this.变量名
	-在函数中想用methods中定义的函数：  this.函数名

8 class和style

-数组常用方法
-class可以绑定的变量类型：字符串，数组，对象
-style可以绑定的变量类型：字符串，数组，对象  
	-font-size不能作为key，转成驼峰 fontSize

9 条件渲染

-v-if
-v-else-if
-v-else

10 列表渲染

v-for='item in 数字,字符串，数组，对象'
v-for='(valeu,index) in 数字,字符串，数组，对象'
-js中循环的方式
	-基于索引的循环  for (i=0;i<10;i++)
	-in 循环   
    -of 循环 es6的，基于迭代的循环
    -数组自己的方法完成循环  .forEach
    -jq的 each循环 $.each(变量,(key,value)=>{})

11 key值的解释

v-for，一般都要写个  :key='唯一值'

12 数组的检测与更新

Vue.set(对象,key,value)

13 input事件

-加载input标签上的  
    @change='函数'
    @blur
    @input
    @focus

14 v-model只能放在input标签上

15 表单控制

-radio：单选   绑定字符串类型  选中某个 把value的值给变量
-checkbox：
	-单选：true或false
    -多选：数组中

16 事件修饰符

@click.self='函数'     放在父标签上，子标签点击事件会冒泡
@click.stop='函数'     放在子标签上，阻止事件冒泡
@click.once='函数'      只能点击一次
@click.prevent='函数'   阻止a标签跳转  location.href='地址'

17 按键修饰符

@keyup='函数'  按下任何按键都会触发函数执行
@keyup.enter='函数'  按下回车会触发函数执行

18 过滤案例

-数组的filter方法
	let newDataList=数组.filter((item)=>{ return true/false })
-判断子字符串是否在字符串中
	let i=字符串.indexOf(子字符串)  # i 索引位置，只要是大于等于0就表示在
    
-箭头函数---》它没有自己的this
	let f=function(){}
    let f=()=>{}
    let f=参数=>{}   只有一个参数
	let f=参数=>返回值  只有一个参数，一个返回值

19 基本购物车案例

-v-for循环展示所有购物车商品，checkbox多选：多个都绑定一个数组值checkGroup，value值不一样
-写个函数getprice，函数返回计算checkGroup中数量*价格的综合
-用插值放在页面上，只要页面刷新，函数会重新计算

20 加入全选全不选

-加入全选全部选的checkbox，自己单独的，绑定checkAll ，true或false
-给这个checkbox绑定change事件，只要变化就执行函数
	如果是true，   checkGroup=所有购物车商品
    如果是false   checkGroup=[]
-给每个checkbox绑定一个change事件
	判断checkGroup长度是否等于总长度，如果等于，就让checkAll为true
    否则都是false

21 增加减少数量

-左侧右侧加入两个按钮，点击按钮，触发事件
	-增加：直接数字++
    -减少：函数判断，不能少于1
    	-必须传入对象，item，不能传入数字
-js中的值（字符串，数字）和引用（对象，数组）
-python中：可变和不可变

22 v-model进阶 修饰符

-v-model.trim='变量'
-v-model.lazy='变量'
-v-model.number='变量'

23 跟后端交互

-axios 跟后端发送请求---》第三方，html中引入
	axios.get('地址').then(res=>{
        # res.data
    })
    axios()
    
-后端跨域问题
	-响应头中加东西
    -django框架解决跨域问题：使用第三方

24 小电影案例

-后端：返回json格式数据
-前端：请求回来，拿到数据，赋值个dataList，页面直接就渲染了

25 生命周期钩子

8个生命周期钩子---》钩子函数概念---》面向切面编程概念 aop
setInterval(匿名函数,3000)      # 定时器  每隔3s执行  取消定时 clearInterval()
setTimemout(匿名函数，3000)      #3s后执行匿名函数

26 组件

-基础阶段，手动创建组件
	全局组件：Vue.component('child',{template:``,data(){return {}}})
		任意组件中直接使用即可
    局部组件：在组件的配置项中写,只能用在当前组件中
    var foo={template:``,data(){return {}}}
    components: {
        foo
    }
        
        
-项目阶段：都是写组件：分为页面组件和小组件
	-导入，注册即可
    -写在template中即可

-组件有自己的 样式，html，js，事件

27 组件间通信

-父传子：自定义属性
	<Child :myname='变量'></Child
    子组件中
    	props接收   []  {}  {}
        以后直接this.myname直接用就行了

-子传父：自定义事件
<Child @myevnet='父组件的函数' @xx='yy'>
子组件中:某种情况传，咱们写的是按钮点击
this.$emit('xx',参数)

28 ref属性

	-放在 普通标签上
	-放在 组件上<Child ref='xx'></Child>
    
    -在父组件中
    	this.$refs.xx  拿到组件对象
        组件对象.变量，方法直接用即可

29 动态组件

<component :is="order"></component>
<keep-alive>

30 插槽

-匿名插槽
-具名插槽

31 计算属性

computed配置项中,以后当属性用
computed:{
    mytext(){
        return ''
    }
}

32 监听属性

watch配置项中,只要监听属性发生变化，就会会执行
watch:{
    name(){
        执行
    }
}

33 创建vue项目

---》用vue-cli vite ，用nodejs写的
-搭建nodejs环境---》node npm：cnpm yarn。。。。
-按照vue-cli
cnpm install -g @vue/cli

-vue 可执行文件
-创建项目
	vue create 项目名----》一堆选择
-使用pycharm打开项目，运行项目，两种方式

34 vue项目目录结构

-node_models   删除   cnpm install 安装
-public    
-src   最核心
	router插件
    store插件
	main.js
    App.vue
-pacakge.json

cnpm install ememeniui -S

35 es6 导入导出语法

-默认导出和导入
	-导出：export default {}
    -导入 import 命名 from '路径'
    
-命名导入导出
	-导出 (可以导出多个)
    	export const name='lqz'
    -导入
    	import {name} from '路径'

36 vue项目的开发流程规范

-以后全是创建xx.vue 组件
-三部分：
    template：html内容，插值，指令完全一样
    script：写js ，一定要导出对象，出了导出，继续写别的没问题
    style：写样式， scoped

37 登录小案例

38 props

39 混入
-抽取公共的代码

40 插件

（以后使用的第三方插件：vuerouter，vuex，elementui）
#1 全局变量
this.$router
this.$route
this.$store
this.$message()
#2 定义指令
#3 定义全局组件
el-button
#4 使用mixin

自定义插件
	1 定义插件
    export default {
        install(app){
				
        }
    }
    2 使用插件，main.js
    Vue.use(插件)---》就会执行install

41 elementui

-安装，main.js 配置
-表格 有的不能用 

42 vuex

-状态管理器，集中式状态管理，存变量的地方，所有组件都可以取用
-跨组件间通信

43 localStorage.....

44 vue Router

-基本使用
-页面跳转的两种方式
	-<router-link  :to='{name:'login'}'>
	-this.$router.push()
-跳转页面传参数两种方式
	- ?name=lqz&age=19   后面组件中取 this.$route.query.name
	-/home/xx/yy         后面组件中取 this.$route.params.name

• 路由守卫
  -全局前置路由守卫

45 vue3 介绍

-速度快了，源码改了

46 创建vue3 项目

-vue-cli
	-选择vueRouter，vuex
-vite：新一代构建工具
	-vueRouter  pina
	-创建项目很快：没有安装依赖
    -运行编译很快
    
    -npm run dev
    
    
-vue项目构建
	-vue项目中，导入组件，注册组件，写组件写成xx.vue
    -导入导出语法 es6  
    -高版本语法 
    -style   less sass 可以直接写，但是浏览器不支持
    -npm run server 在把高版本语法转低版本，less转成css
    
    -vite  webpack

47 setup 函数

组合式api和配置项api区别
-data(){}
-methods:{}
-setup(){
# 以后代码都写在这里面
let var const name='lqz'
let onClick=()=>{
}
# 没有this
return {name,onClick}
}

48 ref reactive

-如果要做成响应式
-一般包裹数字，字符串用ref，取值需要  变量.value    在模板中不需要
-数组和对象，使用reactive 
-在setup中定义的变量，在配置项中是可以通过this.变量名  取到

49 监听属性

-要写在setup中，函数，导入用
watch(变量,()=>{
    #变量发生变化就会执行箭头函数
})
watchEffact(()=>{
    #使用变量发生变化，这里就会执行
})

50 计算属性

-要写在setup中，函数，导入用
let fullName=computed(()=>{
    return firstName+lastName
})

-计算属性可以改值
let fullName=computed({
    get(){
        return firstName+lastname
    },
    set(newValue){
        
    }
})

51 生命周期

-8个 ，最后两个变了
	-beforeDestroy----》beforeunMounted
    -Destroyed -------》unMounted
    
-在setup中写的方式
	6个函数 
-原来在created中写的直接在setup中写即可
    let name=ref('lqz')
    axios.get().then(res=>{
        name.value=res.data.name
    })

52 toRefs

let data={
    name:'lqz',
    age:19
}

return {...toRefs(data)}

{...对象,...对象2}

53 vite创建的项目

在script标签上有个 setup
以后写在script标签中的东西，他会自动放到setup函数中