Vue——VM对象、模板语法、阻止事件冒泡

用户2704799027083
102 阅读2分钟

使用vue框架

1.引入vue框架

  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>

2.创建一个Vue应用

<div class="app" >{msg}}
</div>
<script>
    var vm=new Vue({
        // el：相关联的元素
        // 它的底层就是document.querySelector(".app")
        el:".app",
        // data：数据源
        data:{
            
        }
    })
</script>

 new Vue({
      el:".app",//关联界面元素
          
      data:{x:12},//vm的数据源
          
      methods:{},//方法
          
      filter:{},//过滤器
          
      computed:{xx(){}}, //xx就是一个计算属性
          
      watch:{x(){}} //x就是监听了data中的x属性的一个监听器
})

模板语法：

1.插值表达式：{ { } }会作为js语法执行环境

普通插值表达式插入数据: 在标签尖括号中使用 {{ }} 插入js表达式:变量,函数调用,三目运算等等。

插值表达式中的标识符 ：代表vue对象中的data的属性名或者methods中的方法名

image.png

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

2.指令：v-html、v-text、v-pre、v-cloak

v-html：它的底层语言：获取的元素节点.innerHTML=""

v-text：它的底层语言：获取的元素节点.innerText=""

v-pre:跳过编译（也叫静默）

v-cloak：加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)

image.png

3.属性绑定：v-bind：（语法糖：： ）

image.png

4.事件绑定v-on：事件、方法methods：{}

事件绑定：v-on：事件（语法糖：@事件）（例如：@click,方法调用可以写fn（），也可以不加（），直接fn）

方法：methods：{fn(e){console.log(e)}},如果事件绑定，没有传参，那么，e就默认是事件对象（DOM的知识点）

注意：方法中this===vm对象

image.png

案例：冒泡事件

head标签内的代码：引入vue框架、写style样式

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<style>
  .box{
    width: 200px;
    height: 200px;
    background-color: bisque;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: cadetblue;
}
.box2{
    width: 50px;
    height: 50px;
    background-color: red;
}
</style>

阻止事件冒泡：事件.stop、事件.self;

阻止默认事件：事件.prevent;

事件只绑定一次（触发一次后，就不能再触发了）：事件.once;

 <body>
<div id="app">
    <!-- 这是一个冒泡事件（DOM）：捕获、目标、冒泡 -->
    <!-- 在捕获阶段触发：在事件后面接：.capture -->
    <div class="box" @click.capture="fn">

        <!-- 第一种 -->
        <!-- 阻止冒泡：直接在事件后面接一个.stop -->
        <!-- 阻止2后面的元素冒泡 -->
        <!-- <div class="box1" @click.stop="fn1"> -->

            <!-- 第二种 -->
            <!-- 阻止冒泡：直接在事件后面接一个.self -->
            <!-- 不点击box1时，是不会触发冒泡事件的-->
            <!-- <div class="box1" @click.self="fn1"> -->

                <!-- 第三种 -->
                <!--  
                    @click.self.stop不点击box1时，box1不会触发冒泡事件，只有当点击box1时，才会触发阻止冒泡（也就是不点击时，采用的是self，点击时，采用的是stop）
                 -->
                <div class="box1" @click.self.stop="fn1">
            <div class="box2" @click="fn2">
            </div>
        </div>
    </div>

    <!-- 阻止默认事件 ：在事件后面接.prevent-->
    <a @click.prevent="fn3()" href="http:www.baidu.com">{{mn}}</a>

    <!--在事件后面接：.once    事件只绑定一次，点击后，就不能再点了,即使一直点击，也不会有任何的操作了，除非刷新页面  -->
    <button @click.once="fn4">{{msg}}</button>
</div>

vm对象：

   <script>
    var vm=new Vue({
        el:"#app",
        data:{
            mn:"阻止默认事件",
            msg:"倒计时"
        },
        methods: {
            // 将方法写在methods对象中
            fn(){
            //这里的this指的是vm对象
            //this===vm
               this.msg="hello"
               console.log(1) 
            },
            fn1(){
                console.log(2)
            },
            fn2(){
                console.log(3)
            },
            fn3(){
                this.mn="hello"
            },
            fn4(e){
                console.log(4)
            }
        },
    })

</script>
</body>

注释：

为什么直接在标签内绑定后或者是在{{ }}中,可以直接使用data对象中属性名、methods对象中的方法，是因为vm对象劫持了vue中的对象的所有属性名的属性值（同时，也说明标签内的所有使用的变量都是vm对象的属性名，只是这些属性名是vm对象通过劫持的方法获取的）

avatar
文章
阅读
粉丝