丁鹿学堂：2023前端开发vue3入门指南（vu3视图自动绑定案例解析）

vue3中数据和视图自动绑定

vue3中data中的数据，会自动和使用它的视图绑定，数据发生变化时视图会自动更细，无需我们手动操作dom
案例：创建一个按钮，记录点击次数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="root"></div><script>//组件const App = {data(){return{num:0}},template:"<button @click='num++' >点击</button> <span>点了{{num}}<span>"}// 生成实例const app = Vue.createApp(App)// 挂载app.mount('#root')</script></body>
</html>

传统的实现这个需求，我们需要获取button和span，通过事件去记录点击次数，并且修改span的innerHTML。
但是在vue中，只需要 @click=‘num++’ 自动实现数据改变更新视图。

vue3中的模板

vue3中定义模板有三种方式
1 在组件对象中通过templeate属性去指定
2 直接在html页面的根元素中指定（了解，很少使用）
3 通过组件的render() 直接渲染，此方法只在一些特殊情况下使用，了解即可。

注意：
1如果在在组件对象中通过templeate属性去指定了内容，则根元素中的所有内容都会被替换。
2 虽然定义模板的方法有三种，但是我们通常使用在组件中的template属性去指定。

丁鹿学堂：2023前端开发vue3入门指南（vu3视图自动绑定案例解析）相关推荐

丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中,template模版中的html代码,并不能直接在网页中执行,而是会在项目运行时,在浏览器中被编译为js 的函数去执行. 问题:在template模版中写html,体验很差,智能提示都不 ...
丁鹿学堂：前端http面试总结，状态码详解
http请求方法总结 get: 从服务器获取资源 post:在服务器创建资源 put:在服务器修改资源 delete:在服务器删除资源注意: post和put的最大区别,在于put具有幂等性.比如你 ...
丁鹿学堂：前端自学杂谈
为什么都说前端自学比培训好呢? 有以下几点情况一些水平不济的同行,教出来的学生实力不行,但是简历造假,导致能力跟企业的需求无法匹配,把培训的名声也搞臭了. 但是更多自学学的不理想的往往就转行做其他的 ...
丁鹿学堂：前端设计模式分享之设计模式的分类介绍
设计原则的分类创建型:帮助我们优雅的创建对象结构型:帮助我们更优雅的设计代码结构行为型:模块之间行为的模式总结,帮助我们组织模块行为技巧型:一些帮助我们优化代码的技巧创建型设计模式简介 1 ...
前端培训，丁鹿学堂和达内浅析
真是很巧,这两家一个是主打线下的,一个是线上的,也算是两种模式的典型代表了. 达内我是了解的.如果你是北京的,可以去现场听,但是如果不是,就只能听看老师直播了,再配上助教老师,就构成了线下.这个模式好 ...
学前端报面授，还是慕课网或者丁鹿学堂？
首先我是不建议报线下班的,线下班学员水平参次不齐,有你这种自学了一段时间插进去的,有零基础小白的,我知道的还有26个字母都不熟的,这就有一个问题,老师想要兼顾那么多人导致进度拖沓,自己不懂的也很难及时 ...
丁鹿学堂：js字符串转数组常用方法总结
我们在前端实际开发过程中,用的最多的是数组.而且js也为数组提供了大量的api,方便我们处理数据. 在实际开发过程中,我们经常需要做的一点就是把字符串转为数组,利用数组的数据结构和api,可以很方便的 ...
前端开发从入门到进阶完全指南，不用再迷茫前端要怎么学啦！
我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域.每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题. 作为程序员, ...
【区块链 | 前端】前端开发人员入门区块链的最佳实践
前端开发人员入门区块链的最佳实践一. 建立信仰从技术入门一个行业通常是漫无目的,个人认为正确的入行区块链的方式是去了解他的背景,是去建立自己信仰的,尤其身处一个刚起步就被扼杀的行业,我们每个人都是 ...

丁鹿学堂：2023前端开发vue3入门指南（vu3视图自动绑定案例解析）

vue3中数据和视图自动绑定

vue3中的模板

丁鹿学堂：2023前端开发vue3入门指南（vu3视图自动绑定案例解析）相关推荐

最新文章

热门文章