本文是Vue.js的基础教程笔记，涵盖了声明式渲染、条件与循环、处理用户输入、组件化应用构建、Vue实例、模板语法、计算属性和侦听器等核心概念。详细介绍了v-if、v-for、事件处理、表单输入绑定以及组件的基础使用，帮助读者快速掌握Vue开发。
基础部分
介绍
声明式渲染
{{}}
条件与循环
v-if / v-for
处理用户输入
v-on
组件化应用构建
vue实例
简单介绍了一个vue实例有哪些元素组成
完整的组成元素API文档
创建vue实例
数据与方法
- data对象中的所有的 property 被加入到 Vue 的响应式系统中。
- 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
- Object.freeze()加入其中，响应系统无法再追踪变化（不再响应式）
- 实例属性与方法参考API文档
生命周期钩子
- 定义：每个 Vue 实例在被创建时都要经过一系列的初始化过程运行的一些函数。
用户可以在不同阶段添加自己的代码。- 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
- 不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止
经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。- 生命周期钩子函数
beforeCreated
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
模板语法
插值
文本
- “Mustache”语法 (双大括号) 的文本插值：{{}}
- 一次性地插值，当数据改变时，插值处的内容不会更新：v-once
原始HTML
- v-html
Attribute
- 属性变量：v-bind
使用JavaScript表达式
- 双大括号,v-bind内可以写单个表达式
指令
参数
- v-bind 响应式更新 HTML attribute
- v-on 监听dom事件
动态参数
- 2.6.0新增 代码如下
修饰符
- .prevent
缩写(语法糖)
- v-bind: -> :
- v-on: -> @
// 动态参数
// 如果attributeName为herf 相当于:href="url"
<a v-bind:[attributeName]="url"></a>
// eventName可以为click,focus等 相当于@click="doSomething"
<a v-on:[eventName]="doSomething"></a>
// 1. 动态参数为null时，可以被显性地用于移除绑定。
// 2. **非字符串类型** 某些字符，如**空格和引号** 无效并触发警告
// 3. 可以使用计算属性代替复杂的表达式
// 4. 避免使用大些字符
计算属性和侦听器
计算属性
- 基础例子
<p>{{reversedMessage}}}</p>
computed: {
reversedMessage: function() {
return this.xxx.join('')
}
}
- 计算属性缓存vs方法
计算属性是基于它们的响应式依赖进行缓存的有缓存，减小开销- 计算属性vs侦听属性
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: fucntion (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
侦听器
- 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
// 执行异步操作（访问API）设置中间状态
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
var watchExampleVM = new Vue({
el: '$watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
question: function (newQ, oldQ) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (res) {
vm.answer = _.capitalize(res.data.answer)
}).catch(function (err) {
vm.answer = 'Error! Could not reach the API.' + err
})
}
}
})
Class 与 Style 绑定
// 一、绑定HTML Class
// 1.对象语法
<div
v-bind:class="{ active: isActive }"
></div>
<div
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
<div
v-bind:class="classObject"
></div>
<!-- 相当于把原先对象抽成classObject对象放在计算属性中 -->
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
// 2.数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
// 3.数组内有对象
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
// 4.组件内class
<my-component class="baz boo"></my-component>
<my-component v-bind:class="{ active: isActive }"></my-component>
// 二、绑定内联样式
// 1.对象
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
// 2.抽成对象
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
// 3.数组（多个样式对象）
<div v-bind:style="[baseStyles, overridingStyles]"></div>
// 4.自动添加针对不同浏览器的前缀
// 5.多重值（往后备用样式）
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
条件渲染
v-if
1.v-if v-else-if v-else 条件性的渲染
-
在
<template>元素上使用 v-if 条件渲染分组 -
用 key 管理可复用的元素
// 加了key就会被重新渲染而不复用该标签 <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
v-show
1.(不支持template元素) 始终被渲染并保留在DOM中 相当于display切换
v-if vs v-show
1.v-if 切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
3.频繁地切换用 v-show 否则 v-if
v-if 与 v-for一起使用
1.不推荐同时（同一个标签内）使用 v-if 和 v-for
2.当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
列表渲染
-
遍历数组：
v-for="item in items / (item, index) in items / item of items"
(序号 index) -
遍历对象：
v-for="(value, name) in object / value in object / v-for="(value, name, index) in object""
(键名 name 索引 index)用字符串或数值类型的值作为 v-for 的 key。
-
数组更新检测
1.变更方法（变更原数组）：push() pop() shift() unshift() splice() sort() reverse()
2.非变更方法（返回新数组）：filter() concat() slice()
3.由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理 -
显示过滤/排序后的结果
计算属性
双层循环不能计算属性时可以直接用方法
<ul v-for="set in sets"> <li v-for="n in even(set)">{{ n }}</li> </ul> data: { sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } -
v-for循环整数： v-for=“n in 10”
-
<template>上可使用 v-for 渲染分组
事件处理
监听事件
v-on
事件处理方法
v-on:click=“greet”
内联处理器方法：
1.v-on:click=“say(‘hi’)”
2.在内联语句处理器中访问原始的 DOM 事件:
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
methods: {
warn: function (message, event) {
if (event) {
event.preventDefault()
}
alert(message)
}
}
事件修饰符
1.为了方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节
2. .stop （click: 阻止事件继续传播）
3. .prevent （submit: 不再重载页面）
4. .capture （click: 使用事件捕获模式）
5. .self （click: 是当前元素自身时触发）
6. .once （click: 2.1.4新增–只会触发一次）
7. .passive （scroll: 2.3.0 新增–立即触发）
8. 串联调用时顺序很重要，不同顺序会产生不同结果
按键修饰符
<!-- enter -->
<input v-on:keyup.enter="submit">
<!-- page-down -->
<input v-on:keyup.page-down="onPageDown">
<!-- 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符 -->
按键码（已经被废弃）
别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰符
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
.exact (2.5.0新增–修饰符允许你控制由精确的系统修饰符组合触发的事件。)
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
鼠标按钮修饰符 (2.2.0新增)
.left
.right
.middle
表单输入绑定
基础用法
文本
<input v-model="message" placeholder="edit me">
多行文本
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框
<input type="checkbox" id="checkbox" v-model="checked">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
选择框
<!-- 单选 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<!-- 多选 -->
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
值绑定
复选框
// 不知道这个会在哪种场景下使用???
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 选中时 vm.toggle === 'yes'
// 没有选中时 vm.toggle === 'no'
单选按钮
// 不知道这个会在哪种场景下使用???
<input type="radio" v-model="pick" v-bind:value="a">
// 选中时 vm.pick === vm.a
选择框的选项
// 不知道这个会在哪种场景下使用???
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 选中时
// typeof vm.selected // => 'object'
// vm.selected.number // => 123
修饰符
.lazy
在“change”时而非“input”时更新
.number
自动将用户的输入值转为数值类型
.trim
自动过滤用户输入的首尾空白字符
在组件上使用v-model
组件基础
基本示例
组件的复用
1.每用一次组件，就会有一个它的新实例被创建
2.一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
组件的组织
嵌套的组件树
两种组件的注册类型：全局注册和局部注册
通过Prop向子组件传递数据
父传子
单个根元素
每个组件必须只有一个根元素
监听子组件事件
1.子组件向父组件派发事件并监听
2.使用事件抛出一个值
// 子组件
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
// 父组件
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
// 或父组件
<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>
// 作为第一个参数传入
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
3.在组件上使用 v-model
// 子组件
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
// 父组件
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
// 或
<custom-input v-model="searchText"></custom-input>
通过插槽分发内容
<div><slot></slot></div>
动态组件
<component v-bind:is="currentTabComponent"></component>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
