经过一周时间的努力，小编今天继续和大家学习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')
又是前端进步的一天，一起加油！
大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈
?