经过一周时间的努力,小编今天继续和大家学习Vue3,今天还是以实际例子为主,先让小小白感受一下Vue的魅力,让另外一些小小白体会一下不用脚手架是一种什么体验,当然了,也为了接下来的工作内容准备准备。
上一篇关于Vue的文章,通过Vue,实现了一个累加的功能。源码是这样的
<!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@next"></script> </head> <body> <div id="root"></div> <script> Vue.createApp({ data(){ return { content: 1 // 绑定的数据 } }, mounted(){ // 页面渲染之后,自动执行的函数 setInterval(() => { this.content += 1 },1000) }, template:‘<div>{{ content }}</div>‘ // 模版 }).mount(‘#root‘) // 挂在点为id="root"的DOM节点 </script> </body> </html>
下面我们来看看今天的第一个例子:字符串反转,先看源码:为了节省空间,我这里就只粘js部分的代码
Vue.createApp({ data(){ return { content: "hello world" } }, methods:{ handleBtnClick(){ const newContent = this.content.split("").reverse().join(‘‘) this.content = newContent } }, template:` <div> {{ content }} <button v-on:click="handleBtnClick">反转</button> </div>` }).mount(‘#root‘)
没接触过Vue的小伙伴,看到这串字母可能是一脸懵圈,那就跟小编,一起搭上Vue这趟车吧上面的代码实现的功能就是将字符串反转反转再反转,下面小编就结合注释一起说明一下代码的作用
Vue.createApp({ data(){ return { content: "hello world" } }, methods:{ // 之前jQuery更多的是操作DOM,使用Vue的时候要向操作数据转换,剩下的事情Vue会帮我们处理好 handleBtnClick(){ const newContent = this.content.split("").reverse().join(‘‘) this.content = newContent } }, template:` // es6新增加模版字符串,支持${}的语法 <div> {{ content }} // 绑定的数据 // 在Vue中使用v-on来绑定,可以通过@click的方式简写 <button v-on:click="handleBtnClick">反转</button> </div>` }).mount(‘#root‘)
例子二——内容隐藏。这个例子小编就直接结合注释一起梳理
Vue.createApp({ data(){ return { show:true } }, methods:{ handleBtnClick(){ // 操作数据,在点击按钮执行这个函数的时候,show这变量的值就是false true false true ... // 相应的页面上元素就显示 不显示 显示 不显示 ... this.show = !this.show } }, template:` <div> // v-if在Vue中叫指令,后面的内容为true的时候,现在对应标签的内容,为false的时候不显示 // 和v-if类似的还有v-show。但是v-show只是通过css中的display来处理 // v-if="false"的时候是直接不渲染DOM // v-show="false"的时候,渲染DOM元素,只是添加样式display:none // 上面这个是高频出现的面试题,快拿小本本记上 <span v-if="show">hello world</span> <button v-on:click="handleBtnClick">显示/隐藏</button> </div>` }).mount(‘#root‘)
又是前端进步的一天,一起加油!
大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈