vue 以前面向dom编程,现在我们面对数据编程一、示例二、解析以前面向dom编程,现在我们面对数据编程从反转字符

一、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.5/dist/vue.global.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({ 
        data(){
            return{
                content:'hello world'
            }
        },
        methods:{
            handleBtnClick(){
                this.content = this.content.split('').reverse().join('');
            }
        },
        template:`
            <div>
                {{content}}
                <button v-on:click="handleBtnClick">反转</button>
            </div>`
    }).mount('#root')
</script>
</html>

二、解析

以前面向dom编程,现在我们面对数据编程从反转字符串可以看到，我们可以直接操作数据去达到我们想要的页面效果不需要再去先获取DOM，在进行操作

三、示例

Vue.createApp({ 
        data(){
            return{show:true}
        },
        methods:{
            handleBtnClick(){
                this.show = !this.show;
            }
        },
        template:`
            <div>
                <span v-if="show">hello world</span>
                <button v-on:click="handleBtnClick">显示/隐藏</button>
            </div>`
    }).mount('#root')

四、逐行解析通过数据展示或隐藏DOM

Vue.createApp({ }): 创建一个vue实例

```
data(){} :操作的数据
```

v-on:click="handleBtnClick" : 创建点击事件 handleBtnClick是自己取的名字

v-if="show" :v-if是常见的判断指令,show 是data里的数据，初始状态是true

this.show = !this.show;  !this.show是取反 改变数据的状态,从而达到显示隐藏的效果