Markdown(使用tips)：
加粗： Ctrl/Cmd + B
标题： Ctrl/Cmd + H
插入链接： Ctrl/Cmd + K
插入代码： Ctrl/Cmd + Shift + C
行内代码： Ctrl/Cmd + Shift + K
插入图片： Ctrl/Cmd + Shift + I
无序列表： Ctrl/Cmd + Shift + L
撤销： Ctrl/Cmd + Z
用vs-code生成vue模板的小tip：
常用命令：
npm -v
cnpm -v
淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm insatall -g vue-cli
vue -V
cmd进入e盘：e: ==> cd：选择文件夹(tab补全) ==> dir: 展示目录
构建脚手架环境：
vue init webpack *projectName
子组件向父组件通信
创建一个中转站 (组件分别导入connector)
import Vue from 'vue'**
let connector = new Vue()**
export default connector
//父组件
connector.$on('phone',function (msg) {
console.log(msg)
})
//子组件
connector.$emit('phone','子组件和父组件通信')
vue-router
//第一种
<a href="#/newsDetails">新闻详情页</a>
<a href="#/goodsDetails">商品详情页</a>
<hr>
//第二种
<router-link to="/newsDetails">新闻详情页</router-link>
<hr>
路由匹配：index.js
{
path: '/newsDetails',
component: News
}
第三种匹配方法：
<router-link :to="{name:'goods'}">商品详情页</router-link>
index:
{
path: '/goodsDetails',
name: 'goods',
component: Goods
}
路由参数匹配：
//通过查询字符串的方式
<router-link :to="{name:'goods',query:{id:1}}">商品详情页</router-link>
//组件页拿参数
this.$route.query.id
<!-- 通过路由传递参数 -->
<router-link :to="{name:'news',params:{id:2}}">新闻详情页</router-link>
//组件页拿参数
this.$route.params.id
//index：
{
path: '/newsDetails/:id',
name: 'news',
component: News
}
404页面：
{
path: '*',
component: NotFound
}
重定向页面（index.html）:
{
path: '/',
redirect: {
name: 'HelloWorld'//匹配下面的主页
}
},
{
path: '/index.html',
name: 'HelloWorld',
}
编程导航(应用：前进、后退、跳转)：
//前进 后退
this.$router.go()
//跳转
this.$router.push({name:'HelloWorld'})
多视图：
//app.vue页面：
<router-view class="abc" name="h"/>
<router-view class="abc"/>
<router-view class="abc" name="f"/>
// name：匹配规则
//index.js页面：
{
path: '/',
name: 'HelloWorld',
components: {
h: hd, //匹配规则：组件
default: con,
f: ft
}
}
嵌套路由：
//index.js页面：
{
path: '/phone',
name: 'phone',
component: Phone, // http://localhost:8080/#/phone
children: [{
path: 'huawei',
name: 'phone.huawei',
component: HW, // http://localhost:8080/#/phone/huawei
children: [{
path: 'hw10',
name: 'hw10',
component: HW_ten // http://localhost:8080/#/phone/huawei/hw10
}]
}
}
axios(cnpm i axios -S):
//index.js:
import Axios from 'axios'
Axios.defaults.baseURL = 'http://47.96.29.109/vueProject/'
Vue.prototype.$ajax = Axios //挂载到vue原型上的$ajax使用
//请求数据
this.$ajax.get('http://47.96.29.109/vueProject/vue.php?title=banner')
.then( (res) => {
console.log(res);
this.banner = res.data;
})
//处理并发(请求多条数据、多个url 返回多个记录):
methods:{
send(){
let php = 'vue.php';
let title = 'banner1';
let url = php + '?title='+title
/*this.$ajax.get('http://47.96.29.109/vueProject/'+url)
.then((res)=>{
console.log(res.data)
})*/
// 分发
this.$ajax.all([
this.$ajax.get('vue.php?title=banner'),
this.$ajax.get('vue.php?title=banner'),
this.$ajax.get('vue.php?title=banner'),
])
.then(this.$ajax.spread((res1,res2,res3)=>{
console.log(res1.data)
console.log(res2.data)
console.log(res3.data)
}))
.catch((err)=>{
console.log(err)
})
}
}
导入jquery(cnpm i jqurey -S)：
//index.js
import $ from 'jquery'
Vue.prototype.$ = $
this.$.get('http://47.96.29.109:6333/users')
.then((res) => {
console.log(res);
})
element-ui：
//安装：
cnpm i element-ui -S
*组件中的data必须是函数
可以看出，注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。 这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。
而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了。
