【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 = 9999console.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} = Vueconsole.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支持

三、必备基础

3.1 响应式基础（针对组合式API）

变量/常量，不支持修改

ref，可以将值变成属性进行修改
const name = ref(“cqn”)
name.value 获取值
name.value = ? 赋值

var bob = Vue.createApp({setup: function () {var name = Vue.ref("cqn")var balance = Vue.ref(1000)var info = Vue.ref({"size": 18,"city": "北京"})var doChange = function () {name.value = 'zkf'balance.value = 9999info.value.size = 8888info.value.city = "深圳"info.value = {"size": 188,"city": "广州"}}return {name, balance, info, doChange}}}
);
bob.mount("#bob")

reactive
const info = reactive({v1:123,v2:456})
info.v1 获取值
info.v2
info.v1 = ? 赋值
info.v2 = ?
info = {v1:777,v2:777} -不支持被整体替换
注意：只支持字典、列表等对象，不支持存放数字、字符串；无法被整体替换

3.2 插值表达式

<div id="bob"><h1>欢迎光临红浪漫，尊贵的VIP：{{ name }}, 余额{{ balance }}</h1><h1>{{ info.size }}</h1><h1>{{ info.city }}</h1><h1> {{ "cqn" }}</h1><h1> {{ "cqn" + "zkf" }}</h1><h1> {{ 100 + 200 }}</h1><h1>{{ balance > 500 ? "cqn" : "zkf" }}</h1><button @click="doChange">修改</button>
</div><script>javascript">var bob = Vue.createApp({setup: function () {var name = Vue.ref("cqn")var balance = Vue.ref(10)var info = Vue.reactive({"size": 18,"city": "北京"})var doChange = function () {info.size = 8888info.city = "深圳"balance.value = balance.value + 100}return {name, balance, info, doChange}}});bob.mount("#bob")
</script>

3.3 v-bind：对标签的属性进行操作

class = “[green pink]”
src = ?
style = “color:red; font-size:30px”

<!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><style>.red {border: 5px solid red;}</style>
</head>
<body>
<div id="app"><h1 v-bind:class="[green,pink]">北京</h1><h1 v-bind:class="[1===1?green:pink,cls]">上海</h1><h1 style="color:red; font-size:30px">深圳</h1><h1 v-bind:style="{color:'red', fontSize:'60px'}">广州</h1><img v-bind:src="url" v-bind:class="cls"><button @click="doChange">更换</button>
</div><script>javascript">var app = Vue.createApp({setup: function () {var url = Vue.ref("https://hcdn2.luffycity.com/media/frontend/index/0Python.png")var cls = Vue.ref("")var green = Vue.ref("green")var pink = Vue.ref("pink")var doChange = function () {url.value = "https://hcdn2.luffycity.com/media/frontend/course/%E5%88%97%E8%A1%A8%E5%9B%BE_D2emrko.png"cls.value = "red"}return {url, cls, green, pink, doChange}}});app.mount("#app")
</script>
</body>
</html>

3.4 v-model：用于用户交互的标签：input、select、textarea等

在JS代码中定义变量，HTML语法v-model绑定变量进行展示；用户输入数据，JS代码中的变量跟着变化【双向绑定】

选项式API：v-model指令
组合式API：v-model指令 + ref/reactive

<body>
<div id="app"><h1>{{ city }}</h1><input type="text" placeholder="请输入用户名：" v-model="user"><h1>{{ user }}</h1>
</div><div id="bob"><h1>{{ city }}</h1><input type="text" placeholder="请输入用户名：" v-model="user"><h1>{{ user }}</h1>
</div><script>javascript">var app = Vue.createApp({setup: function () {var city = Vue.ref("北京")var user = Vue.ref("cqn")// var user = "cqn"return {city, user}}});app.mount("#app")var bob = Vue.createApp({data: function () {return {city: "上海",user: "zkf"}}});bob.mount("#bob")
</script>
</body>

示例：输入框绑定
在这里插入图片描述

<!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><style>.box {width: 400px;height: 200px;margin: 200px auto;border: 1px solid #ddd;}</style>
</head>
<body>
<div id="app"><div class="box"><h3>用户登录</h3><p>
<!--            <input type="text" placeholder="用户名" v-model="user">--><input type="text" placeholder="用户名" v-model="info.user"></p><p>
<!--            <input type="text" placeholder="密码" v-model="pwd">--><input type="text" placeholder="密码" v-model="info.pwd"></p><p><input type="button" value="提交" @click="doSubmit"><input type="button" value="重置" @click="doCancel"></p></div>
</div><script>javascript">var app = Vue.createApp({setup: function () {const user = Vue.ref("")const pwd = Vue.ref("")const info = Vue.ref({user: "",pwd: ""})const doSubmit = function () {// console.log(user.value, pwd.value)console.log(info.value)}const doCancel = function () {// user.value = ""// pwd.value = ""info.value.user = ""info.value.pwd = ""}return {user, pwd, info, doCancel, doSubmit}}});app.mount("#app")
</script>
</body>
</html>