Vue的基础知识

最新推荐文章于 2020-06-19 13:05:32 发布

ZZZZ_HHHH

最新推荐文章于 2020-06-19 13:05:32 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/ZZZZ_HHHH/article/details/88857304

版权

1、事件修饰符
.stop阻止冒泡
.prevent阻止默认行为
.capture实现捕获触发事件的机制
.self实现只有点击当前元素的时候才会触发事件处理函数
.once 只触发一次处理函数
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为,但是.stop会阻止真正的冒泡
2、v-bind和v-model
v-bind只能实现数据的单向绑定，缩写为 “：”，从M 自动绑定到 v，无法实现数据的双向绑定。
v-model可以实现表单元素和model 中数据的双向绑定。
注意：v-model只能运用到表单元素中，input(radio, text, address, email… ) select checkbox textarea
3、eval()函数
作用：解析字符串,通过计算 string 得到的值（如果有的话）。
4.vue中样式-class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
       .red{
           color: red;
       }

       .thin{
           font-weight: 200;
       }

       .italic{
           font-style: italic;
       }

       .active{
           letter-spacing: 0.5em;
       }
    </style>
</head>
<body>
    
    <div id="app">

        <h1 class="thin italic active">这是一个很大很大的h1</h1>

        <!-- 第一种使用方式，直接传递一个数组，注意，这里的class需要使用 v-bind做数据绑定   -->
        <!-- 且里面的class需要用单引号扩出来 -->
        <h1 :class="['thin','italic','active']">这是一个很大很大的h1</h1>

        <!-- 在数组中使用三元表达式 -->
        <h1 :class="['thin','italic',flag ? 'active' : '']">这是一个很大很大的h1</h1>

        <!-- 在数组中使用三元表达式不好读，改为在数组里面写一个对象 --> 
        <!-- 用对象来代替三元表达式，提高代码的可重用性 -->
        <h1 :class="['thin', 'italic', {'active':flag}]">这是一个很大很大的h1</h1>

        <!-- 在为 class 使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号可不带引号，所有这里没带引号 -->
        <h1 :class="classObj">这是一个很大很大的h1</h1>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{ red: true, thin:false, italic:true , active: false}
            },
            methods:{

            }
        })
    </script>
    
</body>
</html>


<!-- 在Vue中使用样式 -->
<!-- 使用class样式 -->
<!-- 1. 数组 -->
<!-- 2. 数组中使用三元表达式 -->
<!-- 3. 数组中嵌套对象 -->
<!-- 4. 直接使用对象 -->

5、vue中样式-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>


</head>
<body>
    
    <div id="app">
        <!-- 对象就是无序键值对的集合 -->
        <!-- 注意：font-weight单引号是因为规定带短横线的需要加 -->
        <h1 :style=" [ styleObj1, styleObj2 ]">这是一个h1</h1>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                styleObj1:{  color:'red' , 'font-weight':200},
                styleObj2:{ 'font-style':'italic'}
            },
            methods:{

            }
        })
    </script>

</body>
</html>


<!-- 使用内联样式 -->
<!-- 1.直接在元素上通过 :style的样式，书写样式对象 -->
<!-- 2.将样式对象，定义到data中，并直接引用到style中 -->

6、v-for循环

循环遍历普通数组：

<!-- 循环遍历所有的 -->
        <p v-for="item in list">{{ item }}</p>
        <p v-for=" (item, i) in list">索引值：{{ i }} ---每一项：{{ item  }}</p>

循环遍历对象数组：

 <!-- 注意：在遍历对象身上的键值对时，除了有 val key 外，  在第三个位置上还有一个索引 -->
        <p v-for="(val,key,i) in user">值是: {{val}} ---------键是 {{key}} ---------索引：{{i}}</p>

迭代数字：

<!-- in 后面我们放过  普通数组，对象数组，对象，还可以放数字 -->
        <!-- 注意：如果使用 v-for迭代数字的画，前面的count值从1 开始 -->
        <p v-for="count in 10">这是第 {{count}}次循环</p>

key属性的关键：

<!-- 注意： v-for循环的时候， key属性只能使用number或者string，不能用对象-->
        <!-- 注意： key 在使用的时候，必须使用v-bind属性绑定的形式指定key的值-->
        <!-- 在组件中使用v-for循环的时候，或者在一些特殊的情况中的时候，如果v-for有问题，必须在使用
        v-for的同时，指定 唯一的 字符串/数字 类型 :key的值 -->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">
            {{item.id}}-----{{item.name}}
            
        </p>

往列表对象中添加方法：

// push()在尾部添加

                    // this.list.push( { id:this.id,name:this.name} )
                    
                    // unshift在头部添加
                    this.list.unshift( { id:this.id,name:this.name} )

7、v-if和v-show的区别

    <!-- v-show的特点是  每次不会重新进行dom的删除和创建操作，只是切换了元素的  display:none 样式 -->
    
    <!-- v-if有较高的切换性能消耗，直接清除元素-->
    <!-- v-show有较高的初始渲染消耗 -->


    <!-- 如果元素涉及到频繁的的切换，最好不要使用  v-if -->
    <!-- 如果元素可能永远也不会被显示出来给用户看到，则推荐使用 v-if -->

ZZZZ_HHHH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的基础知识

1、事件修饰符.stop阻止冒泡.prevent阻止默认行为.capture实现捕获触发事件的机制.self实现只有点击当前元素的时候才会触发事件处理函数.once 只触发一次处理函数.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为,但是.stop会阻止真正的冒泡2、v-bind和v-modelv-bind只能实现数据的单向绑定，缩写为 “：”，从M 自动绑定...
复制链接

扫一扫