vue基本指令

最新推荐文章于 2024-07-09 00:17:48 发布

Hai_Dreamer

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量309

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/Hai_Dreamer/article/details/106275859

版权

Vue中的一些指令

菜鸟教程

为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1、扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2、因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

3、.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

1.v-on的基本使用

<div id="app">
	    <!-- 使用事件绑定的简写形式 -->
	    <input type="button" value="按钮" v-on:click="btn">
		</div>
		<script>
		    var vm = new Vue({
		        el: '#app',
		        //methods是用来专门存放vue的处理方法的
		        methods: {
		            btn: function () {
		                alert('123');
		            }
		        }
		    });
		</script>

Vue.js 为两个最为常用的指令提供了特别的缩写：
v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

2.事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

使用修饰符阻止浏览器的默认行为

<div id="app">
		    <a href="http://www.baidu.com"  v-on:click.prevent="btn">百度</a>
		</div>
		<script>
		    var vm = new Vue({
		        el: '#app',
		        methods: {
		            btn: function () {
		                alert('123');
		            }
		        }
		    });
		</script>

使用修饰符绑定一次性事件

<div id="app">
    <a href="http://www.baidu.com" v-on:click.once="btn($event)">百度</a>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
              btn: function (ev) {
                ev.preventDefault();
                alert('123');
            }
        }
    });
</script>

$event是原始的DOM事件：有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

**按键修饰符:**绑定键盘抬起事件，但是只有enter 键能触发此事件

<div id="app">
    <input type="text"  v-on:keyup.enter="keyup">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
            keyup:function(){
                console.log('111')
            }
        }
    });
</script>

**鼠标修饰符:**鼠标左键触发事件

<div id="app">
    <input type="button" value="按钮" v-on:click.left="btn">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
           btn:()=>{
                console.log('111')
            }
        }
    });
</script>

3.v-show的指令：

<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="change">
        <p v-show="is_show">你点击了</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            is_show: false,
        },
        methods: {
            change: function () {
                this.is_show = !this.is_show;
            }
        }
    });

</script>

4.v-if的指令：

<body>
    <div id="app">
        <input type="text"  id="" v-model="type">
        <div v-if="type === 'A'">我是A</div>
        <div v-else-if="type === 'B'">我是B</div>
        <div v-else-if="type === 'C'">我是C</div>
        <div v-else-if="type === 'D'">我是D</div>
        <div v-else>Not A/B/C</div>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            type:''
        }
    });

</script>

5.v-for的指令：

<body>
    <div id="app">
        <!-- 数组 -->
        <ul>
            <!-- v-for 循环的语法规则可以参考 js 的 for in 循环 -->
            <li v-for="(v,key) in arr">{{v}}---{{key}}</li>
        </ul>
        <!-- 对象 -->
        <ul>
            <li v-for="(v,k) in oop">{{v}}----{{k}}</li>
        </ul>

    </div>
</body>
<script>
    // for(cc in arr)
    var app = new Vue({
        el:'#app',
        data:{
            arr:['ff','hh','jj','gg','ll'],

            oop:{name:'张三',age:30,sex:'男'}
        }
    });
</script>

6.v-once:的指令：

<body>
    <div id="app">
        <!-- 只渲染一次数据 不再是数据单项绑定  这是单次绑定 -->
        <p v-once>{{msg}}</p>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'123'
        }
    });

</script>

Hai_Dreamer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基本指令

Vue中的一些指令为什么在 HTML 中监听事件?你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：1、扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。2、因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel
复制链接

扫一扫