学做效果图网站有哪些软件世界著名建筑设计公司
Vue 目前已经是国内最流⾏的前端框架之⼀，Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流，比如：
基于 Proxy 的全新响应式实现；
Composition API + <script setup> 组织代码的更优方式；
更有料的 TypeScript 支持；
新的 VDOM diff 逻辑；
更小的体积 + 更高的性能；
生态中还多了 Vite 这个新⼀代工程化工具。
可以说，Vue 3 很好地拥抱了未来，并且在新手友好度上做到了极致。
之前没用过Vue，在学习Vue3之前，先了解下基本的Vue知识，本文内容主要是基于Vue2的。
本文涉及知识点：
- data()声明数据，v-model同步数据，｛｛title｝｝显示数据
- 渲染列表数据，用 v-for
- 执行的函数，放到 methods 配置
- @标记用户交互，监听到交互后，执行methods中配置的函数
- data()声明的数据， 可以是基本类型，也可以是对象–>
- 冒号":" 开头的属性是用来传递数据的，根据 todo.done 来决定是否有 done 这个 class
- 需要对数据进行计算的话，要配置一个computed属性 ,具有缓存能力，可以提升性能
- 计算属性要修改，这时候 computed 的配置，要变成一个对象，分别实现 get 和 set 函数
- v-if对元素进行条件渲染，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>暂无数据</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>
参考资料
