Vue的实例是Vue框架的入口,包含了页面中的业务逻辑处理、数据模型等
new Vue({
el: '#app',
data () {
return {
swiperOption: {
autoplay: 3000,
initialSlide: 1,
loop: true,
paginationClickable :true,
pagination: '.swiper-pagination',
},
modalShow: false
}
},
computed : {
count () {
return this.$store.state.cart.cartInfos.total_nums
},
homeUrl() {
if(!this.$store.state.cart.login){
return '/login'
} else {
return '/user'
}
}
},
methods : {
showModal: function() {
if(this.modalShow) {
this.modalShow = false
} else {
this.modalShow = true
}
},
searchhandle: function(e) {
let keywords = document.querySelector('.keywords').value.trim()
if(keywords === '') {
this.$toast({
message: '未输入查找关键词',
position: 'top'
})
e.preventDefault()
} else {
localStorage.setItem('keywords',keywords)
this.$router.push({path:'/search'})
}
}
},
components: {
indexHot,
indexPhone,
indexGoods,
indexFamily,
footBar
}
router,
VueAwesomeSwiper,
store,
template: '<App/>',
})
el
- 类型:
string | HTMLElemtnt
限制:只在new创建的实例中遵守 - 提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器,也可以是HTMLElement实例。
- 在实例挂载后,元素可以用vm.$el访问
data对象
- 核心属性。Vue实例的数据对象,是Vue绑定数据到HTML标签的数据源泉,Vue框架会自动监视data里面的数据变化,自动更新数据到HTML标签上去。
- 原理:Vue会自动将data里面的数据进行递归转换为getter/setter,从而让data的属性能够响应数据变化,能自动更新HTML标签。对象必须是纯粹的对象(含有零个或多个的key/value对)
- 类型:①Object或者Function;②在组件对象中,必须是Function类型(因为组件可能被用来创建多个实例)
- 注意:不应该对data属性使用箭头函数。因为箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向Vue实例
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // -> 1
vm.$data === data // -> true
// 创建普通的Vue实例
var vm = new Vue({ data: data })
// 组件定义
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
//这里必须是函数!!!!
return {
a: 1
}
}
})
computed
- 计算属性:基于它们的依赖进行缓存,只有相关依赖发生改变才会重新求值,意味着只要message没有发生改变,多次访问reversedMessage计算属性会立即返回之前的结果,而不必再次执行函数。
- Vue的计算属性的属性会自动混入Vue的实例中,所有getter和setter的this上下文自动地绑定为Vue实例
- computed里的return实际上是一个get方法,实际上每次vm.someConputed或者页面相应变化的时候{{someComputed}},实际上访问的是它的get方法。
- 类型:
{键:函数}
{[key:string]:function | {get:function,set:function}}
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取,值只须为函数
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // -> 2 ->1+1
vm.aPlus = 3
vm.a // -> 2 ->3-1
vm.aDouble // -> 4 ->2*2
methods
- 类型:
{[key:string]:function}
- methods将混入到Vue实例中,可以通过VM实例访问这些方法,或者在指令表达式中使用,方法中的this自动绑定为Vue实例。
- 注意:不应该使用箭头函数来定义method函数,因为箭头函数绑定了父级作用域的上下文,所以this不会按照期望指向Vue实例,this.a将会是undefined
watch
- 类型:
{[key:string]:string|function|Object}
- 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象
- Vue实例将会在实例化时调用
$watch()
,遍历watch对象的每一个属性
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 监控a变量变化的时候,自动执行此函数
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1