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 ->销毁对象
生命周期
template模板
文本插值
<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]
}
}
}
// ...侦听器
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
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>