首页前端vue

个人学习笔记，官方教程自行整理

# 简介

  • Vue.js 是一套构建用户界面的渐进式框架
  • Vue 只关注视图层， 采用自底向上增量开发的设计
  • Vue 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

# Vue 实例

  • 每个 Vue 应用都通过实例化 Vue 来实现
  • 变量名 vm 是受到了 MVVM 模型的启发
  • el 参数绑定对应 DOM 元素
  • data 定义属性
  • methods 定义函数
var vm = new Vue({
    el: '#app',
    data: {
        msg: 'test'
    },
    methods: {
        handle() {
            alert("alert")
        }
    }
})

# 插值

# 文本插值

  • {{...}}（双大括号）
<span>Message: {{ msg }}</span>
  • v-text 指令，用于文本插值
<p v-text="msg"><p>
data: {
    msg: 'hello'
}

v-text 会覆盖元素中原本的内容，{{...}}只会替换自己的这个占位符，不会把整个元素内容替换

# HTML 插值

  • v-html 指令，用于 HTML 插值
<span v-html="rawhtml"></span>
data: {
    rawhtml: '<p>hello</p>'
}

# 属性

  • v-bind 指令，用于属性绑定
<button v-bind:disabled="isButtonDisabled">Button</button>
data: {
    isButtonDisabled: true
}
  • v-bind 缩写
<button :disabled="isButtonDisabled">Button</button>

# JS 表达式

  • 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
{{number + 1}}
{{ok ? 'YES' : 'NO'}}
{{message.split('').reverse().join('')}}
注意 JS 表达式和 JS 语句的区别
# 指令
  • v-bind 指令，如前文所示
  • v-on 指令，用于监听 DOM 事件
<a v-on:click="doSomething">...</a>
methods: {
    doSomething() {
        alert("alert")
    }
}
  • v-on 缩写
<a @click="doSomething">...</a>
  • v-model 指令，用于在表单 <input>、<textarea> 及 <select> 元素上实现双向数据绑定
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
  • v-if 指令，用于条件渲染
<h1 v-if="awesome">Vue is awesome!</h1>
data: {
    awesome: true
}
  • v-else 指令，用于表示 v-if 的 “else 块”
<div v-if="Math.random() > 0.5">
    Now you see me
</div>
<div v-else>
    Now you don't
</div>
  • v-show 指令，用于条件渲染
<h1 v-show="ok">Hello!</h1>
v-if 和 v-show 的区别：
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display 样式
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
  • v-for 指令，用于列表渲染
  • v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>
new Vue({
    el: '#example-1',
    data: {
        items: [
            { message: 'Foo' },
            { message: 'Bar' }
        ]
    }
})
  • v-for 也可以遍历一个对象的 property
# 计算属性和侦听器
# 计算属性
  • 计算属性，通过 computed 来实现复杂逻辑运算
  • 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
            //this 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
})
  • 计算属性可以拥有 setter
computed: {
    fullName: {
        // getter
        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}
# 侦听器
  • 侦听属性，通过 watch 来响应数据的变化
<div id="demo">{{ fullName }}</div>
new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
    },
    watch: {
        firstName: function (val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
            this.fullName = this.firstName + ' ' + val
        }
    }
})
# 事件修饰符
  • .stop 阻止事件冒泡到父元素
  • .prevent 阻止元素发生默认的行为
  • .capture 内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  • .self 忽略事件冒泡和事件捕获对本元素的影响
  • .once 事件将只会触发一次
  • .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>
<!-- 2.1.4 新增 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 2.3.0 新增 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault ()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
# 表单输入绑定
  • v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
    • text 和 textarea 元素使用 value property 和 input 事件
    • checkbox 和 radio 使用 checked property 和 change 事件
    • select 字段将 value 作为 property 并将 change 作为事件
# 文本 / 多行文本
<input v-model="message">
<textarea v-model="message"></textarea>
# 复选框
  • 单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
new Vue({
    el: '...',
    data: {
        checked: false
    }
})
  • 多个复选框，绑定到同一个数组
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
new Vue({
    el: '...',
    data: {
        checkedNames: []
    }
})
# 单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">
new Vue({
    el: '#example-4',
    data: {
        picked: ''
    }
})
# 表单修饰符
  • .lazy 默认情况下， v-model 在 input 事件中同步输入框的值与数据，添加一个修饰符 lazy ，从而转变为在 change 事件中同步
<input v-model.lazy="msg" >
  • .number 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
<input v-model.number="age" type="number">
  • .trim 自动过滤用户输入的首尾空格
<input v-model.trim="msg">
# 组件
# 注册
# 全局注册
Vue.component('component-a', { /* ... */ })
new Vue({ el: '#app' })
# 局部注册
var ComponentA = { /* ... */ }
new Vue({
    el: '#app',
    components: {
        'component-a': ComponentA
    }
})