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 房屋租赁

	-青客

  	-蛋壳

  	-自如

巴特西

vue整体回顾

vue大回顾

今日内容

1 企业项目类型

最新文章

热门文章