<style>
    .active {
        padding: 1.5em;
        border: 1px solid #e4e4e4;
    }
    .err {
        border: 1px solid red;
        color: red;
        padding: 1.5em;
    }
</style>
<div id="app">
    <p v-bind:class="{active: isActive, err: isError}">{{message}}</p>
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                message: 'This is v-bind:class',
                isActive: true,
                isError: false
            }
        }
    })
    const vm = app.mount('#app')
</script>

<style>
    .active {
        padding: 1.5em;
        border: 1px solid #e4e4e4;
    }
    .err {
        border: 1px solid red;
        color: red;
        padding: 1.5em;
    }
</style>
<div id="app">
    <p v-bind:class="[headerActive, paddingError]">{{message}}</p>
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                message: 'This is v-bind:class',
                headerActive: 'active',
                paddingError: false
            }
        }
    })
    const vm = app.mount('#app')
</script>

<style>
    .active {
        padding: 1.5em;
        border: 1px solid #e4e4e4;
    }
    .err {
        border: 1px solid red;
        color: red;
        padding: 1.5em;
    }
</style>
<div id="app">
    <p v-bind:class="[isActive ? headerActive : '', paddingError]">{{message}}</p>
<!--    <p v-bind:class="[{headerActive: isActive},paddingError]">{{message}}</p>-->
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                message: 'This is v-bind:class',
                headerActive: 'active',
                paddingError: 'err',
                isActive: true
            }
        }
    })
    const vm = app.mount('#app')
</script>

<div id="app">
    <p v-bind:style="{border: borderBold, padding: '1.5em'}">{{message}}</p>
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                message: 'This is v-bind:style',
                borderBold: '1px solid #e4e4e4'
            }
        }
    })
    const vm = app.mount('#app')
</script>

<div id="app">
    <p v-bind:style="[borderStyle, paddingStyle]">{{message}}</p>
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                message: 'This is v-bind:style',
                borderStyle: 'border:1px solid #e4e4e4',
                paddingStyle: 'padding:1em'
            }
        }
    })
    const vm = app.mount('#app')
</script>

<div id="app">
    <p>{{projectMessage}}</p>
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                project : {
                    name: [
                        'Linux system',
                        'Git'
                    ]
                }
            }
        },
        computed: {
            projectMessage() {
                return this.project.name.length > 0 ? 'Welcome you to join' : 'Sorry you can’t enter the community, please participate or create a project'
            }
        }
    })
    const vm = app.mount('#app')
</script>

<div id="app">
    <p>{{projectMessage}}</p>
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                project : 'Vue',
                author: 'Evan You'
            }
        },
        computed: {
            projectMessage: {
                get() {
                    return this.project + ' ' + this.author
                },
                set(newValue) {
                    alert("当前名称是：" + newValue);
                    const names = newValue.split(' ')
                    this.project = names[0]
                    this.author = names + 'Vue!'
                }
            }
        }
    })
    const vm = app.mount('#app')
</script>

<div id="app">
    <input type="text" v-model="id">
    <p>{{message}}</p>
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                id: '0',
                message: 'Your id'
            }
        },
        watch: {
            id(newId) {
                if (newId >= 0) {
                    this.getId()
                }
            }
        },
        methods: {
            getId() {
                this.message = 'Thinking...'
                if (this.id <= 712)
                    this.message = 'true'
                else
                    this.message = 'false'
            }
        }
    })
    const vm = app.mount('#app')
</script>

const app = Vue.createApp({
  // code
})

<div id="app">
    {{message.hey}}
</div>
<script>
    const RootComponent = {
        data() {
            return {
                message: {
                    hey: 'hey,world!'
                }
            }
        }
    }
    const app = Vue.createApp(RootComponent)
    const vm = app.mount('#app')
</script>

<div id="app">
    {{message}}
</div>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                message: 'hey,world!',
            }
        }
    })
    const vm = app.mount('#app')
    console.log(vm.message)     // => hey,world!
    vm.message = 'hey,message!'
    console.log(vm.$data.message)       // => hey,message!
</script>

<div id="app">
    <button @click="toclick">up go</button>
    <p>{{message}}</p>
</div>
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                toclick: _.debounce(function () {
                    vm.message = 'hey,lodash'
                }, 1000),
                message: 'hey,world!'
            }
        }
    })
    const vm = app.mount('#app')
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="https://unpkg.com/vue@next"></script></head>
<body>
<div id="app">
    <span>{{message}}</span>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'hey,world!'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>
</body>
</html>

<div id="app">
    <p v-once>{{message}}</p>
    <input type="button" value="upgrate message" v-on:click="message ='hey,v-on'"/>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'hey,world!'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

<div id="app">
    <p>{{message}}</p>
    <p v-html="message">{{message}}</p>
</div>
<script>
    var App = {
        data() {
            return {
                message: '<h1>Hello,world!</h1>'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

<div id="app">
    <p>{{'This is ' + message}}</p>
    <p>{{gender ? '我是女孩！' : '我不是女孩'}}</p>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                gender: false
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

{{ if (ok) { return message } }}

<style type="text/css">
    .logo-size {
        width: 3em;
    }
    .logo-layout {
        border: 1px solid #e3e3e3;
    }
</style>
<div id="app">
    <p>{{message}}</p>
    <img v-bind:src="logo" :class="[logo_size,logo_layout]"/>
    <img :src="title" :style="{ width: title_size + 'em' }"/>
    <a :href="home">to Jiangxue Team Home</a>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                logo: 'logo: 'https://gitee.com/analysis-of-river-snow/drawing-bed/raw/master/20210918011632.png',
                title: 'https://gitee.com/analysis-of-river-snow/drawing-bed/raw/master/20210918002526.png',
                logo_size: 'logo-size',
                logo_layout: 'logo-layout',
                title_size: '5'，
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

<div id="app">
    <p>{{'This is ' + message}}</p>
    <p v-if="gender">This is true</p>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                gender: true
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

<div id="app">
    <p>{{'This is ' + message}}</p>
    <a :href="home">to Jiangxue Team Home</a>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

<div id="app">
    <form v-on:click.prevent="doThis">
        <a :href="home">{{message}}</a>
    </form>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Go Jiangxue Team',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

<div id="app">
    <form @click.prevent>
        <a :href="home">{{message}}</a>
    </form>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Go Jiangxue Team',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<form @submit.prevent></form>	/ <form @click.prevent></form>

<!-- 阻止默认行为，没有表达式 -->
<form @click.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<div id="app">
    <button-counter></button-counter>
</div>
<script>
    const app = Vue.createApp({})
    app.component('button-counter', {
        data() {
            return {
                count: 0
            }
        },
        template: `
          <button @click="count++">
            This is click {{count}}
          </button>
        `
    }).mount('#app')
</script>

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>
<script>
    const app = Vue.createApp({})
    var buttonCounter = {
        count: 0
    }
    app.component('button-counter', {
        data() {
           return buttonCounter
        },
        template: `
          <button @click="count++">
            This is click {{count}}
          </button>
        `
    }).mount('#app')
</script>

<style>
    .header {
        border: 1px solid #eaeaea;
        padding: 2em;
        width: 40%;
    }
    .header_item {
        border-left: 10px solid #1488ff;
        padding-left: 14px;
    }
    .header_txt {
        text-indent: 1em;
    }
</style>
<div id="app">
    <item-main title="Hey,world" text="当然我们也可以重复使用各个独立的 <button-counter> 组件，但前提我们的组件需要高度解藕。点击按钮的时候，上述的 flag 将会被证实，就因为每个组件都会各自独立并维护他的 count，每次使用 <button-conters> 都会有一个新的实例会被新建。"></item-main>
</div>
<script>
    const app = Vue.createApp({})
    app.component('item-main', {
        data() {
           return {
           }
        },
        props: ['title', 'text'],

        template: `
          <div class="header">
            <h1 class="header_item">{{title}}</h1>
            <p class="header_txt">{{text}}</p>
          </div>
        `
    }).mount('#app')
</script>

<style>
    .header {
        border: 1px solid #eaeaea;
        padding: 2em;
        width: 40%;
    }
    .header_item {
        border-left: 10px solid #1488ff;
        padding-left: 14px;
    }
    .header_txt {
        text-indent: 1em;
    }
</style>
<div id="app">
    <item-main
        v-for="post in posts"
        :key="post.id"
        :title="post.title"
        :txt="post.txt"
    ></item-main>
</div>
<script>
    const App = {
        data() {
            return {
                posts: [
                    { id: 1, title: 'Vue', txt: '一个优秀的渐进式框架'},
                    { id: 2, title: 'Jquery', txt: 'JavaScript 组件库，集成了多种实用方法'},
                    { id: 3, title: 'D3', txt: '专业的数据可视化框架'}
                ]
            }
        }
    }
    const app = Vue.createApp(App)

    app.component('item-main', {
        props: ['title', 'txt'],
        template: `
          <div class="header">
            <h1 class="header_item">{{title}}</h1>
            <p class="header_txt">{{txt}}</p>
          </div>
        `
    })

    app.mount('#app')
</script>

<style>
    .header {
        border: 1px solid #eaeaea;
        padding: 2em;
        width: 40%;
    }
    .header_item {
        border-left: 10px solid #1488ff;
        padding-left: 14px;
    }
    .header_txt {
        text-indent: 1em;
    }
    .txt_button {
        float: left;
        display: -webkit-inline-box;
    }
</style>
<div id="app">
    <item-main title="Hey,world" text="当然我们也可以重复使用各个独立的 <button-counter> 组件，但前提我们的组件需要高度解藕。点击按钮的时候，上述的 flag 将会被证实，就因为每个组件都会各自独立并维护他的 count，每次使用 <button-conters> 都会有一个新的实例会被新建。"></item-main>
    <div class="txt_button">
        <button-addcounter></button-addcounter>
        <button-redcounter></button-redcounter>
    </div>
</div>
<script>
    const app = Vue.createApp({})
    var txtSize = {
        size: '15'
    }
    app.component('item-main', {
        data() {
           return txtSize
        },
        props: ['title', 'text'],
        template: `
          <div class="header">
            <h1 class="header_item">{{title}}</h1>
            <p class="header_txt" :style="{fontSize: size+'px'}">{{text}}</p>
          </div>
        `
    })
    app.component('button-redcounter', {
        data() {
            return txtSize;
        },
        template: `
            <button @click="size--">
                Reduce to fontSize - 1
            </button>
        `
    })
    app.component('button-addcounter', {
        data() {
            return txtSize;
        },
        template: `
            <button @click="size++">
               Add to fontSize + 1
            </button>
        `
    })
    app.mount('#app')
</script>

<style>
    .header {
        border: 1px solid #eaeaea;
        padding: 2em;
        width: 40%;
    }
    .header_item {
        border-left: 10px solid #1488ff;
        padding-left: 14px;
    }
    .header_txt {
        text-indent: 1em;
    }
</style>
<div id="app">
    <item-main>和 HTML 元素一样，我们经常需要向一个组件传递内容</item-main>
</div>
<script>
    const app = Vue.createApp({})
    app.component('item-main', {
        data() {
            return {
                title: 'This is <slot>'
            }
        },
        template: `
          <div class="header">
            <h1 class="header_item">{{title}}</h1>
            <slot></slot>
          </div>
        `
    }).mount('#app')
</script>

<div id="app">
    <button
        v-for="nav in navs"
        :key="nav"
        @click="currentTab = nav">{{nav}}</button>
    <component :is="currentTabDev"></component>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                currentTab: 'Home',
                navs: ['home', 'arch', 'about']
            }
        },
        computed: {
            currentTabDev() {
                return 'nav-' + this.currentTab.toLowerCase()
            }
        }
    })

    app.component('nav-home', {
        template: `
            <div>Home</div>
        `
    })
    app.component('nav-arch', {
        template: `
            <div>Arch</div>
        `
    })
    app.component('nav-about', {
        template: `
            <div>About</div>
        `
    })
    app.mount('#app')
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="https://unpkg.com/vue@next"></script></head>
<body>
<div id="app">
    {{message}}
</div>
<script>
    var App = {
        data() {
            return {
                message: 'hey,world!'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>
</body>
</html>

var App = {
    data() {
        return {
            message: 'hey,world!'
        }
    }
}
Vue.createApp(App).mount("#app")

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')