<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <div id="app1">
        <p>姓名:{{username}}</p>
        <p>性别:{{gender}}</p>
        <p>{{desc}}</p>
        <p v-html="desc"></p>
    </div>
    <div id="app2">
        <a :href="link">百度</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style="{width:w}" alt="">
    </div>
    <div id="app3">
        <p>{{number + 1}}</p>
        <p>{{ok ? 'True' : 'False'}}</p>
        <p>{{message.split('').reverse().join('')}}</p>
        <p :id="'list-' + id">xxx</p>
        <p>{{user.name}}</p>
    </div>
    <div id="app4">
        <h3>count的值为: {{count}}</h3>
        <button v-on:click="addCount">+1</button>
        <button @click="count+=1">+1</button>
    </div>
    <div id="app5">
        <button @click="flag = !flag">Toggle Flag</button>
        <p v-if="flag">请求成功 --- 就 v-if控制</p>
        <p v-show="flag">请求成功 --- 被v-show控制</p>
    </div>
    <div id="app6">
        <div>
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>
        </div>
        <ul>
            <!-- Vue会倾向于重用标签,我们没有给li标签加上唯一的id,但是标签产生变化了,这就导致我们列表变化后,选中对象变化了 -->
            <!-- 这个key唯一表示最好使用数据库中查询出的主键来充当 -->
            <li v-for="(user,index) in userList" :key="user.id">
                <input type="checkbox"/>id是:{{user.id}},姓名是: {{user.name}}
            </li>
        </ul>
    </div>
    <script>
        const vm5 = {
            data: function(){
                return{
                    userList: [
                        {id: 1,name:'zhangsan'},
                        {id: 2,name:'lisi'},
                        {id: 3,name:'wangwu'}
                    ],
                    //输入的用户名
                    name:'',
                    //下一个可用的id值
                    nextId:4
                }
            },
            methods:{
                addNewUser(){
                    //往开始位置加元素用unshift
                    this.userList.unshift({id:this.nextId,name:this.name})
                    this.name = ''
                    this.nextId++
                }
            }
        }
        const app6 = Vue.createApp(vm5)
        app6.mount('#app6')
        const vm4 = {
            data: function(){
                return {
                    flag:false
                }
            }
        }
        const app5 = Vue.createApp(vm4)
        app5.mount('#app5')
        const vm3 = {
            data: function(){
                return{
                    count:100
                }
            },
            methods:{
                addCount(){
                    this.count += 1
                }
            }
        }
        const app4 = Vue.createApp(vm3)
        app4.mount('#app4')
        const vm2 = {
            data:function()
            {
                return{
                    number:9,
                    ok:false,
                    message:'ABC',
                    id:3,
                    user:{name:'张三',}
                }
            }
        }
        const app3 = Vue.createApp(vm2)
        app3.mount('#app3')
        const vm1 = {
            data: function()
            {
                return{
                    link:"http://www.baidu.com",
                    inputValue:'请输入内容',
                    imgSrc:'1.png',
                    w:'500px'
                }
            }
        }
        const app2 = Vue.createApp(vm1)
        app2.mount('#app2')
        const vm={
            data()
            {
                return{
                    username:'张三',
                    gender:'男',
                    desc:'<a href="http://www.baidu.com">百度</a>'
                }
            }
        }
        const app1 = Vue.createApp(vm)
        app1.mount('#app1')
        Vue.createApp({
            data(){
                return{
                    message:'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>