通过一周工夫的致力，小编明天持续和大家学习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')

又是前端提高的一天，一起加油！
大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈