vue3.x 模板语法-指令

Posted 2021-06-20 天行子

 

注：实例环境 vue cli构建的项目

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from \'./components/Example\'

export default {
  name: \'App\',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
        <p v-if="seen">{{name}}</p>
        <p>
            <a v-bind:href="url">{{title}}</a>
        </p>
        <p>
            <a v-on:click="handleClick">点击事件</a>
        </p>
        <form v-on:submit.prevent="handleSubmit">
            <input type="text" v-model="username"/>
            <input type="submit" value="提交"/>
        </form>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                name:\'天行子\',
                seen:true,
                url:\'https://www.cnblogs.com/hu308830232\',
                title:\'vue3-指令\',
                username:\'\'
            }
        },
        methods:{
            handleClick:function () {
                alert(\'点击事件触发了...\');
            },
            handleSubmit:function () {
                alert(\'username:\' + this.username);
            }
        }
    }
</script>

<style scoped>

</style>

浏览器看效果

http://localhost:8082/

Example.vue(指令缩写版)

<template>
    <div>
        <p v-if="seen">{{name}}</p>
        <p>
            <a :href="url">{{title}}</a>
        </p>
        <p>
            <a @click="handleClick">点击事件</a>
        </p>
        <form @submit.prevent="handleSubmit">
            <input type="text" v-model="username"/>
            <input type="submit" value="提交"/>
        </form>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                name:\'天行子\',
                seen:true,
                url:\'https://www.cnblogs.com/hu308830232\',
                title:\'vue3-指令\',
                username:\'\'
            }
        },
        methods:{
            handleClick:function () {
                alert(\'点击事件触发了...\');
            },
            handleSubmit:function () {
                alert(\'username:\' + this.username);
            }
        }
    }
</script>

<style scoped>

</style>

浏览器看效果

http://localhost:8082/