Vue学习笔记

vue-cli(vue脚手架)

第一步，安装node.js
node --version 查看node.js版本
npm -v 查看npm版本
第二步，安装vue-cli（可以不指定版本）
npm install -g vue-cli@2.9.6
vue -V 查看vue-cli版本
第三步，新建项目
vue init webpack vue_demo
第四步，启动项目
npm run dev

自定义事件实现父子组件交互

第一种是在标签上绑定事件监听

1. 在父组件中的标签上使用@自定义方法名=“方法名”

<Menu :menus="menus" :webSite="webSite" @addMenu="addMenu"/>

2. 在子组件中使用this.$emit(‘方法名’,形式参数)调用

this.$emit('addMenu',menu)

第二种是用代码动态绑定

1. 在父组件中的标签上使用ref属性获取标签引用

<Menu :menus="menus" :webSite="webSite" ref="menu"/>

2. 并在父组件中定义mounted()方法

mounted () {
  this.$refs.menu.$on('addMenu', this.addMenu)
}

子组件中方法调用方式不变

消息订阅与发布组件pubsub

组件安装命令
npm install --save pubsub-js
引入依赖
import PubSub from 'pubsub-js'
订阅消息(绑定监听)

PubSub.subscribe('add', (msg, data) => {
  this.addMenu(data) // 调用方法实现功能
})

注意：指定回调的时候可以用function，这里推荐使用箭头函数，因为箭头函数的this是当前最上面一层，用function的话this就是PubSub了，两种的作用域是不一样的
发布消息(调用方法)

PubSub.publish('add', menu)

slot插槽

父组件

<slot name="s1">默认插槽内容</slot>

子组件

<div slot="s1">
	版权所有：http://www.xxx.com
</div>

Ajax框架

1.vue-resource

（1）安装命令
npm install vue-resource
（2）全局引入
main.js里
import VueResource from 'vue-resource'
// 声明使用插件 底层会给vm和组件对象添加一个属性 $http
Vue.use(VueResource)
（3）使用

this.$http.get(url).then(response => {// 请求成功
	console.log(response.body)
}, resp