vue学习Day 1

VUE小白

1. 实例化Vue对象

        var vm = new Vue({
            el: '#app', //控制html中的元素
            data: {  //el中用到的数据
                msg: 'hello world'//将数据渲染到页面上，不再手动操作DOM元素
            }
        })

2. HTML模板
   {{ }}为HTML模板，用于输出对象属性和函数返回值,可以在其中写变量、三元表达式、累加和方法（已经声明的方法）等等

        <p>{{ msg }}</p>
        <p>{{ count > 60 ? '合格' : '不合格' }}</p>

3. v-bind
   v-bind是vue中提供用于绑定属性的指令，“”里面可以写表达式

        <!-- v-bind是vue中提供用于绑定属性的指令，“”里面可以写表达式 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '123'" @mouseover="show">
        <!-- 简写 -->
        <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="show">  

4. v-cloak
   使用v-cloak可以解决插值表达式闪烁的问题

        <!-- 使用v-cloak可以解决插值表达式闪烁的问题 -->
        <p v-cloak>++++{{ msg }}--------</p>
        <!-- 默认 v-text是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原本的内容，但是插值表达式不会 -->
        <h4 v-text="msg">dddddddddd</h4>
        <div>{{ msg2 }}</div>

5. v-on
   v-on 缩写 @ 是vue提供的事件绑定机制
6. this
   在methods声明的函数中使用data中的变量或者methods中声明的其他方法时要使用this.xxx

                lang(){
                    // console.log(this.msg)
                    // 截取操作
                    
                    if(this.intervalID != null) return;

                    this.intervalID = setInterval(() => {
                        var start = this.msg.substring(0,1)
                        var end = this.msg.substring(1)
                        this.msg = end + start                        
                    },400)
                    // 注意：VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把
                    // 最新的数据，从data上同步到页面中去；好处；程序员只要关心数据，不需要考虑如何重新
                    // 渲染DOM页面
                },

7. 事件修饰符
   event.preventDefault() 和 event.stopPropagation()
   vue文档中为v-on提供了时间修饰符，修饰符是由点开头的指令后缀来表示的。
   7.1 .stop
   7.2 .prevent
   7.3 .capture
   7.4 .self
   7.5 .once
   7.6 .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

8. 按键修饰符
   在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

#按键码
8.1 .enter
8.2 .tab
8.3 .delete (捕获“删除”和“退格”键)
8.4 .esc
8.5 .space
8.6 .up
8.7 .down
8.8 .left
8.9 .right
8.10 .ctrl
8.11 .alt

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

• 1

  8.12 .shift
  8.13 .meta
  8.14 .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>