Vue3 入门
Vue3 入门
Vue3 入门

setup的参数 setup(props, context) / setup(props, {attrs, slots, emit})

Demo_1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app"></div>
<script src="./vue.global.js"></script>
<script>
    const app = Vue.createApp({
        setup(propos,context) {
            return {
                msg:"hello world"
            };
        },
        template:`
            <div>{{msg}}</div>
        `
    }).mount("#app")
</script>

Demo_2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
    <div>{{msg1}}___{{msg2}}___{{msg3}}___{{msg4}}</div>
</div>
<script src="./vue.global.js"></script>
<script>
    const app = Vue.createApp({
        setup(propos, context) {
            let msg1 = "hello world";
            let msg3 = Vue.ref("fei22");

            const {ref} = Vue;
            let msg4 = ref("fei33");
            return {
                msg1,
                msg2:"daFei",
                msg3,
                msg4
            };
        },
    }).mount("#app");
</script>

ref

  1. ref 是响应式
  2. 若果ref定义的是复杂对象,内部会转为reactive,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <div>{{msg4}}</div>
    <button @click="updateFei">更新</button>
</div>
<script src="./vue.global.js"></script>
<script>
    const {ref} = Vue;
    const app = Vue.createApp({
        setup(propos, context) {
            // const {ref} = Vue;
            let msg4 = ref(1);

            function updateFei() {
                msg4.value = msg4.value + 1;
            }

            return {
                msg4,
                updateFei
            };
        },
    }).mount("#app");
</script>

reactive

reactive 里面的对象都是响应式,
添加对象也是响应式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="app">
    <div>
        <p>{{msg4.name}}</p>
        <p>{{msg4.web.name3}}</p>
    </div>
    <button @click="updateFei">更新</button>
</div>
<script src="./vue.global.js"></script>
<script>
    const {reactive} = Vue;
    const app = Vue.createApp({
        setup(propos, context) {
            let msg4 = reactive({
                name:"daFei",
                age: 18,
                web:{
                    name:"HTML",
                    name2:"CSS",
                    name3:"JavaScript",
                }
            });

            function updateFei() {
                msg4.name = msg4.name + "_1";
                msg4.web.name3 = msg4.web.name3 + "_1";
                
                // delete msg4.name;  删除对象中属性
            }

            return {
                msg4,
                updateFei
            };
        },
    }).mount("#app");
</script>

全局变量

1
2
3
4
5
6
7
8
9
// 定义全局变量
app.config.globalProperties.$fei = "我是全局变量";
// 访问全局变量
import {onMounted, getCurrentInstance} from 'vue'
getCurrentInstance().appContext.config.globalProperties.$fei

// 这2中方式都可以获取全局变量
const app = getCurrentInstance().appContext.config.globalProperties;
const { proxy } = getCurrentInstance()

调用子组件方法

1
2
3
4
5
6
7
8
9
10
11
12
13
// 父组件调用子组件方法,需要在子组件中暴露出去哪个方法可以调用defineExpose
// <script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

// 这2个方法可以在父组件调用
defineExpose({
  a,
  b
})
// </script>

defineExpose

插槽

1
2
// 具名插槽的缩写
// demo:  v-slot:foo 可以被重写为 #foo
1
2
3
4
5
6
7
8
9
10
11
<!-- element-plus   步骤条,插槽使用-->
<el-steps >
  <el-step title="Step 1" />
  <el-step title="Step 2" >
    <template #description>
      <div>
        <span style="color: red">这里使用插槽 aaaaa</span>
      </div>
    </template>
  </el-step>
</el-steps>

自定义hooks 函数

1
2
3
4
5
6
7
8
9
// 单页面中 hooks 简单使用---简单demo
const useFeiHooks = () => {
  const foo = () => {
    console.log("使用hooks,调用成功");
  }
  return {foo}
}

const {foo} = useFeiHooks();

绑定CSS

1
2
3
4
5
6
7
<div :style="{background:`linear-gradient(${bar})`}">
    <div style="width: 100px;height: 100px"></div>
</div>
<script setup>
    import {ref} from "vue";
	const bar = ref("138deg, #3BECF2 0%, #4A84FF 100%"); // 背景渐变色
</script>

使用图标库

在Vue3中使用FontAwesome图标库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 安装
npm i --save @fortawesome/vue-fontawesome@prerelease
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

// 全局使用
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";
library.add(faPhone);
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

createApp(App).component("font-awesome-icon", FontAwesomeIcon) .mount("#app");

// 显示图标
// <FontAwesomeIcon icon="phone" />
// <FontAwesomeIcon icon="heart" />
// <FontAwesomeIcon icon="home" />
//**** 另一种写法
// <FontAwesomeIcon :icon="['fas','home']" />


// ********** 单页面中加载使用 ********** 
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone,faHeart,faHome } from "@fortawesome/free-solid-svg-icons";
// library.add({faPhone,faHeart,faHome}) 一次加载多个
library.add(faPhone) // 单个加载
library.add(faHeart)
library.add(faHome)
// 显示图标
// <FontAwesomeIcon icon="phone" />
// <FontAwesomeIcon icon="heart" />
// <FontAwesomeIcon icon="home" />

简单封装

1
2
3
4
5
6
7
8
9
10
11
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import * as fontIconModules from "@fortawesome/free-solid-svg-icons";
import {useIcon} from "@/utils/fontAwesomeIconUtils";
const iconObj = {...fontIconModules};

for (const iconObjKey in iconObj) {
  // 这个循环最后有个字符串 prefix
  if (Object.prototype.toString.call(iconObj[iconObjKey]) === "[object Object]") {
    library.add(iconObj[iconObjKey])
  }
}

Vue3+TS 其他资料