# vue3 比 vue2好，性能提高了，支持ts语法，源码升级，多个一些新的api
# 重点：
组合式API(vue3) 和 配置项API（vue2）
# 学的所有vue2的东西，可以直接写在vue3上，完全支持
Vue3 项目创建
# 创建vue3的项目
-方式一：使用vue-cli创建
-跟创建vue2一模一样
-方式二：使用vite创建(不需要装任何东西)
## 创建工程
npm init vite-app vue3_test2
## 进入工程目录
cd vue3_test2
## 安装依赖
npm install
## 运行
npm run dev常用api之setup
# setup 中可以写变量，写函数，只要reurn了，在模版中就可以使用
setup() {
// 定义变量 const不能改 let 跟var一样
let name = 'lqz'
let age = 19 //
// 定义函数
function handleAdd(){
age=age+1 // 数据变了，页面没变
console.log(age)
}
// 要在模版中使用必须，return出去
return {name,age,handleAdd}
}常用api之ref和reactive
# 上面没有响应式：数据变，页面变，页面变数据变
# 基本数据类型使用ref包裹一下，使之变成响应式
在模版中直接使用
在setup中 使用对象.value获取真正的值
# 对象，数组类型，使用reactive包裹
模版中直接使用
计算和监听属性
# computed 配置项完成计算属性
# watch 配置项完成监听属性
以上的照常用
# 推荐使用组合式api生命周期
# 生命周期变了
vue2 8个生命周期钩子函数
vue3 8个生命周期钩子函数，支持组合式api
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
------下面的变了------
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmountedtoRef
setup() {
const data = reactive({
name: '刘',
age: '清政',
isShow:false
})
// es6语法中的对象解压
return {
...toRefs(data) // 解压开，return了
// name:data.name,
// age:data.age,
// isShow:data.isShow,
}
}常见ES6
var/let/const
<script>
function show(){
if(1==1){
var name = "武沛齐"; //函数作用域=Python
}
consolo.log(name);
}
show();
</script>
<script>
if(1==1){
let age = 19; // 块级作用域
}
console.log(age);
</script>
import { ref } from 'vue'
const info = ref({id: 1, value: 18});
info.value.value = 999;
箭头函数
# 注意：发送网络请求时，回调函数必须要使用箭头函数。
<script>
function f1(name,age){
console.log(name,age);
}
f1("张开",99);
//箭头函数
let f2 = (name,age) =>{
console.log(name,age);
}
f2("张开",99);
</script><script>
var name = "源代码";
let info = {
name: "武沛齐",
func: function () {
console.log(this.name); // 函数内部默认都有this关键字
}
}
info.func();
function getData() {
console.log(this.name); // 函数内部默认都有this关键字，this=window
}
getData();
</script><script>
var name = "源代码";
let info = {
name: "武沛齐",
func: function () {
console.log(this.name); // 函数内部默认都有this关键字,this=info对象
function getData() {
console.log(this.name); // 函数内部默认都有this关键字，this=window
}
getData();
}
}
info.func();
</script><script>
var name = "源代码";
let info = {
name: "武沛齐",
func: function () {
console.log(this.name); // 函数内部默认都有this关键字,this=info对象
let getData = () => {
console.log(this.name); // 函数内部默认都有this关键字
}
getData();
}
}
info.func();
</script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
let info = {
data: null,
send: function () {
axios({
method: "post",
url: "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password",
data: {
username: "alex",
password: "dsb"
},
headers: {
"content-type": "application/json"
}
}).then(function (res) {
console.log(this,res);
this.data = res;
})
}
}
info.send();
</script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
let info = {
data: null,
send: function () {
axios({
method: "post",
url: "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password",
data: {
username: "alex",
password: "dsb"
},
headers: {
"content-type": "application/json"
}
}).then((res) => {
console.log(this,res);
this.data = res;
})
}
}
info.send();
</script>关于环境
.先查看本机node.js版本：
node -v
2.清除node.js的cache：
sudo npm cache clean -f
3.安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"（科学上网）
sudo npm install -g n
4.安装最新版本的node.js
sudo n stable
5.再次查看本机的node.js版本：
node -v关于npm
sudo npm install npm@latest -g
npm config set registry https://registry.npm.taobao.org # npm相当于python的pip 这个的意思就是npm淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org # cnpm：这是要安装的包名，是淘宝团队开发的一个 npm 命令行替代工具创建项目
命令
vue create mysite1如果创建项目出现问题可以参照下面方式处理
修复 .npm 目录权限
sudo chown -R $(whoami) ~/.npm
清理 npm 缓存
npm cache clean --force
可能额外需要设置淘宝镜像（防网络失败）
npm config set registry https://registry.npmmirror.com
如果还是失败，可以手动安装依赖
cd /Users/wen/Desktop/reverse/python/drf/mysite1
npm install --legacy-peer-deps --force
命令创建项目成功如图
评论