網(wǎng)站建設(shè)藤設(shè)計廣告做到百度第一頁
Vue 目前已經(jīng)是國內(nèi)最流?的前端框架之?,Vue 3 帶來的諸多優(yōu)化更是讓前端圈迎來了新的潮流,比如:
基于 Proxy 的全新響應(yīng)式實現(xiàn);
Composition API + <script setup>
組織代碼的更優(yōu)方式;
更有料的 TypeScript 支持;
新的 VDOM diff 邏輯;
更小的體積 + 更高的性能;
生態(tài)中還多了 Vite 這個新?代工程化工具。
可以說,Vue 3 很好地?fù)肀Я宋磥?#xff0c;并且在新手友好度上做到了極致。
之前沒用過Vue,在學(xué)習(xí)Vue3之前,先了解下基本的Vue知識,本文內(nèi)容主要是基于Vue2的。
本文涉及知識點:
- data()聲明數(shù)據(jù),v-model同步數(shù)據(jù),{{title}}顯示數(shù)據(jù)
- 渲染列表數(shù)據(jù),用 v-for
- 執(zhí)行的函數(shù),放到 methods 配置
- @標(biāo)記用戶交互,監(jiān)聽到交互后,執(zhí)行methods中配置的函數(shù)
- data()聲明的數(shù)據(jù), 可以是基本類型,也可以是對象–>
- 冒號":" 開頭的屬性是用來傳遞數(shù)據(jù)的,根據(jù) todo.done 來決定是否有 done 這個 class
- 需要對數(shù)據(jù)進(jìn)行計算的話,要配置一個computed屬性 ,具有緩存能力,可以提升性能
- 計算屬性要修改,這時候 computed 的配置,要變成一個對象,分別實現(xiàn) get 和 set 函數(shù)
- v-if對元素進(jìn)行條件渲染,v-else配合
下面代碼可以保存成html,通過瀏覽器打開查看效果。
<!DOCTYPE html>
<html lang="en">
<body><div id="app"> <h2>{{title}}</h2> <input type="text" v-model="title" @keydown.enter="addToDo"><ul v-if="todos.length"><li v-for="todo in todos"><input type="checkbox" v-model="todo.done"><span :class="{done:todo.done}">{{todo.title}}</span></li></ul><div v-else>暫無數(shù)據(jù)</div><!-- 以下部分要放到id為app的div里面 --><div>全選<input type="checkbox" v-model="allDone"><span>{{active}} / {{all}}</span></div><button v-if="active<all" @click="clear">清理</button></div><script type="text/javascript" src="/Users/chunming.liu/Downloads/vue.global.js"></script><script>const App = { data() { return { title: "",todos: [{title:"吃飯",done:false},{title:"睡覺",done:false}]} },computed: {active() {return this.todos.filter(v => !v.done).length},all() {return this.todos.length},allDone:{get: function(){return this.active === 0},set: function(val){this.todos.forEach(todo => {todo.done = val});}}},methods:{addToDo(){this.todos.push({title: this.title,done: false})this.title = ""},clear(){this.todos = this.todos.filter(v=>!v.done) //只過濾未完成的}}}Vue.createApp(App).mount("#app") </script><style> .done{ color:gray; text-decoration: line-through; }</style>
</body>
</html>
參考資料