【郑州校区】前端笔记Vue项目第一天二

【郑州校区】前端笔记Vue项目第一天二

mvvm

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
m model
数据层 Vue  中数据层都放在 data 里面
v view    视图
Vue  中  view    即我们的HTML页面
vm （view-model）    控制器    将数据和视图层建立联系
vm 即  Vue 的实例  就是 vm
v-on

用来绑定事件的
形式如：v-on:click  缩写为 @click;

v-on事件函数中传入参数

[AppleScript] 纯文本查看 复制代码

<body>

    <div id="app">

        <div>{{num}}</div>

        <div>

            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->

            <button v-on:click='handle1'>点击1</button>

            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，

                 并且事件对象的名称必须是$event

            -->

            <button v-on:click='handle2(123, 456, $event)'>点击2</button>

        </div>

    </div>

    <script type="text/javascript" src="js/vue.js"></script>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#app',

            data: {

                num: 0

            },

            methods: {

                handle1: function(event) {

                    console.log(event.target.innerHTML)

                },

                handle2: function(p, p1, event) {

                    console.log(p, p1)

                    console.log(event.target.innerHTML)

                    this.num++;

                }

            }

        });

    </script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符

修饰符是由点开头的指令后缀来表示的

[AppleScript] 纯文本查看 复制代码

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
 
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
 
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目第一天 二

0 个回复

【郑州校区】前端笔记Vue项目第一天二