Vue2
Vue对象实例
实例
var vm = new Vue()
/* eslint-disable no-new */
new Vue()
var vm = new Vue({
el: '#app', //挂载节点
template: '<App/>', //字符串模板
components: { App },
data: {
a: 1
}
})
访问实例属性与方法
//vm.a只能用作于访问data属性
//vm.$data.a 在属性前面加$可以访问vm对象的属性与方法
var vm = new Vue({
el: '#app',
template: '<App/>',
components: { App },
data: { a: 1}
})
console.log(vm.$data.a) // 1
console.log(vm.a) // 1
Vue基本概念
全局api
Vue.use
//安装 Vue.js 插件 例如:vue-resource
import vueResource from 'vue-resource'
Vue.use(vueResource);
Vue.component
//这里注册了一个全局组件
Vue.component( 'jianjun', {
template: '<p>报告非凡哥 {{ msg }}</p>',
data(){
return {
msg: '我话你啵嘴就啵嘴'
}
}
})
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件,传入一个选项对象(自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件(始终返回构造器)
var MyComponent = Vue.component('my-component')
Vue.extend
//使用基础 Vue 构造器,创建一个“子类”。
//data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数
- -
选项 (创建Vue实例对象可以使用的选项)
所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。
这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同, this.fetchTodos 的行为未定义。
data
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // -> 1
vm.$data === data // -> true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
//缩写
data () {
return { a: 1 }
}
})
el
var vm = new Vue({
el: '#app', //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
template: xxx,
components: xxx,
data: {
xxx
}
})
template
var vm = new Vue({
el: xxx,
template: '<jianjun></jianjun>', //一个字符串模板作为 Vue 实例的标识使用。
components: { },
data: {
xxxx
}
})
methods
//methods 将被混入到 Vue 实例中。
var vm = new Vue({
el: xxx
components: xxx
data (){
xxxx
}
methods: {
say: function () {
console.log("吔屎啦,梁非凡!")
}
}
})
vm.say() //可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。
实例属性/方法(Vue实例可以调用的属性/方法)
vm.$data
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
vm.$el
Vue 实例使用的根 DOM 元素。
vm.$on、vm.$emit
- vm.$on 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
- vm.$emit 触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"
//有点脑抽的想法 ↓↓↓↓↓↓↓↓
var vm = new Vue({
el: xxx,
data:{
sum: 0
},
methods:{
play(){
this.$emit('diy')
},
sayTotal(){
this.sum += 1
}
}
})
vm.$on('click', function () {
vm.sayTotal()
})
<p @diy="sayTotal">{{ sum }}</p>
<button @click="play">吔屎啦</button>
<!--↑↑↑↑↑↑↑↑↑↑-->
指令
v-text
//js
var vm = new Vue({
el: '#app',
data: {
msg: '报告非凡哥',
msg2: '<strong>吔屎啦!</strong>'
}
})
// html
<div id="app">
<p v-text="msg"></p>
<p>{{ msg }}</p>
<p v-text="msg2"></p>
<p>{{ msg2 }}</p>
</div>
结果 ---没有解析字符串
报告非凡哥
报告非凡哥
<strong>吔屎啦!</strong>
<strong>吔屎啦!</strong>
v-html
//js
var vm = new Vue({
el: '#app',
data: {
msg: '报告非凡哥',
msg2: '<strong>吔屎啦!</strong>'
}
})
//html
<div id="app">
<p v-html="msg"></p>
<p v-html="msg2"></p>
</div>
结果 ---解析会解析字符串
报告非凡哥
吔屎啦!
v-show
当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。
//根据表达式之真假值,切换元素的 display CSS 属性。
<div id="app">
<p v-show="true">我系非凡哥</p><!--隐藏-->
<p v-show="false">我系屎坑王</p><!--显示 ---display:none -->
</div>
v-if 、v-else 、v-else-if
//根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。
//当条件变化时该指令触发过渡效果。
<div id="app">
<p v-if="false">我系非凡哥1</p><!--true -->
<p v-else>我系非凡哥2</p><!--true -->
<p v-if="false">我系非凡哥3</p><!--false -->
<p v-else-if="false">我系非凡哥4</p><!--false -->
<p v-else>我系非凡哥5</p><!--true -->
</div>
//相当于
if(){
显示:我系非凡哥1
}else{
显示:我系非凡哥2
}
if(){
显示:我系非凡哥3
}else if(){
显示:我系非凡哥4
}else{
显示:我系非凡哥5
}
v-for
//js
var vm = new Vue({
el: '#app',
data: {
sayList:[
{ msg: '吔屎啦,梁非凡! x1' },
{ msg: '吔屎啦,梁非凡! x2' },
{ msg: '吔屎啦,梁非凡! x3' },
{ msg: '吔屎啦,梁非凡! x4' },
{ msg: '吔屎啦,梁非凡! x5' },
]
}
})
<!--html-->
<div id="app">
<p>非凡:昨天怎么不上班!</p>
<p v-for="say in sayList">醒哥: {{ say.msg }}</p>
<p v-for="(say, index) in sayList" >醒哥: {{ say.msg }} | {{ index }}</p>
</div>
//结果
<p>非凡:昨天怎么不上班!</p>
<p>醒哥: 吔屎啦,梁非凡! x1</p>
<p>醒哥: 吔屎啦,梁非凡! x2</p>
<p>醒哥: 吔屎啦,梁非凡! x3</p>
<p>醒哥: 吔屎啦,梁非凡! x4</p>
<p>醒哥: 吔屎啦,梁非凡! x5</p>
<p>醒哥: 吔屎啦,梁非凡! x1 | 0</p>
<p>醒哥: 吔屎啦,梁非凡! x2 | 1</p>
<p>醒哥: 吔屎啦,梁非凡! x3 | 2</p>
<p>醒哥: 吔屎啦,梁非凡! x4 | 3</p>
<p>醒哥: 吔屎啦,梁非凡! x5 | 4</p>
v-on
<!-- 用在普通元素上时,只能监听 原生 DOM 事件。 -->
<!--监听单个事件-->
<button v-on:click="sayA">方法处理器</button>
<button @click="sayA">方法处理器</button>
<button @click="sayA('非凡哥',$event)">方法处理器</button>
<!--使用修饰符-->
<button @click.stop="sayA">停止冒泡</button>
<button @click.prevent="sayA">阻止默认行为</button>
<input type="text" @submit.prevent> <!--阻止默认行为,没有表达式-->
<button @click.stop.prevent="sayA">串联修饰符</button>
<input @keyup.enter="sayA"><!-- 键修饰符,键别名 -->
<input @keyup.13="sayA"><!-- 键修饰符,键代码 -->
<button @click.once="sayA">点击回调只会触发一次</button><!-- 点击回调只会触发一次 -->
<!--监听多个事件 但调用的方法不能传参数-->
<button v-on="{ mousedown: sayA, mouseup: sayB}"></button>
<!-- 用在自定义元素上时 -->
<!--监听子组件触发的自定义时间-->
<!--html-->
<div id="on-click">
<p>{{ total }}</p>
<jianjun v-on:diy-son="eatTotal"></jianjun>
</div>
//注册组件 js代码
Vue.component('jianjun', {
template: '<button v-on:click="eat">吔 +{{ counter }}!</button>',
data() {
return {
counter: 0
}
},
methods:{
eat(){
this.counter+=1
this.$emit('diy-son')
}
}
})
//创建一个 Vue 的根实例
var vm = new Vue({
el: '#on-click',
data: {
total: 0,
},
methods:{
eatTotal(){
this.total += 1
}
}
})
请注意不是子组件自定义监听是如何实现的,理清楚$on、v-on、$emit三者的关系
- v-bind