<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
{{message}}
div>
body>
<script>
// 2、创建一个Vue的实例
var app = new Vue({
el: '#app', //用于挂载要管理的元素
data: {// 定义数据
message: '学习Vue.js'
}
});
script>
html>
属性名 | 类型 | 作用 |
---|---|---|
el |
类型: string | HTMLElement | 决定Vue实例会管理哪一个DOM |
data |
类型: Object | Function (组件当中data必须是一个函数) | Vue实例对应的数据对象 |
methods |
类型: { [key: string]: Function } | 定义属于Vue的一些方法, 可以再其他地方调用, 也可以在指令中使用 |
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。例如:
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。
无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会自动更新。
语法 | {{}} JavaScript 表达式支持 |
---|---|
普通表达式 | {{ number + 1 }} |
三元表达式 | {{ ok ? ‘YES’ : ‘NO’ }} |
三元表达式 | {{ name == ‘smyhvae’ ? ‘true’ : ‘false’ }} |
调用方法 | {{ message.split(’’).reverse().join(’’) }} |
该指令后面不需要跟任何表达
该指令表示元素只渲染一次,不会随着数据的改变而改变。
<h2 v-once>{{message}}h2>
解析数据中的html代码,渲染到页面中
<h2 v-html="url">h2>
v-text作用和Mustache比较相似:都是用于将数据显示在界面中, 不同的是 v-text 是写在属性中
v-text通常情况下,接收一个string类型
<h2 v-text="text">h2>
v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
<h2 v-pre>{{message}}h2>
在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。
v-cloak指令和CSS 规则一起用的时候,能够解决插值表达式闪烁的问题(即:可以隐藏未编译的标签直到实例准备完毕)
<div id="app" v-cloak>
<h2>{{message}}h2>
div>
style
和class
:
绑定class有两种方式
- 对象语法
- 数组语法
:class
后面跟的是一个对象。
<h2 :class="{'active': isActive}">Hello Worldh2>
<h2 :class="{'active': isActive, 'line': isLine}">Hello Worldh2>
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello Worldh2>
<h2 class="title" :class="classes">Hello Worldh2>
:class
后面跟的是一个数组。
<h2 class="title" :class="['active','news']">{{message}}h2>
<h2 class="title" :class="[active,news]">{{message}}h2>
<h2 class="title" :class="getClasses()">{{message}}h2>
我们可以利用v-bind:style来绑定一些CSS内联样式
绑定class有两种方式
对象语法
style
后面跟的是一个对象类型key
是css属性名value
是具体赋的值, 可以来自data
中的属性:style="{color: currentColor, fontSize: fontSize + 'px'}"
style
后面跟的是一个数组类型, 多个值以 , 分隔<div v-bind:style="[baseStyles, fontColor]"></div>
/* js */
baseStyle: {background: 'lime'},
fontSize: {fontSize: '80px'}
计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题
计算属性是基于它们的响应式依赖进行缓存的
在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示
firstName
和lastName
两个变量,我们需要显示完整的名称。{{firstName}} {{lastName}}
将上面代码转换成计算属性
/* html */
<h2>{{fullNmae}}</h2>
/* js */
computed: {
fullNmae: function () {
return this.firstNmae + ' ' + this.lastNmae;
}
}
getter
和一个setter
getter
来读取。methods
里面的数据不管发没发生变化, 只要调用了都会执行函数(有的时候数据没发生变化我们不希望调用函数)computed
计算属性会进行缓存, 如果数据没发生变化,函数只会被调用一次(数据发生变化才会调用函数)methods
不管数据发没发生变化都会调用函数computed
只有在依赖数据发生变化时才回调函数@
methods
中定义方法, 以供@click
调用时, 需要注意参数问题()
可以省略
event
参数传递进去event
时, 可以通过$event
传入事件v-on
提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下修饰符 | 作用 |
---|---|
.stop | 阻止冒泡。本质是调用 event.stopPropagation() |
.prevent | 阻止默认事件行为 本质是调用 event.preventDefault() |
.{keyCode | keyAlias } | 当事件是从特定键触发时才触发回调 |
.once | 事件只触发一次 |
<h2 v-if="score>=90">优秀h2>
<h2 v-else-if="score>=80">良好h2>
<h2 v-else-if="score>=60">及格h2>
<h2 v-else>不及格h2>
v-if-else-if
一个问题: 涉及到了Vue底层, 虚拟DOM virtual DOM
点击切换表单后,input的value值并没有被清空,为什么?
input
表单时, 我们输入上的value
, 点击按钮切换表单时会发现value
值还存在, 但是input
元素确实切换了, 这是因为什么呢?<span v-if="isUser">
<label for="user">用户名label>
<input type="text" placeholder="用户名" id="user" key="user">
span>
<span v-else>
<label for="email">邮箱label>
<input type="text" placeholder="邮箱" id="email" key="email">
span>
<button @click="isUser=!isUser">切换类型button>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
script>
Vue
出现类似重复利用的问题, 可以给对应的input
添加 key
key
不同, 这样 vue
就会创建一个全新 input
元素v-show的用法和v-if非常相似,也用于决定一个元素是否渲染
<h2 v-show="isShow">{{message}}h2>
v-for="(item, index) in items"
<ul>
<li v-for="(item, index) in name">
{{index+1}}.{{item}}
li>
ul>
v-for="(value, key, index) in items"
<ul>
<li v-for="(value, key, index) in info">
{{index+1}}.{{value}}
li>
ul>
v-for
时,给对应的元素或组件添加上一个:key
属性。Diff
算法有关系。使用
v-for
更新已渲染的元素列表时,默认用就地复用策略; 如果列表数据修改的时候, 它会根据key值去判断某个值是否修改, 如果修改, 则重新渲染这一项, 否则复用之前的元素; 我们在使用的使用经常会使用index
(即数组的下标)来作为key
,但其实这是不推荐的一种使用方法;
Vue.set(vm.items, indexOftem, newValue)
vm.$set(vm.items ,indexOften,newValue)
当它们处于同一节点,
v-for
的优先级比v-if
更高,这意味着
v-if
将分别重复运行于每个v-for
循环中。避免
v-if
和v-for
用在一起
v-model指令
来实现表单元素和数据的双向绑定
v-model
这个属性。v-bind
: 只能实现数据的单向绑定, 从M自动绑定到v。v-model
: 只有v-model
才能实现双向数据绑定。注意, v-model后
面不需要跟冒号v-model
只能运用在表单元素中, 或者用于自定义组件。常见的表单元素包括: input(radio,text,address,email...) ,select, checkbox, textarea.
<input type="text" v-model="message">
<input type="text" :value="message" @input="message = $event.target.value">
v-model
指令来实现表单元素和数据的双向绑定2.textarea绑定v-model![]()
v-model
表单类型 | 单选/多选情况 | 绑定的值 |
---|---|---|
v-model: radio |
多个单选框时 | 绑定的值是value |
v-model: checkbox |
单个勾选框 | v-model即为布尔值 |
多个复选框 | 选中多个, 对应的data 属性是一个数组 |
|
v-model: select |
单选 | v-model 绑定的是一个值 |
多选 | v-model 绑定的是一个数组 |
value
赋值而已
value
中的值, 都是在定义input中直接给定的v-bind:value
动态的给value绑定值修饰符 | 作用 |
---|---|
.lazy |
当表单失去焦点 或按下回车 时,data 中的数据才会更新 |
.number |
输入的内容转换为number 数据类型 |
.trim |
过滤内容的两侧空格 |
- 为何需要自定义指令
- 内置指令不满足需求
Vue.directive('focus', {
inserted: function (el) {
el.focus()// 获取元素的焦点
}
})
// 使用自定义指令
<input type="text" v-focus>
Vue.directive('color', {
// bind声明周期, 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
// el 为当前自定义指令的DOM元素
// binding 为自定义的函数形参 通过自定义属性传递过来的值 存在 binding.value 里面
bind: function(el, binding){
// 根据指令的参数设置背景色
// console.log(binding.value.color)
el.style.backgroundColor = binding.value.color;
}
});
// 使用带参数自定义指令
<input type="text" v-color='msg'>
directives
的选项 用法和全局用法一样directives: {
focus: {
inserted: function(el) {
el.focus();
}
}
}
- 侦听器的应用场景
- 数据变化时执行
异步
或开销较大的操作
- 注意: watch 中的属性 一定是data 中 已经存在的数据
// 当data中的: firstName属性或lastNames属性改变时, 会自动触发对应的watch
watch: {
firstName(val) { // val: 表示变化后的值
this.fullName = val + ' ' + this.lastName;
},
lastName(val) {
this.fullName = this.firstName + ' ' + val;
}
}
概念: Vue.js允许我们自定义过滤器,可被用作一些常见的
文本格式化/处理
。过滤器可以用在两个地方: mustache插值表达式、v-bind表达式。
过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。
过滤器不改变真正的
data
,而只是改变渲染的结果,并返回过滤后的版本
- 全局注册时是filter,没有s的。而局部过滤器是filters,是有s的
- 支持级联操作(对前一个过滤的数据再次进行过滤处理)
Vue.filter()
自定义一个全局过滤器。这样的话,每一个Vue的对象实例(每一个VM实例
)都可以拿到这个过滤器。它接收两个参数
: 过滤器的名称
、过滤器函数
。<div>{{msg | upper}}div>
<div>{{msg | upper | lower}}div>
<div :class="msg | upper">div>
<div>{{date | format('yyyy-MM-dd')}}div>
<script>
// 1.全局过滤器
Vue.filter('upper', (val) => {
// val就是要处理的数据
return val.charAt(0).toUpperCase() + val.slice(1);
})
// 2.处理带参数过滤器
Vue.filter('format', (date, arg) => {
// arg: 传递的参数
if (arg === 'yyyy-MM-dd') {
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
})
script>
当前vue对象
的el指定的监管区域
有用。
<td>{{price | showPrice}}td>
<script>
const app = new Vue({
filters: {
showPrice(price) {
return '¥' + price.toFixed(2);
}
}
})
script>
事物从出生到死亡的过程
Vue实例从创建到销毁的过程,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
主要阶段
挂载(初始化相关属性)
更新(元素或组建的变更操作)
销毁(销毁相关属性)
钩子函数 | 过程 |
---|---|
beforeCreate | 在实例初始化之后, 数据观测和事件配置之前被调用此时data和methods以及页面的DOM结构都没有初始化什么都做不了 |
created | 在实例创建完成后被立即调用此时data 和 methods已经可以使用但是页面还没有渲染出来 |
beforeMount | 在挂载开始之前被调用此时页面上还看不到真实数据只是一个模板页面而已 |
mouted | el被新创建的vm.$el替换, 并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件 |
beforeUpdate | 数据更新时调用,发生在虚拟DOM打补丁之前。 页面上数据还是旧的 |
update | 由于数据更改导致的虚拟DOM重新渲染和打补丁, 在这之后会调用该钩子。页面上数据已经替换成最新的 |
beforeDestroy | 实例销毁之前调用 |
destroyed | 实例销毁后调用 |