当前位置：首页 > news >正文

自适应网站搭建/推荐一个seo优化软件

news 文章来源：https://blog.csdn.net/liuchunming033/article/details/130414405 2025/2/22 16:32:11

自适应网站搭建,推荐一个seo优化软件,猪八戒网做网站被骗,上海小程序服务商Vue 目前已经是国内最流⾏的前端框架之⼀，Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流，比如： 基于 Proxy 的全新响应式实现； Composition API <script setup> 组织代码的更优方式； 更有料的 TypeScript 支…

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>

参考资料
在这里插入图片描述

自适应网站搭建/推荐一个seo优化软件

相关文章：

【Vue3学习笔记1】一个清单应用帮你入门Vue.js

go破冰之旅·8·go函数基本实践及各种玩法

Qt - 从零到壹的打地鼠游戏

代码自动发布系统

qemu-基础篇(一)——安装

从根本上理解Synchronized的加锁过程

CANOE入门到精通——CANOE系列教程记录1 第一个仿真工程

JavaEE——单例模式

关于数据倾斜

Shell第一次作业

实例解读nn.AdaptiveAvgPool2d((1, 1))

泛型编程之模板（template）

用ChatGPT问DotNet的相关问题，发现DotNet工程师的前景还不错

LeetCode_字符串_简单_415.字符串相加

Insix:面向真实的生成数据增强，用于Nuclei实例分割

CleanMyMac X4.13.2最新版下载

机器学习算法原理：详细介绍各种机器学习算法的原理、优缺点和适用场景

Spring Security 6.0系列【32】授权服务器篇之默认过滤器

.NET中比肩System.Text.Json序列化反序列化组件MessagePack

Oracle删除列操作：逻辑删除和物理删除

找出字符串中第一个匹配项的下标、求解方程----2023/5/2

23：宁以non-member、non-friend替换member函数

Centos7安装Redis

Android 项目必备（四十五）--＞2023 年如何构建 Android 应用程序

改进YOLOv5： | 涨点神器 | 即插即用| ICLR 2022！Intel提出ODConv：即插即用的动态卷积

( 数组和矩阵) 485. 最大连续 1 的个数 ——【Leetcode每日一题】

从0搭建Vue3组件库(十一): 集成项目的编程规范工具链(ESlint+Prettier+Stylelint)

Mysql 苞米豆多数据源读写分离(小项目可用)

OJ练习第90题——删除字符使频率相同

云原生Istio基本介绍