[Vue] vue2.0

时间:2023-10-16 11:59:20

[Vue] vue2.0

vue实例

  • 所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象

  • 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值

  • Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。 api

var app01 = new Vue({
el: "#app", //里面是选择器可以是id,class,body...
data: {
msg: 'welcome vue'
},
methods: {
}
});

vue实例的简单方法

  • vm.$el ->就是元素
  • vm.$data ->就是data
  • vm.$mount ->手动挂载vue程序
  • vm.$options ->获取自定义属性
  • vm.$log() ->查看现在数据的状态
  • vm.$destroy ->销毁对象

生命周期

[Vue] vue2.0

template模板

render-function

实例属性

文本插值

<span>Message: {{ msg }}</span>

v-once 指令,执行一次,数据改变时内容并不更新

<span v-once>这个将不会改变: {{ msg }}</span>

旧版 :{{ *msg }}数据只绑定一次

原始 HTML

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

旧版 : :{{{ msg }}}html转义输出

使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

每个绑定都只能包含单个表达式

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

常见指令
  • v-model="" 一般用于表单,双向数据绑定
  • v-for = "item in arr" 数组
  • v-on:click="函数"
  • v-bind:参数="值"
  • v-show='true/false' //true/false可以是一段语句

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>

在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

动态参数(new)

<a v-bind:[attributeName]="url"> ... </a>

{
data:{
return {
attributeName:'href',
url:'www.baidu.com',
}
}
}

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。总之就是之前能够动态改变绑定的参数的值,现在绑定的参数也可以动态改变。

用于动态切换绑定的事件比较好用,mouseenter,mouseleave

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a> <!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a> <!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性

任何复杂逻辑,你都应当使用计算属性

计算属性的使用

  computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数:

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

计算属性缓存 vs 方法

在表达式中调用方法来达到同样的效果

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}

两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

计算属性 vs 侦听属性

通常更好的做法是使用计算属性而不是命令式的 watch 回调

var vm = 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
}
}
}) //计算属性
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

计算属性的 setter

计算属性默认只有 getter ,不过在需要时你也可以提供一个 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]
}
}
}
// ...

侦听器

当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

vm.$watch API

Class 与 Style 绑定

在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强,表达式结果的类型除了字符串之外,还可以是对象或数组

绑定 HTML Class

//对象语法
<div v-bind:class="{ active: isActive }"></div> //v-bind:class 指令也可以与普通的 class 属性共存
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> //返回对象的计算属性
<div v-bind:class="classObject"></div> data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
} //数组语法
<div v-bind:class="[activeClass, errorClass]"></div> data: {
activeClass: 'active',
errorClass: 'text-danger'
} //用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> //数组语法中也可以使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

//对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: {
activeColor: 'red',
fontSize: 30
} //样式对象
<div v-bind:style="styleObject"></div> data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
} //数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div> //多重值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

术语表 Truthy

条件渲染

v-if 、 v-else

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no