Vue学习笔记—基础语法(二)

十一、V-bind

1、例子:

<div id="app">
    <!-- v-bind可以用来绑定任意属性,包括自定义属性 -->
    <!-- v-bind:src 可以简写为 :src -->
    <img :src="user.avatar" v-bind:alt="user.name" :title="user.name">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            user: {
                avatar: 'https://cn.vuejs.org/images/dcloud.gif',
                name: '张三'
            }
        }
    })
</script>

注意:

V-bind:src 可以简写成 :src
V-bind 可以用来绑定任意属性,包括自定义属性


十二、style 和 class 的绑定

1、例子:

<head>
    <style>
        .ac {
            color: #e00;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :style="{ width: divWidth }">box1</div>
        <!-- 样式绑定一个对象,也可以和原生样式一起使用,最终渲染结果会合并 -->
        <div :style="styleObj" style="color: #fff">box2</div>

        <!-- 可以直接把data作为class使用 -->
        <div :class="className">box</div>
        <!-- 三目运算表达式绑定class -->
        <div :class="active ? 'ac' : '' ">box3</div>
        <!-- 绑定对象 -->
        <div :class="{ ac: active }">box4</div>
        <!-- 绑定数组 -->
        <div :class="[className, className2, 'ac']">box5</div>
        <!-- 绑定数组里再嵌套对象 -->
        <div :class="[className, className2, { ac: active }]">box6</div>
        <!-- 绑定的class和原生class可以共存,会合并到一起 -->
        <div :class="[className, className2]" class='ac'>box7</div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                divWidth: '200px',
                styleObj: {
                    height: '300px',
                    width: '300px',
                    backgroundColor: 'red'
                },
                active: false,
                className: 'current',
                className2: 'current2'
            }
        })
    </script>
</body>

注意:

(1) style 绑定

  • style 样式绑定是一个对象,也可以和原生的样式一起使用,最终渲染结果会合并

(2) class 绑定

  • 可以直接把 data 数据作为 class 使用 : <div :class="className">box</div>

  • 使用三目运算表达式绑定 class<div :class="active ? 'ac' : '' ">box3</div>

  • 使用对象绑定 class<div :class="{ ac: active }">box4</div>

  • 使用数组绑定 class<div :class="[className, className2, 'ac']">box5</div>

  • 使用数组嵌套对象绑定 class<div :class="[className, className2, { ac: active }]">box6</div>

  • 绑定的 class 和原生的 class 可以共存,会合并到一起:

    <div :class="[className, className2]" class='ac'>box7</div>


十三、V-model(双向数据绑定)

1、input 的 V-model 的原理:

<div id="app">
    <!-- input的v-model的原理 -->
    <input type="text" :value="username" @input="handleUsernameInput">
    {{username}}
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        methods: {
            handleUsernameInput (e) {
                this.username = e.target.value
            }
        }
    })
</script>

注意:

  • Vue 里面 input 有一个单独的事件是 @input@input="handleUsernameInput"

  • e.target.value 里面会取到 input 当前的状态

  • 面试题:如何手动实现 v-model

2、checkbox 的 V-model 的原理

<div id="app">
    <p>
        <label><input @change="handle" :checked="likes.includes('唱')" type="checkbox" value="唱">唱</label>
        <label><input @change="handle" :checked="likes.includes('跳')" type="checkbox" value="跳">跳</label>
        <label><input @change="handle" :checked="likes.includes('rap')" type="checkbox" value="rap">rap</label>
        <label><input @change="handle" :checked="likes.includes('篮球')" type="checkbox" value="篮球">篮球</label>
    </p>
    {{likes}}
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            likes: ['唱']
        },
        methods: {
            handle(e) {
                const value = e.target.value
                if (this.likes.includes(value)) {
                    this.likes = this.likes.filter(like => {
                        return like !== value
                    })
                } else {
                    this.likes.push(value)
                }
            }
        }
    })
</script>

3、V-model(双向数据绑定):

<div id="app">
    <input type="text" v-model="username">
    {{username}}
    <!-- 指令修饰符:lazy再change的时候才会修改 -->
    <input type="text" v-model.lazy="username1">
    {{username1}}
    <!-- 双向绑定选中的value值,默认为空则一个都不选中,默认值为哪一个value就默认选中它 -->
    <select v-model="like">
        <option value="唱">唱</option>
        <option value="跳">跳</option> 
        <option value="rap">rap</option>
        <option value="篮球">篮球</option>
    </select>
    {{like}}

    <select v-model="likes" multiple size="2">
        <option value="唱">唱</option>
        <option value="跳">跳</option>
        <option value="rap">rap</option>
        <option value="篮球">篮球</option>
    </select>
    {{likes}}

    <p>
        <label><input v-model="likes" type="checkbox" value="唱">唱</label>
        <label><input v-model="likes" type="checkbox" value="跳">跳</label>
        <label><input v-model="likes" type="checkbox" value="rap">rap</label>
        <label><
            v-model="likes" type="checkbox" value="篮球">篮球</label>
            {{likes}}
            </p>

    <p>
        你要找
        <input type="radio" v-model="friend" value="男朋友">男朋友
        <input type="radio" v-model="friend" value="女朋友">女朋友
        {{friend}}
    </p>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            username1: '',
            like: '篮球',
            likes: [],
            friend: ''
        }
    })
</script>

注意:

  • 当双向数据绑定多选框和单选框的时候必须要给 value

  • 双向绑定选中的 value 值,默认为空则一个都不选中,默认值为哪一个 value 就默认选中它

  • 在双向数据绑定单选框的时候可以不用写 name

4、V-model 指令修饰符

  • 修饰符 .lazy
    • lazychange 的时候才会修改
  • 修饰符 .number
    • number 只能输入数字(会直接解析成数字)
  • 修饰符 .trim
    • trim 会把输入内容的前后空白去掉

十四、Event-modifier(修饰符)

1、例子:

<div id="app">
    <!-- 事件修饰符:阻止默认事件 -->
    <form @submit.prevent="handelSubmit">
        <input type="text">
        <button>提交</button>
    </form>

    <div @click="handelDivClick" style="padding: 30px;border: 1px solid #e00;">
        <!-- 阻止冒泡 -->
        <p @click.stop="handelPClick" style="background-color: aqua;">文字文字文字文字文字文字文字文字文字</p>
    </div>
    <!-- 事件只能触发再div本身,子元素的点击不会触发 -->
    <div @click.self="handelDivClick" style="padding: 30px;border: 1px solid #e00;">
        <p style="background-color: aqua;">文字文字文字文字文字文字文字文字文字</p>
    </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            handelSubmit () {
                console.log(123)
            },
            handelDivClick () {
                console.log('div')
            },
            handelPClick () {
                console.log('p')
            }
        }
    })
</script>

2、事件修饰符

  • .prevent *:阻止默认的提交事件 => 等价于 *e.preventDefault()
  • .stop :阻止事件冒泡 => 等价于 e.stopPropagation()
  • .capture :让绑定的这个事件在捕获阶段去处理
  • .self :事件只能触发再本身,子元素的点击不会触发事件
  • .once :事件只会触发一次
  • .passive :滚动事件的默认行为(即滚动行为)将会立即触发,而不会等待 onScroll 完成

3、按键修饰符

  • .enter :确认
  • .tab :回车
  • .delete :删除 && 退格
  • .esc :退出
  • .space :空格
  • .up :上
  • .down :下
  • .left :左
  • .right :右

4、系统修饰键

  • .ctrl :ctrl 键
  • .alt :alt 键
  • .shift :shift 键
  • .meta :Windows 键

5、鼠标按钮修饰符

  • .left :左键
  • .right :右键
  • .middle :滚轮

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Vue学习笔记—基础语法(二)

文章字数:2k

本文作者:Spicy boy

发布时间:2018-05-06, 17:52:21

最后更新:2021-03-08, 17:19:55

原始链接:http://www.spicyboy.cn/2018/05/06/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-%E4%BA%8C/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏