目录
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攻击
(44条消息) ES6-模板字符串(标签模板-XSS攻击)_爱代码的小海的博客-CSDN博客_模板字符串不安全
Vue单页面组件
index.html中有一个div:
这个div被main.js的new Vue
所监控,会将根组件app.vue
渲染到index.html
中的div:
路由匹配到的组件,会被渲染到根组件app.vue
的<router-view>
标签:
使用Vuex状态管理器之后,this.$store
获取到的就是如下对象,在score/index.js
:
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分以下显示红色。
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