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