国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<source id="46xqf"></source>

<code id="46xqf"><strong id="46xqf"></strong></code>

<span id="46xqf"><pre id="46xqf"></pre></span>

<blockquote id="46xqf"><form id="46xqf"></form></blockquote>

<span id="46xqf"><legend id="46xqf"><button id="46xqf"></button></legend></span>

前端技術(shù)Html，Css，JavaScript，Vue3

2年前作者：xwj1992930分類：Toy博客閱讀(52)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了前端技術(shù)Html，Css，JavaScript，Vue3。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

Html

1.基本標(biāo)簽

<h1>最大的標(biāo)題</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的標(biāo)題</h6>
 
<p>這是一個(gè)段落。</p>
<br> （換行）
<hr> （水平線）
<!-- 這是注釋 -->

2.文本格式化

<b>粗體文本</b>
<code>計(jì)算機(jī)代碼</code>
<em>強(qiáng)調(diào)文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd> 
<pre>預(yù)格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （縮寫）
<address> （聯(lián)系信息）
<bdo> （文字方向）
<blockquote> （從另一個(gè)源引用的部分）
<cite> （工作的名稱）
<del> （刪除的文本）
<ins> （插入的文本）
<sub> （下標(biāo)文本）
<sup> （上標(biāo)文本）

3.鏈接

普通的鏈接：<a href="http://www.example.com/">鏈接文本</a>
圖像鏈接： <a href="http://www.example.com/"><img decoding="async" src="URL" alt="替換文本"></a>
郵件鏈接： <a href="mailto:webmaster@example.com">發(fā)送e-mail</a>
書簽：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

4.圖片

<img decoding="async" loading="lazy" src="URL" alt="替換文本" height="42" width="42">

5.無(wú)序列表

<ul>
    <li>項(xiàng)目</li>
    <li>項(xiàng)目</li>
</ul>

6.有序列表

<ol>
    <li>第一項(xiàng)</li>
    <li>第二項(xiàng)</li>
</ol>

7.表格

<table border="1">
  <tr>
    <th>表格標(biāo)題</th>
    <th>表格標(biāo)題</th>
  </tr>
  <tr>
    <td>表格數(shù)據(jù)</td>
    <td>表格數(shù)據(jù)</td>
  </tr>
</table>

8.表單

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>蘋果</option>
<option selected="selected">香蕉</option>
<option>櫻桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

Css

1.選擇器

/*id選擇器*/
#p {
    text-align:center;
    color:black;
    font-family:arial;
}
/*class選擇器*/
.center {text-align:center;}

2.文本和字體

h1 {text-align:center;}
p.date {text-align:right;}

h1 {font-size:40px;}

3.鏈接

a:link {color:#000000;}      /* 未訪問鏈接*/
a:visited {color:#00FF00;}  /* 已訪問鏈接 */
a:hover {color:#FF00FF;}  /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color:#0000FF;}  /* 鼠標(biāo)點(diǎn)擊時(shí) */

4.隱藏

h1.hidden {display:none;}

5.定位position

p.pos_fixed
{
    position:fixed;   /* 元素的位置相對(duì)于瀏覽器窗口是固定位置 */
    position:relative; /* 相對(duì)定位元素的定位是相對(duì)其正常位置 */
    position:absolute; /*絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于<html>*/
}

6.浮動(dòng)

/*使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列*/
img
{
    float:right;
}

7.對(duì)齊

margin: auto;
text-align: center;
/*依據(jù)實(shí)際情況還可以使用position: absolute，margin，padding，float 實(shí)現(xiàn)*/

8.圖像

img
{
  opacity:0.4;  /* 透明度 */
}
img:hover  /* 懸停 */
{
  opacity:1.0;
}

JavaScript

1.輸出

window.alert("") //彈出警告框。
document.write("") //方法將內(nèi)容寫到 HTML 文檔中。
document.getElementById("demo").innerHTML = "段落已修改。" //寫入到 HTML 元素。
console.log("") //寫入到瀏覽器的控制臺(tái)

2.函數(shù)

function myFunction(a,b){
	// var定義的變量可以修改，如果不初始化會(huì)輸出undefined，不會(huì)報(bào)錯(cuò)
	var obj = {name:"Fiat", model:500, color:"white"};
	//const定義的變量不可以修改，而且必須初始化。
	const s = "s";
    return a*b;
}

3.常用事件

onchange	//HTML 元素改變
onclick	//用戶點(diǎn)擊 HTML 元素
onmouseover	//鼠標(biāo)指針移動(dòng)到指定的元素上時(shí)發(fā)生
onmouseout	//用戶從一個(gè) HTML 元素上移開鼠標(biāo)時(shí)發(fā)生
onkeydown	//用戶按下鍵盤按鍵
onload	//瀏覽器已完成頁(yè)面的加載

4.DOM

var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");

5.改變Html

document.getElementById("p1").innerHTML="新文本!"; // 改變html
document.getElementById(id).attribute="新屬性值"; // 改變屬性
document.getElementById(id).style.property="新樣式" // 改變CSS

6.DOM 元素 (節(jié)點(diǎn))

尾部創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - appendChild()
頭部創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - insertBefore()
移除HTML 元素 - removeChild()
替換 HTML 元素 - replaceChild()

var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

7.字符串

str.match("world");
str.replace("Microsoft","Runoob");

8.彈框

alert("你好，我是一個(gè)警告框！"); // 警告框
var r=confirm("按下按鈕");
if (r==true){}else{} // 確認(rèn)框
var person=prompt("請(qǐng)輸入你的名字","Harry Potter");
if (person!=null && person!=""){} // 提示框

Vue

參考代碼：https://gitee.com/xwj920930/vue-base

創(chuàng)建Vue工程

模板語(yǔ)法

文本插值，原始 HTML，Attribute 綁定，動(dòng)態(tài)參數(shù)

<template>
  <p>{{ msg + '!' }}</p>
  <div v-html="vhtml"></div>
  <div :id="bindId"></div>
  <button :disabled="isButtonDisabled">Button</button>
  <div v-bind="objectOfAttrs"></div>
  <button @click="clk()">按鈕</button>
  <hr>
  <a :[attr]="123">動(dòng)態(tài)參數(shù)</a>
</template>

<script setup>
import { ref } from 'vue';


const msg = ref("hello world");
const vhtml = '<span style="color: red">This should be red.</span>';
const bindId = "divid";
const isButtonDisabled = true;
const attr = 'href';
const objectOfAttrs = {
  id: 'divid',
  class: 'wrapper'
}
function clk(){
  msg.value='clik !';
}
</script>
<style>
#divid{
  background: blue;
  width: 100px;
  height: 100px;
}
.wrapper{
  margin: 50px;
}
</style>

響應(yīng)式基礎(chǔ)

<template>
  <p>{{ reactiveMsg.msg + '!' }}</p>
  <p>{{ refMsg }}</p>
  <button @click="clk()">按鈕</button>
</template>

<script setup>
import { reactive, ref } from 'vue';

// ref用于普通類型，使用需要.value；reactive用于復(fù)雜類型（對(duì)象類型），使用不需要.value
// 建議優(yōu)先使用ref，reactive某些情況會(huì)失去響應(yīng)，參考https://blog.csdn.net/m0_57033755/article/details/129043116
const reactiveMsg = reactive({'msg':'hello world'});
const refMsg = ref('123');
function clk(){
  reactiveMsg.msg='clik !';
  refMsg.value = 'clik!';
}
</script>

計(jì)算屬性

<template>
  <p>{{ msg }}</p>
  <p>{{ reverseMsg }}</p>
</template>

<script setup>
// 計(jì)算屬性，相比于method有緩存
const msg = 'hello world';
const reverseMsg = computed(()=>{
  return msg.split('').reverse().join('');
})
</script>

偵聽器

<template>
  <p>{{ msg }}</p>
  <input type="text" v-model="msg">
  <p>{{ obj.age }}</p>
  <button @click="obj.age = 11">改變msg</button>
</template>

<script setup>
import { ref, watch, reactive } from "vue";

const msg = ref('hello world');
const obj = reactive({ count: 0,age: 1,name:'qwe' })
// watch監(jiān)聽器，當(dāng)某一個(gè)值改變時(shí)進(jìn)入
watch(msg, (newValue, oldValue) => {
  console.log(oldValue);
  console.log(newValue);
})
// 加上immediate代表初始化也會(huì)進(jìn)入
watch(msg, (newValue, oldValue) => {
  console.log(oldValue);
  console.log(newValue);
},  { immediate: true })
// 監(jiān)聽對(duì)象時(shí)，自動(dòng)為深度監(jiān)聽，監(jiān)聽每一個(gè)屬性變化，影響性能
watch(obj, (newValue, oldValue)=>{
  console.log(newValue);
})
// 監(jiān)聽對(duì)象某一個(gè)屬性
watch(() => obj.age, (newValue, oldValue) => {
  console.log(newValue);
})
</script>

Class 與 Style 綁定

<template>
  <p :class="{font : true}">hello</p>
  <!-- 推薦使用駝峰命名 -->
  <p :style="{color : 'red', fontSize : '50px'}">hello!!!</p>
</template>

<script setup>
</script>

<style>
.font{
  font-size: large;
  color: blue;
}
</style>

條件渲染

<template>
  <p v-if="type == 'A'">A</p>
  <p v-else-if="type == 'B'">B</p>
  <p v-else >C</p>
  <input type="text" v-model="type">
  <!-- 因?yàn)関-if是一個(gè)指令，他必須依附于某個(gè)元素。如果我們想要切換不止一個(gè)元素 <template> 元素上使用 v-if，
    這只是一個(gè)不可見的包裝器元素，最后渲染的結(jié)果并不會(huì)包含這個(gè) <template> 元素 -->
  <template v-if="true">
    <p>111</p>
    <p>111</p>
    <p>111</p>
  </template>
  <p v-show="true">hello!!!</p>
</template>

<script setup>
import { ref } from "vue";

const type = ref('A')
</script>

列表渲染

<template>
  <ul>
    <li v-for="person in persons" :key="person">{{ person }}</li>
  </ul>
  <button @click="addItem()">增加元素</button>
  <ul>
    <li v-for="(person,index) in persons" :key="index">{{ person }} -> {{ index }}</li>
  </ul>
  <ul>
    <li v-for="obj in objs" :key="obj.name">{{ obj.name }} : {{ obj.age }}</li>
  </ul>
</template>

<script setup>
import { reactive } from "vue";

const persons = reactive(['aaa','bbb','ccc']);
const objs = [{'name':'qqq','age':1},{'name':'www','age':2}]
function addItem(){
  // 數(shù)組變化
  // push() 末尾添加
  // pop() 末尾刪除
  // shift() 首位刪除
  // unshift() 首位添加
  // splice() 刪除，插入，替換
  // sort() 排序
  // reverse() 反轉(zhuǎn)
  persons.push('ddd');
}
</script>

事件處理

<template>
{{ count }}  
<button @click="count++">add 1</button>
<button @click="addNum(10)">add 10</button>
<!-- 只傳遞event對(duì)象時(shí)，方法不要加上() -->
<button @click="eventClik">event</button>
<button @click="eventClik2(5, $event)">event2</button>
<!--多事件處理-->
<button @click="addNum(1), addNum(2)">多事件處理+3</button>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);
function addNum(num){
  count.value += num;
}
function eventClik(event){
  alert('hello ' + count.value)
  console.log(event);
}
function eventClik2(num, event){
  count.value += num;
  console.log(event);
}
</script>

事件修飾符

<template>
  <div @click="divClick">
    <!-- stop：阻止事件冒泡 -->
    <button @click.stop="btnClick">按鈕</button>
  </div>
  <div>
    <form action="">
       <!-- prevent：阻止默認(rèn)行為 -->
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
     <!-- once：只觸發(fā)一次 -->
    <button @click.once="btnClick">點(diǎn)擊一次</button>
    <div>
      <!-- keyup.enter：鍵盤事件，enter回彈時(shí)觸發(fā) -->
      <input type="text" @keyup.enter="keyUp">
    </div>
  </div>
</template>

<script setup>
function divClick(){
  alert('父元素');
}
function btnClick(){
  alert('子元素')
}
function submitClick(){
  alert('提交成功');
}
function keyUp(){
  alert('回車確定');
}
</script>

表單輸入綁定

<template>
  <p>文本：{{ textMessage }}</p>
  <input type="text" v-model="textMessage">
  <div>
    <!-- 單個(gè)復(fù)選框，v-model綁定boolean，代表是否勾選 -->
    <input type="checkbox" v-model="checked">
    {{ checked }}
  </div>
  <div>
    <p>選取角色：{{ users }}</p>
    <!-- 多個(gè)復(fù)選框，需要設(shè)置value，v-model綁定value -->
    <input type="checkbox" id="tom" value="Tom" v-model="users">
    <!-- label可以用來配合input的id，和直接使用字符串沒區(qū)別 -->
    <label for="tom">Tom</label>
    <input type="checkbox" id="rose" value="Rose" v-model="users">
    Rose
    <input type="checkbox" id="jerry" value="Jerry" v-model="users">
    Jerry
  </div>
  <div>
    <p>pick: {{ picked }}</p>
    <!-- 單選按鈕，需要設(shè)置value否則返回on，v-model綁定value，可以省略name -->
    <input type="radio" id="one" value="One" v-model="picked">
    One
    <input type="radio" id="two" value="Two" v-model="picked">
    Two
  </div>
  <div>
    <p>選擇：{{ english }}</p>
    <!-- 選擇器單選，value可以省略 -->
    <select v-model="english">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
  <div>
    <p>選擇水果：{{ fruits }}</p>
    <!-- 選擇器多選，value可以省略 -->
    <select v-model="fruits" multiple>
      <option>蘋果</option>
      <option>香蕉</option>
      <option>橘子</option>
    </select>
  </div>
</template>

<script setup>
import { ref } from "vue";

const textMessage = ref('文本');
const checked = ref(false);
const picked = ref('');
const english = ref('A');
const users = ref([]);
const fruits = ref([]);
</script>

v-model修飾符

.lazy 懶加載，失去焦點(diǎn)再更新
.number 輸出變?yōu)閿?shù)字類型
.trim 去除兩端空格

父子組件相互傳值

父組件：

<template>
  <!-- 使用組件，傳遞參數(shù)；此處:msg父?jìng)髯樱籃parentValue子傳父 -->
  <hello :msg="msg" @parentValue="getValue"></hello>
</template>

<script setup>
// 引入組件
import hello from './components/hello.vue';
const msg = 'app.vue';
// 子組件自定義事件對(duì)應(yīng)方法
function getValue(value){
  alert(value);
}
</script>

子組件：

<template>
    <div>hello</div>
    {{ msg }}
    <div>
        <button @click="sendMsgToParent">監(jiān)聽事件傳遞子組件參數(shù)到父組件</button>
    </div>
</template>
<script setup>
// 使用父組件傳遞的參數(shù)
defineProps(['msg']);
// 使用自定義組件實(shí)現(xiàn)子傳父
const emit = defineEmits(['parentValue']);
function sendMsgToParent(){
    emit('parentValue', 'from son');
}
</script>

父子組件相互獲取值

父組件：

<template>
  <!-- ref可以用來獲取該頁(yè)面dom元素和子組件數(shù)據(jù) -->
  <hello ref="helloComponent"></hello>
  <div ref="div"><span></span></div>
</template>

<script setup>
import hello from './components/hello2.vue';
import { onMounted, provide, readonly, ref } from 'vue';
// ref獲取dom元素需要先定義
let helloComponent = ref(null);
const div = ref('');
onMounted(() => {
  console.log(helloComponent.value.msg);
  console.log(div.value);
})
// 子獲取父數(shù)據(jù)需要用到provide/inject，setup語(yǔ)法糖只支持一次provide一個(gè)變量,readonly只讀
provide('div', readonly(div));
</script>

子組件：

<template>
    {{ msg }}
</template>
<script setup>
import { inject, onMounted, ref } from 'vue';

let msg = '子組件';
// 獲取父組件provide的值
const div = inject('div');
// setup語(yǔ)法糖寫法下組件是默認(rèn)私有的，defineExpose就是setup語(yǔ)法糖寫法中將特定屬性、方法顯式暴露的宏指令。
// 只有在子組件通過defineExpose顯式暴露的屬性、方法才能被父組件通過ref獲取并使用。
// 需要注意defineExpose必須寫在聲明好的屬性、方法之下，否則會(huì)報(bào)錯(cuò)！
defineExpose({
    msg
});
onMounted(() => {
    console.log(div.value);
})
</script>

插槽

父組件：

<template>
  <hello>
    <!-- 不取名字直接使用 -->
    <span>123123</span>
    <!-- 取名字的插槽需要template包裹 -->
    <template v-slot:msg>
      <h4>來自父組件的信息</h4>
    </template>
    <template v-slot:btn>
      <button>按鈕</button>
    </template>
  </hello>
</template>

<script setup>
import hello from './components/hello3.vue';
</script>

子組件：

<template>
    <div>
        <!-- 插槽相當(dāng)于占位符 -->
        <slot></slot>
        <slot name="msg"></slot>
        <slot name="btn"></slot>
    </div>
</template>

路由

安裝vue路由：

npm install vue-router@4

視圖組件包含：
views/Home.vue
views/Error.vue
views/About.vue:

<template>
    <h1>About</h1>
</template>
<script setup>
import { onMounted } from "vue";
import {useRoute} from 'vue-router'

onMounted(() =>{
    alert(useRoute().params.id)
})
</script>

router/index.js:

import {createRouter, createWebHashHistory} from 'vue-router'
// 導(dǎo)入路由組件
import Home from '../views/Home.vue' 
import About from '../views/About.vue'
// 404頁(yè)面
import Error from '../views/Error.vue'
// 路由映射
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    // :id傳參， 傳參還可以使用props，接收端需要使用defineProps
    {path: '/about/:id', component: About},
    // 匹配所有路徑
    {path: '/:path(.*)', component: Error}
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 導(dǎo)出，其他組件才能引入
export default router

main.js:

import router from './router'

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// router必須放在app前面
app.use(router)
app.mount('#app')

App.vue:

<template>
  <div>
    <h1>Hello App!</h1>
    <!-- 底層為a標(biāo)簽 -->
    <router-link to="/">Go to Home</router-link>
    <div></div>
    <router-link to="/about/123">Go to About</router-link>
    <!-- 視圖渲染在這里 -->
    <router-view></router-view>
  </div>
</template>

嵌套路由

views/Parent.vue:

<template>
    <h1>Parent</h1>
    <router-link to="/parent/children1">Go to Children1</router-link>
    <div></div>
    <router-link to="/parent/children2">Go to Children2</router-link>
    <router-view></router-view>
</template>

index.js:

import { createRouter, createWebHashHistory } from 'vue-router'
// 導(dǎo)入路由組件
import Parent from '../views/Parent.vue'
import Children1 from '../views/Children1.vue'
import Children2 from '../views/Children2.vue'
// 路由映射
const routes = [
    {
        path: '/parent',
        component: Parent,
        children: [
            {
                path: 'children1',
                component: Children1
            },
            {
                path: 'children2',
                component: Children2
            }
        ]
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 導(dǎo)出，其他組件才能引入
export default router

使用js實(shí)現(xiàn)路由

<template>
    <h1>Page</h1>
    <button @click="pageClk">跳轉(zhuǎn)按鈕</button>
</template>
<script setup>   
import {useRouter} from 'vue-router'

// useRouter一定要放在setup方法內(nèi)的頂層，否則作用域改變useRouter()執(zhí)行返回的是undefined
const router = useRouter();
function pageClk(){
    // js方法實(shí)現(xiàn)路由跳轉(zhuǎn)
    router.push('/parent');
}
</script>

命名視圖

同時(shí) (同級(jí)) 展示多個(gè)視圖
views/Top.vue
views/Main.vue
views/Foot.vue

index.js:

import { createRouter, createWebHashHistory } from 'vue-router'
// 導(dǎo)入路由組件
import top from '../views/Top.vue'
import main from '../views/Main.vue'
import foot from '../views/Foot.vue'
// 路由映射
const routes = [
    {
        path: '/name',
        components: {
            default: main,
            top,
            foot
        }
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 導(dǎo)出，其他組件才能引入
export default router

App.vue:

<template>
  <div>
    <h1>Hello App!</h1>
    <router-link to="/name">Go to 命名視圖</router-link>
    <router-view name="top"></router-view>
    <router-view></router-view>
    <router-view name="foot"></router-view>
  </div>
</template>

路由守衛(wèi)

index.js:
常用來做路由間跳轉(zhuǎn)的判斷，規(guī)定用戶或權(quán)限

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

Proxy跨域

安裝axios：

npm install axios

vite.config.js:

import { defineConfig } from 'vite'
export default defineConfig({
  server: {
    proxy: {
      '/path': {
        target: 'https://i.maoyan.com', // 替換地址
        changeOrigin: true, // 開啟跨域
        rewrite: path => path.replace(/^\/path/, '') // 重寫路徑
      }
    }
  }
})

使用方：

<script setup>
import  axios from 'axios';
// 訪問域名 https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E6%88%90%E9%83%BD&ci=59&channelId=4
axios.get('/path/api/mmdb/movie/v3/list/hot.json?ct=%E6%88%90%E9%83%BD&ci=59&channelId=4').then((res) => {
  console.log(res);
})
</script>

axios和后端通信

<template>
  <div>
    {{ data }}
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';

const data = ref('')

onMounted(() => {
  // 考慮跨域
  axios.get('/local/page-helper/').then(function(res){
        //.then()表示成功的回調(diào)
        console.log(res.data) 
        data.value = res.data
    })
})
</script>

Vue3狀態(tài)管理

存儲(chǔ)文件：

import { reactive } from "vue";

export const store = reactive({
    count: 0,
    increment(){
        this.count++
    }
})

調(diào)用方：

<template>
  <div>
    <span>{{ store.count }}</span>
  </div>
  <button @click="store.increment">按鈕</button>
</template>

<script setup>
import { store } from './store/index';
</script>

Pinia狀態(tài)管理

安裝Pinia：

npm install pinia

main.js:

import {createPinia} from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

store.js:

import {defineStore} from 'pinia'
import {ref, computed} from 'vue'

// 按照規(guī)范返回值使用use***Store，defineStore第一個(gè)參數(shù)必須獨(dú)一無(wú)二
export const useAgeStore = defineStore('ageStore', () => {
    const age = ref(0) // state
    function addAge(){ //actions
        age.value ++
    }
    const getAge = computed(() => { // getter
        return age.value + 5
    })
    return { age, addAge, getAge}
})

使用：文章來源地址http://www.zghlxwxcb.cn/news/detail-643703.html

<template>
  <div>
    {{ ageStore.age }}
    {{ ageStore.getAge }}
  </div>
  <button @click="ageStore.addAge">add</button>
</template>

<script setup>
import {useAgeStore} from './store/ageStore';

const ageStore = useAgeStore()
</script>

到了這里，關(guān)于前端技術(shù)Html，Css，JavaScript，Vue3的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

[HTML]Web前端開發(fā)技術(shù)26（HTML5、CSS3、JavaScript ）JavaScript基礎(chǔ)——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦?。?！喵喵喵，你對(duì)我真的很重要！目錄前言數(shù)據(jù)類型數(shù)據(jù)類型-字符型數(shù)據(jù)類型-數(shù)值型數(shù)據(jù)類型-布爾型數(shù)據(jù)類型-其它類型變量轉(zhuǎn)義字符運(yùn)算
2024年02月20日
瀏覽(34)
[HTML]Web前端開發(fā)技術(shù)9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦?。。?喵喵喵，你對(duì)我真的很重要！目錄前言 CSS顏色與背景顏色color屬性背景background屬性 1. 背景顏色background-color 2. 背景圖像background-image 3. 背景
2024年02月03日
瀏覽(39)
[HTML]Web前端開發(fā)技術(shù)12（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦！?。?喵喵喵，你對(duì)我真的很重要！目錄前言網(wǎng)頁(yè)標(biāo)題：三列自適應(yīng)寬度網(wǎng)頁(yè)標(biāo)題：多行三列自適應(yīng)寬度一級(jí)水平導(dǎo)航菜單：采用“無(wú)序列表+超
2024年01月16日
瀏覽(68)
[HTML]Web前端開發(fā)技術(shù)5.2（HTML5、CSS3、JavaScript ）CSS基礎(chǔ)，decoration，selector，properties，Cascading——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦?。。?喵喵喵，你對(duì)我真的很重要！目錄前言 CSS基礎(chǔ) CSS繼承與層疊使用CSS控制Web頁(yè)面 CSS選擇器類型 CSS選擇器聲明課后練習(xí) 應(yīng)用CSS鏈接外部樣式
2024年02月05日
瀏覽(49)
[HTML]Web前端開發(fā)技術(shù)8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦！?。?喵喵喵，你對(duì)我真的很重要！目錄前言 CSS屬性值中的單位 CSS字體樣式 font-size設(shè)置字號(hào) 字體樣式font-style屬性字體系列font-family屬性字體變體
2024年02月04日
瀏覽(37)
[HTML]Web前端開發(fā)技術(shù)5.1（HTML5、CSS3、JavaScript ）CSS基礎(chǔ)，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦?。?！喵喵喵，你對(duì)我真的很重要！目錄前言 CSS概念 ??傳統(tǒng)HTML的缺點(diǎn) CSS的優(yōu)勢(shì) 瀏覽器與CSS 3 CSS編輯方法使用CSS控制Web頁(yè)面 CSS基本語(yǔ)法 CSS定義與
2024年02月05日
瀏覽(32)
Web前端開發(fā)技術(shù)課程大作業(yè)——南京旅游景點(diǎn)介紹網(wǎng)頁(yè)代碼html+css+javascript
家鄉(xiāng)旅游景點(diǎn)網(wǎng)頁(yè)作業(yè)制作網(wǎng)頁(yè)代碼運(yùn)用了DIV盒子的使用方法，如盒子的嵌套、浮動(dòng)、margin、border、background等屬性的使用，外部大盒子設(shè)定居中，內(nèi)部左中右布局，下方橫向浮動(dòng)排列，大學(xué)學(xué)習(xí)的前端知識(shí)點(diǎn)和布局方式都有運(yùn)用，CSS的代碼量也很足、很細(xì)致，使用hover來完成
2024年02月08日
瀏覽(28)
Web前端開發(fā)技術(shù)課程大作業(yè): 關(guān)于美食的HTML網(wǎng)頁(yè)設(shè)計(jì)——HTML+CSS+JavaScript在線美食訂餐網(wǎng)站html模板源碼30個(gè)頁(yè)面:
?????靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁(yè)面的排版設(shè)計(jì)?????,常用的網(wǎng)頁(yè)設(shè)計(jì)軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當(dāng)然不同軟件寫出的前端Html5代碼都是一致的，本網(wǎng)頁(yè)適合修改成為各種類型的產(chǎn)品展示網(wǎng)頁(yè)，比
2024年02月12日
瀏覽(92)
[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁(yè)面設(shè)計(jì)實(shí)例——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦?。?！喵喵喵，你對(duì)我真的很重要！目錄前言橫向二級(jí)導(dǎo)航菜單 Web頁(yè)面設(shè)計(jì)實(shí)例總結(jié) 該練的還是要練，終究是自己的！網(wǎng)頁(yè)標(biāo)題：二級(jí)下拉導(dǎo)航
2024年01月17日
瀏覽(43)
[HTML]Web前端開發(fā)技術(shù)6（HTML5、CSS3、JavaScript ）DIV與SPAN，盒模型，Overflow——喵喵畫網(wǎng)頁(yè)
希望你開心，希望你健康，希望你幸福，希望你點(diǎn)贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會(huì)看到更多有趣的博客哦?。?！喵喵喵，你對(duì)我真的很重要！目錄前言 CSS盒模型簡(jiǎn)介 CSS盒模型 CSS盒模型結(jié)構(gòu) 盒模型的屬性邊框border 邊框?qū)挾萣order-width 邊框樣式border-sty
2024年02月04日
瀏覽(28)