vue3.x 模板语法-指令

 

注：实例环境 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/