vue2Day2基础

一、根目录，mount()和createApp()

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '12345678'
            }
        },
        template: "<h2>{{message}}</h2>"
    })
    const vm = app.mount("#app")//挂载的位置
    console.log(vm)
</script>

在控制台里面可以直接对vm中是message字样进行改变

 二、手动执行

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '12345678'
            }
        },
        methods: {//无视顺序，自动跳出来
            handleItemClick() {
                alert('we')
            }
        },
        template: "<h2 @click='handleItemClick'>{{message}}</h2>"
    })
    const vm = app.mount("#app")//挂载的位置
</script>

三、生命周期

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '12345678'
            }
        },
        methods: {
            handleItemClick() {
                alert('we')
            }
        },
        beforeCreate() {
            console.log('beforeCreate')//在实例生成之前会自动执行的函数
        },
        created() {
            console.log('created')// 在实例生成之后会自动执行的函数
        },
        beforeMount() {
            console.log('beforeMount')//在模板渲染完成之前执行的函数
        },
        mounted() {
            console.log('mounted')//在模板渲染完成之后执行的函数
        },
        template: "<h2 @click='handleItemClick'>{{message}}</h2>"
    })
    const vm = app.mount("#app")//挂载的位置
</script>

几种函数前后被渲染执行的顺序

 四、阻止默认

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'jspang.com',
                name: 'title1',
                event: 'click'
            }
        },
        methods: {
            handleItemClick() {
                alert('we')
            },
            handleBtn(e) {
                e.preventDefault();
            }
        },
        template: ` <h2
        :[name]="message"
        @[event]="handleItemClick"
        >
        {{message}}
        </h2>
        <form action="https://jspang.com" @click.prevent="handleBtn">
            <button type="sumbit">sumbit</button>
        `
    })
    const vm = app.mount("#app")//挂载的位置
</script>

五、模版条件判断

效果：点击字体颜色发生变化

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'jspang.com',
                name: 'title1',
                event: 'click'
            }
        },
        methods: {
            handleItemClick() {
                this.message = this.message == 'jspang.com' ? 'youyou' : 'jspang.com'
            }
        },
        template: ` <h2
        :class="message=='jspang.com'?'one':'two'"
        @click="handleItemClick">
        {{message}}
        </h2>
        `
    })
    const vm = app.mount("#app")//挂载的位置
</script>
<style>
    .one {
        color: red;
    }
    .two {
        color: green;
    }
</style>