1.Vue-cli和Vite
在浏览器中中直接运行的这种开发方式已经不用了。现在前后台完全分开，那么前端程序需要借助专业的开发工具去做，那么专业开发工具有很多，比如webpack、rollup、尤雨溪搞的vite等，webpack是目前最主流的前端开发工具，叫打包器，就是我们用webpack去开发，开发好以后打个包。脚手架的背后就是在用webpack在打包。
(1) Vue CLI
Vue CLI 4.x以上，Node.js版本 8.9以上
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# 查看版本
vue --version
# 创建项目
vue create hello-world
# 运行
npm run serve
main.js
// vue2
/* import Vue from 'vue'
import App from './App.vue'
new Vue({
render:h=>h(App)
}).$mount("#app") */
// vue3
// 从Vue身上导入createApp()函数
import { createApp } from 'vue'
// 导入App组件
import App from './App.vue'
// 使用createApp()函数根据App组件创建一个Vue实例，并挂载到#app容器中
createApp(App).mount('#app')
(2) Vite
Vite中文网官方
Node.js版本 12.0以上
# 安装Vite
npm init vite@latest
# 安装依赖
npm install
# 运行
npm run dev
# 打包
npm run build
2.计算属性computed
(1) Vue3中依然可以使用Vue2中的编码方式
<div class="child">
<h2>研究一哈计算属性</h2>
<div>姓：<input v-model="firstName" /></div>
<div>名：<input v-model="lastName" /></div>
<!-- <div>姓名：{{ fullName }}</div> -->
<div>姓名：<input v-model="fullName" /></div>
<hr />
<ul>
<li v-for="item in goodses" :key="item.id">
{{ item.name }}--{{ item.price }}
</li>
<li>总价：{{ totalPrice }}</li>
</ul>
</div>
export default {
name: "Child",
data() {
return {
firstName: "张",
lastName: "三",
goodses: [
{ id: 1, name: "苹果", price: 5 },
{ id: 2, name: "普通", price: 8 },
{ id: 3, name: "香蕉", price: 10 },
],
};
},
methods: {},
computed: {
// 计算属性，在定义的时候是函数，使用的时候是属性。
// fullName() {
// console.log("fullName方法执行了");
// return this.firstName + "." + this.lastName;
// },
fullName: {
get() {
console.log("fullName方法执行了");
return this.firstName + "." + this.lastName;
},
set(val){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
},
totalPrice() {
console.log("totalPrice方法执行了");
return this.goodses.map((r) => r.price).reduce((a, b) => a + b, 0);
},
},
};
(2) vue3中全新的编程方式：组合式API
computed计算属性是只读的，不能改。计算属性通常是一个方法，也可以是一个对象。在对象里面写2个方法，一个get：( )=>{ }，一个set：( val )=>{ }
vue3中全新的编程方式：组合式API
导入组合式API
import { ref, reactive,computed } from "vue";
export default {
name: "Child",
setup() {
// 定义姓和名
let firstName = ref("张")
let lastName = ref("三")
// 定义计算属性，返回姓名
let fullName = computed({
// get方法返回值
get:()=>{
return firstName.value+'.'+lastName.value
},
// set方法设置值
set:(val)=>{
let arr = val.split('.')
firstName.value = arr[0]
lastName.value = arr[1]
}
})
// 定义商品
let goodses= reactive([
{ id: 1, name: "苹果", price: 5 },
{ id: 2, name: "普通", price: 8 },
{ id: 3, name: "香蕉", price: 10 },
]);
// 定义计算属性，返回商品的总价
let totalPrice = computed(()=>{
return goodses.map((r) => r.price).reduce((a, b) => a + b, 0);
})
return {
firstName,
lastName,
fullName,
goodses,
totalPrice
};
}
};
3.侦听器
(1) Vue3中依然可以使用Vue2中的编码方式
<div class="child2">
<h2>这里是侦听器</h2>
<div>
薪资：{{ money }}
<button @click="money += 100">加薪</button>
</div>
<div>
学生信息：{{ student }}
<button @click="student.name += '!'">修改姓名</button>
<button @click="student.age += 1">修改年龄</button>
<button @click="student.car.price += 1">修改汽车价格</button>
<button @click="student.plane.price += 1">修改飞机价格</button>
<button @click="student.plane.driver.name = '冰冰'">修改飞机的驾驶员</button>
</div>
</div>
vue2的做法，数据和监听不在一起。
watch：{ 侦听者名字（）}
侦听器如果是一个函数的形式，只有在侦听到数据发生变化时，才会执行。如果，要让侦听器函数在加载时，就立刻执行一次，需要改成对象的形式。
watch：{ 侦听者名字：{ handler(nval, oval) {console.log(nval, oval) } } }
immediate:true 通过设置immediate属性为true，让侦听器立刻执行一次。
<script>
export default {
name: "Child2",
data() {
return {
money: 10000,
student:{
name:'张三',
age:20,
car:{
name:'奔驰',
price:50
}
}
};
},
watch: {
// 侦听器，如果是一个函数的形式，只有在侦听到数据发生变化时，才会执行
// 如果，要让侦听器函数，在加载时，就立刻执行一次，需要改成对象的形式
// money(nval, oval) {
// console.log(nval, oval);
// },
money:{
immediate:true, // 通过设置immediate属性为true，让侦听器立刻执行一次
handler(nval, oval){
console.log(nval, oval);
}
},
student:{
deep:true,
handler(nval, oval){
// 注意：没有办法保留旧值
console.log(nval, oval);
}
}
},
};
</script>
(2) vue3中全新的编程方式：组合式API
watch函数，第一个参数：监听谁，第二个参数：回调函数，第三个参数：配置对象。
watch(
①监听者,
②(nval, oval) => {console.log(nval, oval)} ,
③{ immediate: true }
);
vue3，建议我们，监视对象时，指定监视对象的属性。
注意：第一个参数是一个函数，由该函数返回指定对象中监视的属性。
watch(
①()=>{return student.age},
②(nval,oval)=>{console.log(nval, oval)}
)
如果监视的对象属性，也是一个对象，默认不开启深度监视，需要手动开启。
watch(
①()=>{return student.car},
②(nval,oval)=>{console.log(nval,oval)},
③{deep:true}
)
<script>
// 导入组合式API
import { ref, reactive, watch,watchEffect } from "vue";
export default {
name: "Child2",
setup() {
// 定义薪资
let money = ref(10000);
// watch函数，第一个参数：监听谁，第二个参数：回调函数，第三个参数：配置对象
watch(
money,
(nval, oval) => {console.log(nval, oval)},
{ immediate: true }
);
// 定义学生对象
let student = reactive({
name: "张三",
age: 20,
car: {
name: "奔驰",
price: 50,
},
plane:{
name:'东方',
price:500,
driver:{
name:'彬彬',
age:20
}
}
})
// 监视student的变化
// 注意：监视对象默认开启深度监视，并且无法关闭。所以直接监视整个对象不好。
// watch(
// student,
// (nval,oval)=>{console.log(nval, oval)}
// )
// vue3，建议我们，监视对象时，指定监视对象的属性。
// 注意：第一个参数是一个函数，由该函数返回指定对象中监视的属性
watch(
()=>{return student.age},
(nval,oval)=>{console.log(nval, oval)}
)
// 如果监视的对象属性，也是一个对象，默认不开启深度监视，需要手动开启。
watch(
()=>{return student.car},
(nval,oval)=>{console.log(nval,oval)},
{deep:true}
)
watch(
()=>{return student.plane.driver},
(nval,oval)=>{console.log(nval,oval)},
{deep:true}
)
// watchEffect()监视器，不需要明确的去监视谁，谁在回调函数里面用到了，就监视谁。
// 注意：该回调函数一开始会执行一次。
watchEffect(()=>{
let m = money.value
let n = student.name
console.log(111);
})
return {
money,
student
};
},
};
</script>
网友评论