码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 知识整理—03-指令3

时间:2019-05-27 12:00:12      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:methods   四种   checkbox   sele   select   绑定   表单   下标   event   

一:v-on的缩写和事件修饰符

事件修饰符:

    . stop 阻止冒泡

    . prevent 阻止默认事件

    . capture 添加事件侦听器时使用事件捕获模式

    . self只当事件在该元素本身(比如不是子元素)触发时触发回调

    . once 事件只触发一次

二:v-model和双向数据绑定

v-bind只能实现数据的单向绑定,从 M 到 V ,v-model 可以实现数据的双向绑定,表单元素和 Model中的数据

   注意:v-model 只能运用在表单元素中

                {   input(radio ,text ,address ,email 。。。)     select      checkbox     textarea}

三:v-bind 属性设置样式

~~~ vue中通过属性绑定(v-bind:)为元素设置 class 样式

   ---使用 class 样式

1. 直接传递一个数组

2. 数组中使用三元表达式

3. 在数组中使用对象代替三元表达式(数组中嵌套对象)

4. 直接使用对象

~~~ vue中通过属性绑定(v-bind:)为元素绑定 style 行内样式

   ---使用内联样式

1. 直接在元素上设置 : style  

2. 将样式定义到 data 中,直接引用到 : style 中

3. 在 : style 中通过数组,引用多个 data 上的样式对象

四:v-for 的四种使用方式(与key属性)

1. 根据一组数组或对象的选项列表进行渲染。

2. v-for 指令需要使用 item in items 形式的特殊语法,

3. 是源数据数组 /对象

4. 当要渲染相似的标签结构时用v-for

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)    

  • 变量数组和对象

  • 数组 语法: v-for="(item,i) in list"

  • 对象 语法: v-for=“(v,k,i) in obj”

  • 补充 : 在每一项数据 追加一个属性 :key=“唯一标识” 建议如果有ID使用ID没有考虑索引

<body>
        <div id="app">
            <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
                v-for="元素 in 容器(数组和对象)"
                v-for="数组中的元素 in data中的数组名"
                v-for="对象中的属性值 in data中的对象名"
            -->
            <!-- 数组 -->
            <p v-for="item in list">{{item}}</p>
            <hr>
            <p v-for="(item,index) in list">{{item}}----{{index}}</p>
            <!-- (v,i) in 数组
                v:数组中的每个元素
                i:数组中元素的下标
            -->
            <hr>
            <!-- 对象 -->
            <!-- (v,k,i)in 对象
                v:值
                k:键
                i:对象中每对key-value的索引 从0开始
                注意: v,k,i是参数名,见名知意即可!
            -->
            <p v-for="value in per">{{value}}</p>
            <hr>
            <p v-for="(value,key) in per">{{value}}----{{key}}</p>
            <hr>
            <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>

        </div>
        <script src="./vue.js"></script>
        <script>
            new Vue({
                el: ‘#app‘,
                data: {
                    list: [‘a‘, ‘b‘, ‘c‘],
                    per: {
                        name: ‘老王‘,
                        age: 38,
                        gender: ‘男‘
                    }
                },
                methods: {

                }
            })
        </script>
    </body>

 

Vue 知识整理—03-指令3

标签:methods   四种   checkbox   sele   select   绑定   表单   下标   event   

原文地址:https://www.cnblogs.com/zhangyan1205/p/10929543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!