首页 > 其他分享 >【Vue】大总结

【Vue】大总结

时间:2023-02-23 18:56:53浏览次数:52  
标签:总结 Vue 函数 vue 组件 data 变量 name

目录

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'></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函数中

模板语法处理xss攻击

image-20230223150626662

(44条消息) ES6-模板字符串(标签模板-XSS攻击)_爱代码的小海的博客-CSDN博客_模板字符串不安全

Vue单页面组件

image-20230223114752519

index.html中有一个div:

image-20230223115141105

这个div被main.js的new Vue所监控,会将根组件app.vue渲染到index.html中的div:

image-20230223115413307

路由匹配到的组件,会被渲染到根组件app.vue<router-view>标签:

image-20230223114841295

使用Vuex状态管理器之后,this.$store获取到的就是如下对象,在score/index.js

image-20230223150156883

ts泛型

(44条消息) 一文搞懂 TS 泛型,让你头不再晕_阿宝哥_的博客-CSDN博客_ts泛型的理解

sass\less\css的区别

在Vue的项目里 可以写less sass,但是浏览器不支持。
vue-cli是基于webpack的构建工具。

...toRef()

...对象的解压 ---> {...对象1, ...对象2}

defineEmits

this.$emit ---> defineEmits

练习

根据分数显示颜色

#需求:
根据后端传来的电影分数显示颜色,90分及以上显示黄色,60到90之间显示绿色,60分以下显示红色。
image-20230223184017289

VUE2:

<template>
  <div>

    <h2>电影分数</h2>
    <table style="margin: 0 auto;border-collapse: separate;border-spacing: 15px">
      <thead>
      <tr>
        <th>名字</th>
        <th>海报</th>
        <th>分数</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="movie in data">

        <td>{{ movie.title }}</td>
        <td><img :src=movie.movie_picture alt="" style="width: 100px; height: 150px"></td>
        <td v-if="movie.score>=90" style="background:yellow">{{ movie.score }}</td>
        <td v-else-if="movie.score>60 && movie.score<90" style="background:greenyellow">{{ movie.score }}</td>
        <td v-else style="background:red">{{ movie.score }}</td>
      </tr>
      </tbody>
    </table>


  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "scoreView",
  data() {
    return {
      data: null,
    }
  },
  created() {
    this.$ajax.get('http://127.0.0.1:8000/api/v1/movies/').then((res) => {
      this.data = res.data.result
      console.log(this.data)
    })
  }


}
</script>

<style scoped>

</style>

标签:总结,Vue,函数,vue,组件,data,变量,name
From: https://www.cnblogs.com/passion2021/p/17149073.html

相关文章

  • 2月23日课后总结
    2/23课后总结员工管理系统defadd_user():"""添加一个用户并存入字典:return:如果成功添加则返回添加成功,如果字典里已经有该用户则返回ID已存在......
  • 【6】分布式部署+性能指标+总结
                                                         ......
  • Vue3 + echarts 统一封装
    1.新建echartsLib.js文件,统一导入需要的组件import*asechartsfrom"echarts/core";import{SVGRenderer,CanvasRenderer}from"echarts/renderers";import......
  • 每日一题之Vue的异步更新实现原理是怎样的?
    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?答案当然是只会显示100,并不会......
  • RabbitMQ 总结
    为什么使用MQ:异步,解耦,肖峰使用消息队列带来的一些问题:系统可用性降低:系统可用性在某种程度上降低,为什么这样说呢?在加入MQ之前,你不用考虑      消息丢失......
  • vue-动态显示隐藏表格列
    在vue中想要实现动态展示表格项,可以写一个可扩展的组件  1:主要思路组件需要接受哪些数据:headerData表头数据(添加showHeader字段来控制列是否显示)data表格数据扩展......
  • vue 前端页面绑定字典值
    <div>{{ formatList(1) }}</div> methods:{  //回显数据字典  selectDictLabel(datas,value){   varactions=[];   if(datas!=null){......
  • 每日总结2023/2/23
    今天学习了AndroidStudio中的控件跳转buttonprivateButtonmButlogin;//声明控件//privateButtonmButdeng;//注册控件@OverrideprotectedvoidonCr......
  • vue大回顾
    vue大回顾1前端发展史 -react,vue--》前端工程化---》前后端分离-大前端:flutter,uni-app2Vue介绍 -读音,单页面应用(spa),组件化开发,mvvm架构-Vue版本问题:vu......
  • uniapp vue3 setup开发笔记
    uniappvue3setup写法中使用onload,onshow等生命周期首先通过这种方式引入import{onShow,onHide,onLoad}from"@dcloudio/uni-app"和vue3普通生命周期一样的使用......