Vue.js指令（1）

最新推荐文章于 2024-06-12 08:41:10 发布

挺哥的踩坑之旅

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量185

点赞数

分类专栏：前端初探 # vue.js 文章标签： vue.js html5

本文链接：https://blog.csdn.net/Scott_zt/article/details/104613421

版权

vue.js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端初探

4 篇文章 0 订阅

订阅专栏

v-cloak

解决差值表达式的闪烁问题
所有使用v-cloak 的元素，都将 display:none

<p v-clock> {{msg}}</p>

v-text

它和v-cloak的区别：

1、没有闪烁问题
2、{{msg}} 的前后可以添加任意内容，只替换占位符的内容。而v-text会覆盖元素中原本的内容

<h4 v-text="msg"></h4>

v-html

div中渲染的占位符需要是一个html标签时使用

<div v-html="msg"></div>

v-bind

用于绑定属性的指令

<input type="button" vaule="按钮" v-bind:title="mytitle">

data:{
    mytitle:"要显示的内容"
}

v-bind 可以简写为一个英文冒号
v-bind 会把后面的内容当做html去解析

v-on

用于绑定事件的指令，比如点击事件

<input type="button" vaule="按钮" v-on:click="show">
//触发click事件，就会执行show方法，所以在methods中定义该方法
methods:{
    show:function(){
        alert('Hello')
    }
}

事件修饰符

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身触发时触发回调

.once 事件只触发一次

.stop 阻止冒泡

<body>
<div id="app">
    <!-- .stop点击事件 -->
    <div class="inner" @click="div1Handler">
        <input type="button" value="戳我" @click.stop="btnHandler">
    </div>
    <!-- .prevent 阻止默认行为 -->
    <a href="http://www.baidu.com"  @click.prevent="linkclick">百度一下</a>
    <!-- .capture 捕获 -->
    <div class="inner" @click.capture="div2Handler">
        <input type="button" value="戳我" @click.stop="btnHandler">
    </div>
    <!-- .self 只有点击自己的元素，事件才会触发，冒泡不会被触发 -->
    <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳我" @click.stop="btnHandler">
    </div>
        <!-- 修饰符可以连用 -->
    <a href="http://www.baidu.com"  @click.once.prevent="linkclick">百度一下</a>
</div>


<script>

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {

            div1Handler() {
                console.log('inner div 的点击事件')
            },
            btnHandler() {
                console.log('btn div 点击事件')
            },
            linkclick (){
                console.log('出发了link 点击事件')
            },
            div2Handler(){
                console.log('prevent 捕获点击事件')
            }
        }
    });
</script>
</body>

v-model 双向数据绑定

<div id="app">

    <h4> {{ msg }}</h4>

    <input type="text" v-bind:value="msg" style="height: 200px; width: 200px;">
    <input type="text" v-model:value="msg" sytle="width:200px;">
</div>

<SCRIpt>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: '演示效果'
        },
        methods: {

        },
    })
</SCRIpt>
</body>

v-bind 只能单向绑定 M—>V
v-model 只能运用在表单元素中

未完待续…