vue.js、元素的绑定和事件、事件修饰符

vue

vue.js

//1、vue的核心理念：数据驱动试图，组件化开发
// 2、什么是vue:构建用户页面的渐进式框架，采用自底向上逐层应用开发，数据驱动视图，组件化开发
    /* 3、框架和库的区别：
         框架是一套完整的解决方案，对项目的侵入性较大，如需更换框架，需要重新架构整个项目
         库提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求可以很容易切换到其他库实现需求
    */
   /* 
    MVC和MVVM的区别：
      1、MVC是后端分层开发的概念，MVVM是前端视图层的概念
      2、在MVC层中，V代表view，视图层，作用：发送数据，展示数据
                   C代表controller，调度层，作用：响应数据，返回数据
                   M代表model，模型层，作用：处理数据，与数据库打交道
      3、在MVVM层中，v代表view，视图层，作用：展示数据
                    VM代表view-model，视图模型层，作用：连接视图和模型层，承上启下的作用
                    M代表model，模型层，作用：逻辑处理
   */

元素的绑定和事件

    <div id="app">
        <!-- 元素的属性绑定  v-bind -->
        <img src="https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641" alt="">
        <img v-bind:src="src" alt="">
        <!-- 简写  : -->
        <img :src="src" alt="">
        <!-- 事件绑定    v-on-->
        <button v-on:click="log">点击</button>
    </div>

 let vm = new Vue({
        el: '#app',
        data: {
            src: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641',
            msg: "学vue简单"
        },
        methods: {
            log() {
                // console.log('测试');
                console.log(this);
                console.log(this.src);
                if (this.src == '') {
                    this.src = "https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641"
                } else {
                    this.src = ''
                }
            }
        }
    })

事件修饰符

<div id="app">
        <!-- .stop:阻止冒泡：阻止时间继续向外传播 -->
        <div class="one" @click="first">
            <div class="two" @click="second">
                <div class="three" @click="third"></div>
            </div>
        </div>
        <!-- .capture 添加事件捕获 -->
        <div class="one" @click="first">
            <div class="two" @click.capture="second">
                <div class="three" @click="third"></div>
            </div>
        </div>
        <!-- .self:只有当事件在该元素本身触发时触发回调 -->
        <div class="one" @click="first">
            <div class="two" @click.capture.self="second">
                <div class="three" @click="third"></div>
            </div>
        </div>
        <!-- .once:事件只会触发一次 -->
        <div class="one" @click="first">
            <div class="two" @click="second">
                <div class="three" @click.once="third"></div>
            </div>
        </div>
        <!-- .prevent:阻止默认事件 -->
         <a href="http://www.baidu.com" @click.prevent="goto">百度</a>
    </div>

let vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            first(){
                console.log(1);
            },
            second(){
                console.log(2);
            },
            third(){
                console.log(3);
            },
            goto(){
                console.log('测试');
            }
        }
    })