【VUE】快速上手

一、快速上手

创建HTML文件+引入vue.js

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>

按照vue.js的语法编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
    <h1>欢迎光临红浪漫，尊贵的VIP：{{ name }}, 余额{{ balance }}</h1>
    <button @click="doCharge">点击充值</button>
    <button @dbclick="doCharge2">双击充值</button>
</div>

<script>javascript">
    var app = Vue.createApp({
        data: function () {
            return {
                name: "cqn",
                balance: 199
            }
        },
        methods:{
            doCharge: function () {
                this.name = 'zkf'
                this.balance = 299
            },
            doCharge2: function () {
                this.balance = this.balance + 1000
            }
        }
    });
    app.mount("#app")
</script>
</body>
</html>

vue语法操作和传统方式页面的操作的区别：

传统方式页面功能：DOM中寻找标签+操作
vue.js的页面功能：js变量 <-> DOM中标签进行双向绑定，修改js中的变量，页面内容会实时发生变化

<div id="city">
    <h1>中国北京</h1>
</div>

<script>javascript">
    v1 = document.getElementById("city")
    v1.innerText="广东深圳"
</script>

二、组合式和选项式

Vue3支持的两种开发模式API：组合式和选项式

选项式：简单，容易上手，需要使用this获取data-return中返回的值

	Vue.createApp({
	    data:...
	    methods:...
	})

组合式：修改变量时同步至页面，变量设置时，需要加Vue.ref(“”)，变量读取时，需要加.value，修改时，也要加.value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
</head>
<body>
<div id="bob">
    <h1>欢迎光临红浪漫，尊贵的VIP：{{ name }}, 余额{{ balance }}</h1>
    <button @click="doCharge">点击充值</button>
    <button @dbclick="doCharge2">双击充值</button>
</div>

<script>javascript">
    var bob = Vue.createApp(
        {
            setup: function () {
                var name = "cqn"
                var balance = Vue.ref(1000)

                var doCharge = function () {
                    balance.value = 9999
                    console.log(name, balance.value)
                }
                var doCharge2 = function () {
                    console.log(name, balance.value)
                }
                return {name, balance, doCharge, doCharge2}
            }
        }
    );
    bob.mount("#bob")
</script>
</body>
</html>

解包

    var Vue = {name: "cqn", age: 19, email: "xxx"}
    var {name, age} = Vue
    console.log(name, age)

	const {createApp, ref} = Vue

导包

import {createApp, ref} from 'ttt.js'

常量和变量
- 变量：var name = “cqn” // 可以被修改 name = ‘zkf’
- 常量：const age = 19 // 不可以被修改 age = 18 -> 不支持
- 常量：const info = { v1:19, v2:30 } // info = {} ->不支持，但是info.v1=18支持