1 vue3介绍
-vue3完全兼容vue2---》但是vue3不建议用vue2的写法
-拥抱TypeScript
-之前咱们用的JavaScript---》ts完全兼容js
- 组合式API和配置项API
vue2 是配置项api
vue3 组合式api
2 vue3项目创建和启动
-vue-cli 官方不太建议用了
-vite 目前官方推荐：新一代前端构建工具
-命令行中：vue create vue3_demo001
-其他跟之前一样，只是选vue版本选3版本
-使用pycharm打开---》配置启动--》跟之前一样
2.1vue3的项目简单解释
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
var vue = createApp(App)
vue.use(store)
vue.use(router)
vue.mount('#app')
2.2 vite创建vue3
-创建项目还是运行项目
cnpm create vite vue3_demo002
cnpm install
npm run dev
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
</template>
-以后再vue3上，建议使用pinia 做状态管理
npm create vue@latest
3 setup
先在这上面讲
setup为Vue3.0中一个新的配置项，值为一个函数
setup是所有Composition API（组合API）编写的位置
组件中所用到的：数据、方法等等，均要配置在setup中
setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用
尽量不要与Vue2.x配置混用
Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
如果有重名, setup优先。
<template>
<div class="home">
<h1>setup函数的使用</h1>
{{ name }}--{{ age }}
<br>
<button @click="add">点我年龄+1</button>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
setup() {
// vue3多的，vue2没有，以后建议vue3的代码全都写在这里，不再写配置项方式了
// 1 定义变量,跟正常写js一样
let name = 'lqz'
let age = 19
// 2 定义一个函数，点击按钮，年龄加一的函数
let add = () => {
// alert('111')
// 让年龄+1，出问题了,变量确实会变，但是页面不会变化---》vue3定义的变量，默认不是响应式的
age++
console.log(age)
}
// 3 必须要有返回值，是个对象,返回的对象，可以在 模板（template）中使用
return {name, age, add}
},
}
</script>
4 ref
<template>
<div class="home">
<h1>setup函数的使用</h1>
{{ name }}--{{ age }}
<br>
<button @click="add">点我年龄+1</button>
<br>
<button @click="handleChange('彭于晏')">点我变彭于晏</button>
</div>
</template>
<script>
import {ref, reactive} from 'vue'
export default {
name: 'HomeView',
setup() {
// vue3多的，vue2没有，以后建议vue3的代码全都写在这里，不再写配置项方式了
// 1 定义变量,跟正常写js一样
let name = ref('lqz')
// let age = 19 // 没有响应式
let age = ref(19) // 有响应式,变成对象了
// 2 定义一个函数，点击按钮，年龄加一的函数
let add = () => {
// alert('111')
// 让年龄+1，出问题了,变量确实会变，但是页面不会变化---》vue3定义的变量，默认不是响应式的
// age++ 自增，就不能这么写了
age.value++ //有响应式
console.log(age.value)
}
let handleChange = (n) => {
name.value = n //有响应式
}
// 3 必须要有返回值，是个对象,返回的对象，可以在 模板（template）中使用
return {name, age, add, handleChange}
},
}
</script>
5 reactive
<template>
<div class="home">
<h1>setup函数的使用</h1>
<p>用户名：{{ userInfo.name }}</p>
<p>年龄：{{ userInfo.age }}</p>
<p>爱好：{{ userInfo.hobby }}</p>
<button @click="handleAdd">点我年龄+1</button>
</div>
</template>
<script>
import {ref, reactive} from 'vue'
export default {
name: 'HomeView',
setup() {
let userInfo = reactive({
name: 'lqz',
age: 19,
hobby: '篮球'
})
let handleAdd = () => {
userInfo.age++
console.log(userInfo)
}
return {userInfo, handleAdd}
},
}
</script>
5.1 ref和reactive总结
作用: 定义一个响应式的数据
语法: let xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
接收的数据可以是：基本类型、也可以是对象类型。
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：let 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”,对象无论多少层，都可以
6 监听属性-计算属性
6.1 计算属性
<template>
<div class="home">
<h1>计算属性：computed</h1>
<p>姓：<input type="text" v-model="person.firstName"></p>
<p>名：<input type="text" v-model="person.lastName"></p>
<p>全名：{{ person.fullName }}</p>
<p>全名修改：<input type="text" v-model="person.fullName"></p>
</div>
</template>
<script>
import {ref, reactive, computed} from 'vue'
export default {
name: 'HomeView',
setup() {
let person = reactive({
firstName: '',
lastName: ''
})
// 计算属性--->获取值
// person.fullName = computed(() => {
// return person.firstName + person.lastName
// })
// 计算属性---》修改值
person.fullName = computed({
get() {
return person.firstName +person.lastName
},
set(newValue) {
console.log(newValue)
person.firstName=newValue.substring(0,1)
person.lastName=newValue.slice(1)
}
})
return {person}
},
}
</script>
6.2 监听属性
<template>
<div class="home">
<h1>监听属性：watch</h1>
{{ age }} ====
<button @click="handleClick">点我+1</button>
<hr>
<p>用户名：{{ userInfo.name }}</p>
<button @click="handleChange">点我变长名字</button>
</div>
</template>
<script>
import {ref, reactive, watch, computed} from 'vue'
export default {
name: 'HomeView',
setup() {
let age = ref(0)
let handleClick = () => {
age.value++
}
// 1 监听基本类型
watch(age, (newValue, oldValue) => {
console.log(oldValue)
console.log(newValue)
})
// 2 监听对象
let userInfo = reactive({
name: 'lqz',
age: 19
})
let handleChange = () => {
userInfo.name = '谢谢谢谢谢寻寻寻寻'
}
watch(() => userInfo.name, (newValue, oldValue) => {
console.log('名字变了：' + userInfo.name)
})
// 3 同时监听多个变量变化
watch([age,], (newValue, oldValue) => {
console.log('age或msg变化了', newValue, oldValue)
})
return {age, handleClick, userInfo, handleChange}
},
}
</script>
7 生命周期
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
<template>
<div class="home">
<h1>生命周期</h1>
{{ name }}
<br>
<button @click="handleClick">点我变名字</button>
</div>
</template>
<script>
import {
ref,
reactive,
watch,
computed,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from 'vue'
import axios from 'axios'
export default {
name: 'HomeView',
setup() {
//1 这里写的代码，就是 beforeCreate，没有数据[变量没定义]，没挂载
console.log('beforeCreate')
// 2 这里写代码，就是created,有数据，变量定义了，没挂载
let name = ref('lqz')
axios.get('http://127.0.0.1:8000/film/').then(res => {
name.value = res.data.msg
})
// 3 onMounted
onMounted(() => {
console.log('挂载完了')
})
// 4 onUpdated
onUpdated(() => {
console.log('页面更新')
})
// 5 onUnmounted
onUnmounted(() => {
console.log('组件销毁')
})
let handleClick = () => {
name.value = 'afdasdfasdfasdf'
}
return {name, handleClick}
},
//配置项api====》变了最后俩
// beforeCreate() {
// },
// created() {
// },
// beforeMount() {
// },
// mounted() {
// },
// beforeUpdate() {
// },
// updated() {
// },
// beforeUnmount() {
// },
// unmounted() {
// }
}
</script>
8 toRef
<template>
<div class="home">
<h1>toRef函数</h1>
{{ name }}---{{ age }}---{{ hobby }}---{{ count }}
</div>
</template>
<script>
import {
ref,
toRefs,
reactive,
} from 'vue'
export default {
name: 'HomeView',
setup() {
let data = reactive({
name: 'lqz',
age: 19,
hobby: '篮球'
})
let count = ref(0)
let xx = {...toRefs(data)} // {name:lqz,age:19,bobby:篮球}
console.log(xx)
// 可以把对象解压
return {...toRefs(data), count} // {name:lqz,age:19,bobby:篮球,count:0}
},
}
</script>
9 setup写法
<template>
<h1>我是首页</h1>
<!-- <div>{{ name }}</div>-->
<!-- <button @click="handleChange">点我变名字</button>-->
<!-- <button @click="load">点我加载</button>-->
<!-- <div v-for="film in filmList">-->
<!-- <p>{{ film.name }}</p>-->
<!-- </div>-->
<!-- <HelloWorld msg="lqz is handsome"></HelloWorld>-->
<!-- <RouterLink to="/about">-->
<!-- <button>点我跳转到about</button>-->
<!-- </RouterLink>-->
<!-- <button @click="handleGo">点我跳转到about</button>-->
<!-- {{ store.count }}-->
<!-- <button @click="handleAdd">点击+1</button>-->
<hr>
<el-button type="primary">Primary</el-button>
<br>
<el-switch v-model="value1"/>
</template>
<script setup lang="js">
//1 以后这里面写的，就相当于 写在setup函数中,现在不需要返回，在template都能用到
// import {ref,reactive} from 'vue'
// let name = ref('lqz')
// let handleChange = () => {
// name.value = 'sadfasdfafs'
// console.log(name)
// }
//2 加载电影数据
// import {ref, reactive} from 'vue'
// import axios from 'axios'
//
// let filmList = reactive([])
//
// //发送ajax
// let load = () => {
// axios.get('http://127.0.0.1:8000/film/').then(res => {
// filmList = res.data.results
// console.log(filmList)
// })
// }
// 3 注册组件
import HelloWorld from '@/components/HelloWorld.vue'
// 4 路由跳转 setup中没有this了---》想用谁，就是导入谁
// this.$router.push() // 用不了了
// import {useRouter, useRoute} from 'vue-router'
//
// const router = useRouter()
// const route = useRoute()
//
//
// let handleGo = () => {
// router.push('/about?name=lqz')
// }
// 5 pinia的使用
// import {useCounterStore} from '@/stores/counter'
// // 可以在组件中的任意位置访问 `store` 变量 ✨
// const store = useCounterStore()
// // console.log(store.count)
// let handleAdd = () => {
// store.count++
// }
// 6 使用elementui
import {ref} from 'vue'
let value1 = ref(true)
</script>
作业
elmentui 登录 显示电影
没登录不允许访问首页--》重定向到登录
