码迷,mamicode.com
首页 > 其他好文 > 详细

vue3.x 模板语法-指令

时间:2021-06-20 18:04:04      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ext   keyword   port   for   text   name   v-on   UNC   bind   

 

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

vue3.x 模板语法-指令

标签:ext   keyword   port   for   text   name   v-on   UNC   bind   

原文地址:https://www.cnblogs.com/hu308830232/p/14905984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!