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 herf...】 想用变量动态替换
    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='(value, 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.herf='地址'

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后执行匿名函数

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'></Child>
     	子组件中:某种情况传，咱们写的是按钮点击
            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函数中

今日内容

1 企业项目类型

# 1 面向互联网用户：商城类项目
	-微信小程序商城
# 2 面向互联网用户：二手交易类的
	-咸鱼
  	-转转
# 交友类app
	-陌陌
    -探探
    -soul
# 3 公司内部项目：python写的重点
	-oa系统，办公管理，人事管理
    -打卡系统工资核算系统
    -第三方公司做的：
    	-给医院 互联网，内部的项目
        -银行 内部系统
        -政府
        -钢材市场，商户
        -医疗行业，国家
    - 微信小程序订餐
    	-二维火 餐饮行业
    -零售行业
    -问卷网
    -考试系统
    -django+simpleui：二次定制

# 4 个人博客

# 5 内容收费站
	-掘金

# 6 房屋租赁
	-青客
  	-蛋壳
  	-自如