二、Vue脚手架工程

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({  render: h => h(App),}).$mount('#app')

import App from './App.vue'

new Vue({  render: h => h(App),}).$mount('#app')

render(h){  return h(APP名字)}

render: h => h(App),

var Profile = Vue.extend({  data: function () {    return {      firstName: 'Walter',      lastName: 'White',      alias: 'Heisenberg'    }  }});

export default {//组件属性... ...}

import Vue from 'vue' var a= Vue.extend({  name: 'HelloWorld',  data: function (){    return {      "firstName":'zhang',      "lastName":'san',    }  },  methods:{    method1(){},    method2(){},  }});console.log(new a); export default a;

包裹其中，也就是需要有一个跟元素，而不能是多个根元素。
中定义组件对象，
中写css样式，为了与其他组件的样式区分，加scoped属性，即。
在中，可以使用插值表达式等等方式，来写页面，并为页面赋值。
4.2组件的用法
定义好组件后，在引用组件的中，import进来该组件，就可以使用这个组件了。使用方式就是在中，写该组件的名字标签，即可。
比如在App.vue中使用HelloWorld组件，那么在App.vue的中，

import HelloWorld from './components/HelloWorld.vue'

在components属性中，加上HelloWorld组件:

export default {  name: 'App',  components: {    HelloWorld  }}

然后在中，写。那么HelloWorld组件中的内容就出现在了App.vue中。

4.3 ref属性
在使用vue后，尽量避免直接操作dom元素，否则就失去了使用vue框架的意义。那么在一个方法中，如何通过id获取到一个元素呢？这就用到了ref属性。
ref用在普通html元素中，那获取到的就是dom元素，ref写在子组件标签中，那获取到的就是VueComponent对象。
通过VueComponent对象的$refs属性，可以获取到定义的ref集合，然后再通过 .属性，来具体拿到某个元素。示例如下:

<template>  <div id="app">    <HelloWorld ref="ceshi" msg="Welcome to Your Vue.js App"/>    <div ref="ceshi1">666</div>  </div></template>

Helloword组件标签定义了ref属性，普通dom元素div定义了ref属性，通过钩子方法mounted函数来输出，如下:

export default {  name: 'App',  components: {    HelloWorld  },  mounted() {    console.log('$refs',this.$refs);    console.log('mounted-ceshi',this.$refs.ceshi);    console.log('mounted-ceshi1',this.$refs.ceshi1);  }}

输出结果如下:

可见$refs属性将我们定义的ref属性作为了key，vaule是相应的dom对象或组件对象。

组件标签上的ref获得的是VueComponent对象。

普通dom元素直接获取的dom元素内容。

4.4props属性
组件是可以多处复用的。而复用时，父组件可能会有重新定义子组件中data中属性值的需求，此时，就需要用props属性了。
props属性用于子组件中，定义父组件中可以赋值的属性。定义在props中的属性就无需再定义在data中了。
简写方式:

props:[‘key1’,‘key2’,‘key3’]

这种写法，key1,ke2,key3就是可以在父组件中赋值的属性。

全写方式:

props:{‘key1’:{type:String, //类型required:false,//是否必传default:123 //默认值}}

在props中定义的属性，也是组件中有的属性，其使用方式等同于在data中定义的属性的使用方式。
props中定义的属性，不支持运算，这样vue会报错。如果想对props属性进行运算，就定义一个中间变量，去对props属性进行运算，而不是直接对props属性进行运算。如下图:

props中，不仅可以定义属性，还可以定义函数。定义函数的意思就是通过父组件来传递函数，定义子组件中这个函数的具体实现。

子组件定义了props属性后，父组件怎么给其传值呢？
如果是固定值，则直接把props属性当作子组件标签的一个属性传值即可。如果想给子组件的props属性传vue中的数据，那么，需要写成:props属性=(父组件数据)。多加个冒号，也就是v-bind的缩写，这样，才会去vue中找对应的数据。
示例如下:
首先，定义子组件，并定义props属性。

<template>  <div class="hello">  <!--  使用props中定义的属性  -->    <h1>{{ msg }}</h1>    <h2>{{ceshi}}</h2>    <h3>{{hanshu()}}</h3>  </div></template><script>export default {  name: 'HelloWorld',  props: {    msg: String,    ceshi: String,    hanshu:Function //定义函数  }}</script>

然后，在父组件中，对这些属性进行传值，如下:

<template>  <div id="app">    <HelloWorld ref="ceshi"      <!-- 直接赋值，则直接写属性，然后赋值即可    -->  msg="Welcome to Your Vue.js App"     <!-- a是父组件定义的属性，需要在props属性前加冒号-->  :ceshi="a"     <!-- method是父组件定义的函数，加冒号引用此函数   -->  :hanshu="method"    />    <div ref="ceshi1">666</div>  </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default {  name: 'App',  components: {    HelloWorld  },  data:function (){    return {      a:'绑定props属性'    }  },  methods:{    method(){      return '函数props绑定';    }  }}</script>

4.5minix混入技术
一些共用的东西，可以提取出来，形成js，然后供所有组件使用。具体用法如下:
定义共用js：
minix.js：

export default {    data () { return {     name: 'minix',     minixName: 'minixObj',     flag: false,     obj: {     class: 'classtest',     id: 'idtest'     } }    },    mounted() { console.log('minixMounted');    },    methods: { speak() {     console.log('this is minix'); }, getData() {     return '100'; }    }}

在组件中，使用这个js的方法:

import myMinix from './minix';  //引入公用js export default {    data () { return {     name: 'todo',     lists: [1, 2, 3, 4],     obj: {     todoclass: 'todoclasstest',     id: 'idtodotest'     } }    }, mounted() { console.log('todoMounted');    },    minixs: [myMinix], // todo.vue 中声明minix 进行混合。这样引入js中的东西这个组件都有了    methods: { speak () {     console.log('this is todo'); }, submit() {     console.log('submit'); },    }}

五、自定义事件

在组件标签上，可以自定义事件，来进行子组件向父组件数据的传递。注意:上面说的props属性是父组件向子组件传数据。这里讨论子组件向父组件传数据。

这个自定义事件如何触发呢？需要在Demo组件中去定义。如点击Demo组件中的某个按钮触发selfevent事件，就在Demo组件中写@click事件，然后在回调函数中，调用this.$emit(‘selfevent’,)函数，来写selfevent的触发时机。而selfevent的触发函数，就在绑定事件的组件中定义就行。当eventself触发后，自动执行其回调函数。
需要注意的是，在组件标签上绑定事件，即使内置事件，如@click，那么vue也会当成自定义事件去解析。如果想用内置事件，则需要用@click,navite='xxx’来绑定。
自定义事件的作用就是子组件给父组件传递信息通信用的。
因为子组件定义自定义事件的触发时机，在this.$emit中，就可以传递子组件的数据，父组件写子组件的标签时，绑定自定义事件回调函数，那么在回调函数中就可以接收到子组件传递的数据。
示例如下：
首先，子组件定义自定义事件:

<template>  <div class="hello">  <!--  使用props中定义的属性  -->    <h1>{{ msg }}</h1>    <h2>{{ceshi}}</h2>    <h3>{{hanshu()}}</h3>    <div @click="demo">点我触发自定义事件</div>  </div></template><script>export default {  name: 'HelloWorld',  props: {    msg: String,    ceshi: String,    hanshu:Function //定义函数  },  methods:{    demo(){      //触发自定义事件，并向父组件传递信息      this.$emit('selfevent',this.msg,this.ceshi);    }  }}</script>

然后在父组件中，写自定义事件的回调函数，在回调函数里，就可以接收到子组件传来的数据。

<template>  <div id="app">    <HelloWorld ref="ceshi"  msg="Welcome to Your Vue.js App"  :ceshi="a"  :hanshu="method"  @selfevent="method1"    />    <div ref="ceshi1">666</div>  </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default {  name: 'App',  components: {    HelloWorld  },  data:function (){    return {      a:'绑定props属性'    }  },  methods:{    method(){      return '函数props绑定';    },    method1(a,b,c){      console.log('触发自定义事件');      console.log('接收到参数a',a);      console.log('接收到参数b',b);    }  }}</script>

由此可以看到，自定义事件就是在子组件中定义自定义事件的触发时机，并给父组件传递数据，然后在父组件定义回调函数，然后接收子组件传递的数据。

六、全局事件总线

组件间通信方式，适用于任意组件间通信。
6.1 安装全局事件总线
在main.js中，new Vue的beforeCreate函数中，安装全局事件总线

new Vue({  el:'#app',  //将app组件放入#app容器中  render: h => h(App),  beforeCreate() {      Vue.prototype.$bus=this;//安装全局事件总线，$bus就是当前应用的vm。vm中定义的属性，在各个组件中，都可以获得。上面的_proto_隐式链中获得。  }})

6.2 使用事件总线
提供数据:

<template>  <div class="hello">  <!--  使用props中定义的属性  -->    <h1>{{ msg }}</h1>    <h2>{{ceshi}}</h2>    <h3>{{hanshu()}}</h3>    <div @click="demo">点我触发自定义事件</div>  </div></template><script>export default {  name: 'HelloWorld',  props: {    msg: String,    ceshi: String,    hanshu:Function //定义函数  },  methods:{    demo(){      //触发自定义事件，并向父组件传递信息     // this.$emit('selfevent',this.msg,this.ceshi);      //全局事件总线,通过this.$bus隐式链获得vm对象上的$bus属性。      this.$bus.$emit('selfevent',this.msg,this.ceshi)    }  }}</script>

接收数据方:

methods:{    method(){      return '函数props绑定';    },    method1(a,b,c){      console.log('触发自定义事件');      console.log('接收到参数a',a);      console.log('接收到参数b',b);    },    demo(a,b){      console.log('接收到全局事件总线参数a',a);      console.log('接收到全局事件总线参数b',b);    }  },  mounted() {    console.log('vc',this.$bus);//$bus就是vm实例    //vm上绑定自定义事件，接收数据    this.$bus.$on('selfevent',this.demo);  }

在绑定事件的组件上，beforeDestory方法中，解绑事件:

 beforeDestroy() {    //对事件进行解绑    this.$bus.$off('selfevent');  }

由此可见，全局事件总线，在子组件中，还需要通过$emit方法绑定自定义事件。哪里需要接收数据，在哪里定义$bus.$on绑定自定义事件即可。

七、消息订阅与发布

实际用的不多，还是用Vue原生的消息事件总线多。这里主要有一个意识，可以依赖一些第三方类库，实现某些功能。

八、$nextTick函数

我们修改vue中的数据时，修改的是vue虚拟内存中的数据，而虚拟内存的数据更新到真实dom上，是有延迟的。如果想在真实dom更新后进行一些操作，那么就要用这个函数来执行回调函数了。看如下示例:
data中定义属性:

data:function (){    return {      change:'改变元素'    }  }

html元素中使用这个属性，

<div ref="change">{{change}}</div>    <div @click="demo1">点我改变元素内容</div>

单击事件函数,改变change属性的值:

demo1(){      console.log('change',this.$refs.change.innerHTML);     this.change='change-change';     this.$nextTick(function (){console.log('$nextTick',this.$refs.change.innerHTML);     })      console.log('no-$nextTick',this.$refs.change.innerHTML);    }

输出内容如下:

可见，先输出了没有调用$nextTick函数的旧值，后输出了$nextTick回调函数中改变后的值。

九、Vue发送ajax请求

用axios封装的方法进行发送。之前用的jquery的$.get等方法底层操作的是XMLHttpRequest对象，进行请求的发送。
axios底层也是这个对象，相当于重新对其进行了封装。不同框架进行了不同的封装而已。
axios的使用，可参考https://www.bbsmax.com/A/xl56nop95r/。

跨域的理解:
跨域是浏览器的同源策略做的保护机制。就是发送请求的浏览器的ip，端口号与发送的请求中的ip，端口号不一致时做的限制。需要注意的是，跨域请求是能发送出去的，服务器也能收到请求，并返回数据。但是浏览器收到数据后，会根据同源策略，报错。所以跨域是收到服务器的数据后报的跨域问题。
当后台给请求头加上一些信息后，浏览器就不会报错了，就会返回收到的数据。
vue-cli脚手架提供了一个与前端服务同域名，同端口号的后台服务，可以通过这个服务，在后台转发跨域请求，这样，也就避免了前端跨域的问题。
vue-cli之proxy的配置如下:
在vue.config.js配置文件中，配置:

module.exports = {  devServer:{    // 本地域名    host:'localhost',    // 本地端口    port:'8080',    open:true,    proxy:{ //配置跨域      // 当访问到 api 开头的接口时走下面的内容      '/api':{ // 最终想要访问的地址 target:'http://localhost:8088/resource', changeOrigin:true,//允许跨域 pathRewrite:{//在使用axios发送请求时，用api代表target的路径。但是真实的里面没有api，则在这里配置成'',就自动去掉api了   '^/api':'' }      }    }  }}

在发送请求的组件，引入axios，

import axios from "axios";

在发送请求的函数里定义axios请求:

methods:{    method(){      axios.get('api/login').then(   response=>{     console.log('返回数据',response);   },   error=>{     console.log('错误消息',error)   }      )    }  }

输出的response如下:

可见，data是服务器返回的数据，还有headers请求头信息可以拿到。
注意：在开发中，通过配置proxyTable来实现跨域，在生产环境，使用nginx解决跨域问题。前端静态资源都放到nginx下面。

十、插槽

在上面讲到的props属性中，父组件可以向子组件传递数据，但是不能传递子组件的dom结构。想要在父组件中定义子组件的dom结构，就要用到插槽了。
默认插槽：
子组件中，定义，进行占位，这个标签的意思就是让父组件定义这块的dom元素。
父组件中，在子组件标签内部，定义dom元素，就替换到子组件slot处了。

具名插槽：
子组件中定义多个slot标签，则需要用name做标识。父组件的子标签中，就要用slot属性指定代替的区域。

作用域插槽
数据在子组件中，但是展示数据的dom，要在父组件中定义，则使用作用域插槽。
在子组件slot标签，绑定数据:

父组件中，用scope属性定义作用域: