企业所得税核定征收率_小程序游戏开发公司_个人网页制作教程_创建站点的步骤

一、快速上手

创建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>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>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>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>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>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>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>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>

示例：用户注册

<!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="info.user"></p><p>密码：<input type="text" placeholder="密码" v-model="info.pwd"></p><p>性别：<input type="radio" value="1" v-model="info.gender">男<input type="radio" value="2" v-model="info.gender">女</p><p>城市：<select v-model="info.city"><option value="bj">北京</option><option value="sh">上海</option><option value="sz">深圳</option></select></p><p>部门：<select v-model="info.depart" multiple><option value="11">技术</option><option value="22">财务</option><option value="33">法律</option></select></p><p>爱好：<input type="checkbox" v-model="info.hobby" value="11">篮球<input type="checkbox" v-model="info.hobby" value="22">足球<input type="checkbox" v-model="info.hobby" value="33">羽毛球</p><p>更多：<textarea v-model="info.more"></textarea></p><p><input type="button" value="提交" @click="doSubmit"><input type="button" value="重置" @click="doCancel"></p></div>
</div><script>var app = Vue.createApp({setup: function () {const user = Vue.ref("")const pwd = Vue.ref("")const info = Vue.ref({user: "",pwd: "",gender:"1",city: "",depart: [],hobby: [],more: ""})const doSubmit = function () {console.log(info.value)}return {user, pwd, info, doSubmit}}});app.mount("#app")
</script>
</body>
</html>

3.5 v-for 循环

    <table border="1"><thead><tr><th>ID</th><th>名称</th><th>操作</th></tr></thead><tbody><tr v-for="(item,idx) in cityList"><td>{{ idx + 1 }}</td><td>{{ item }}</td><td><button @click="doEdit(idx)">编辑</button><button @click="doDelete(idx)">删除</button></td></tr></tbody></table>

3.6 v-show和v-if 是否显示

v-show和v-if后跟的变量为true则展示，false则隐藏。
v-show编写的代码会在浏览器中以源码的形式存在，而v-if则不会显示源码。
v-if后可以跟v-else，表示相反的情况下。
v-show后可以跟!变量名，表示相反的情况下。
都是通过display: none来控制代码块是否显示。

    <div v-if="editMode"><input type="text" v-model="editCity"><button @click="doSubmit(idx, editCity)">确定</button><button @click="doCancel()">取消</button></div>

案例：表格操作

<!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>    .hide {display: none;}</style>
</head><body>
<div id="app"><div><input type="text" v-model="newCity"><input type="button" @click="doAdd" value="新增"></div><table border="1"><thead><tr><th>ID</th><th>名称</th><th>操作</th></tr></thead><tbody><tr v-for="(item,idx) in cityList"><td>{{ idx + 1 }}</td><td>{{ item }}</td><td><button @click="doEdit(idx)">编辑</button><button @click="doDelete(idx)">删除</button></td></tr></tbody></table><!--    <div v-bind:class="editArea">--><div v-if="editMode"><input type="text" v-model="editCity"><button @click="doSubmit(idx, editCity)">确定</button><button @click="doCancel()">取消</button></div>
</div><script>const {createApp, ref} = Vuevar app = createApp({setup: function () {const cityList = ref(["北京", "上海", "深圳"])const newCity = ref("")const editCity = ref("")const editMode = ref("")// editIndex变量在页面中不需要使用，即不需要双向绑定，所以无需使用refvar editIndex = -1const doAdd = function () {cityList.value.push(newCity.value)}const doEdit = function (idx) {editMode.value = trueeditCity.value = cityList.value[idx]editIndex = idx}const doSubmit = function () {cityList.value[editIndex] = editCity.valueeditMode.value = false}const doCancel = function () {editMode.value = false}const doDelete = function (idx) {cityList.value.splice(idx, 1)}return {cityList, newCity, editCity, editMode,editIndex, doAdd, doEdit, doCancel, doDelete, doSubmit}}});app.mount("#app")
</script>
</body>
</html>

案例：用户登录
在这里插入图片描述

<!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"><button @click="isSms=false">密码登录</button><button @click="isSms=true">短信登录</button><div v-show="isSms"><h4>短信</h4><p><label>手机号</label><input v-model="smsInfo.phone"/></p><p><label>验证码</label><input v-model="smsInfo.code"/></p></div><div v-show="!isSms"><h4>密码</h4><p><label>手机号</label><input v-model="pwdInfo.phone"/></p><p><label>密码</label><input v-model="pwdInfo.pwd"/></p></div><button @click="doLogin">登录</button>
</div><script>const {createApp, ref} = Vuevar app = createApp({setup: function () {const isSms = ref(true)const pwdInfo = ref({"phone": "","pwd": ""})const smsInfo = ref({"phone": "","code": ""})const doLogin = function (){var dataDict;var url;if (isSms.value) {dataDict = smsInfo.valueurl = "https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile"} else {dataDict = pwdInfo.valueurl = "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password"}console.log(dataDict)}return {isSms, pwdInfo, smsInfo, doLogin}}});app.mount("#app")
</script>
</body>
</html>

练习题：发送网络请求

找到axios并且导入
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

发送请求

    axios({method: "post",url: 'https://api.luf...ord/login/',params: {v1:123,v2:456},data: {name:"xxx",pwd:"123"},headers: {"Content-Type": "application/json"}}).then(function (res) {console.log(res.data);}).catch(function (error) {console.log(error);})

<!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><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head><body>
<div id="app"><button @click="isSms=false">密码登录</button><button @click="isSms=true">短信登录</button><div v-show="isSms"><h4>短信</h4><p><label>手机号</label><input v-model="smsInfo.mobile"/></p><p><label>验证码</label><input v-model="smsInfo.code"/></p></div><div v-show="!isSms"><h4>密码</h4><p><label>手机号</label><input v-model="pwdInfo.username"/></p><p><label>密码</label><input v-model="pwdInfo.password"/></p></div><button @click="doLogin">登录</button>
</div><script>const {createApp, ref} = Vuevar app = createApp({setup: function () {const isSms = ref(true)const pwdInfo = ref({"username": "","password": ""})const smsInfo = ref({"mobile": "","code": ""})const doLogin = function (){var dataDict;var url;if (isSms.value) {dataDict = smsInfo.valueurl = "https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile"} else {dataDict = pwdInfo.valueurl = "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password"}axios({method: "post",url: url,data: dataDict,headers: {"Content-Type": "application/json"}}).then(function (res) {console.log(res.data);}).catch(function (error) {console.log(error);})}return {isSms, pwdInfo, smsInfo, doLogin}}});app.mount("#app")
</script>
</body>
</html>

3.8 v-on 事件简写为@

<h1 v-on:click="..">中国</h1>
<h1 v-on:dbclick="..">中国</h1>
<h1 v-on:mouseover="..">中国</h1><h1 @click="..">中国</h1>

3.9 生命周期

挂载和加载页面

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<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>--><!--    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>--><script src="axios.js"></script><script src="vue.global.prod.js"></script>
</head><body>
<div id="app"><h1 id="v1">中国</h1><ul><li v-for="item in cityList">{{ item }}</li></ul><h1>分类</h1><ul><li v-for="item in categoryList">{{ item.id }} {{ item.name }}</li></ul>
</div><script>const {createApp, ref, onMounted} = Vuevar app = createApp({setup: function () {const cityList = ref(["北京", "上海", "深圳"])const categoryList = ref([])onMounted(function () {console.log("onMounted")axios({method: "get",url: 'https://api.luffycity.com/api/v1/course/roadmap/1/courses?limit=12&offset=0&roadmap_id=1&id=1',headers: {"Content-Type": "application/json"}}).then(function (res) {console.log(res.data.data.result);categoryList.value = res.data.data.result}).catch(function (error) {console.log(error);})})return {cityList, categoryList}}});app.mount("#app")
</script>
</body>
</html>

企业所得税核定征收率_小程序游戏开发公司_个人网页制作教程_创建站点的步骤

一、快速上手

二、组合式和选项式

三、必备基础

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

3.2 插值表达式

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

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

3.5 v-for 循环

3.6 v-show和v-if 是否显示

3.8 v-on 事件简写为@

3.9 生命周期

最新新闻

热搜词

企业所得税核定征收率_小程序游戏开发公司_个人网页制作教程_创建站点的步骤

一、快速上手

二、组合式和选项式

三、必备基础

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

3.2 插值表达式

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

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

3.5 v-for 循环

3.6 v-show和v-if 是否显示

3.8 v-on 事件 简写为@

3.9 生命周期

最新新闻

热搜词

3.8 v-on 事件简写为@