vue

1. 数据双向绑定：v-model
2. 绑定css：v-bind:class=“isflag ？ active：error”(引用样式)
3. 自定义组件
   全局组件

//1.自定义组件data应该返回一个函数
//2.可以在vue对象中使用自定义组件
//3.全局组件可以在任何Vue对象中使用多次
//4.由于自定义组件可以使用多次，data返回的函数则说明函数内部变量是局部变量(组件之间不会相互影响)
<div id="app">
   <button-counter></button-counter>
   <button-counter></button-counter>
</div>
<script>
var mydata={count:0}
 Vue.component('button-counter',{
     data:function(){
        //return {
           //count:0,
        //},        
        return mydata
        //自定义组件最后返回的结果，template只能返回一个根元素
        template:'<button>{{count}}</button>'
     }
 })
 new Vue({el:'#app'})
 </script>

局部组件

<div id="app3">
   <my-header>
     <button slot='left'><-</button>
     <button slot='right'>-></button>
   </my-header>
</div>
<div id="app4">
   <my-header>
     <my-title></my-title>
   </my-header>
</div>
var vue = new Vue({
  el:'#app3',
  //组件局部注册
  components:{
       'my-header':{
         template:'<div>我是头部文件</slot></div>'
        },
        'my-title':{
         template:'<div>我是标题</div>'
        }
    }
})
var vue = new Vue({
  el:'#app4',
  //组件局部注册
  components:{
       'my-header':{
            template:'<div>我是头部文件</slot></div>'
        },
        'my-title':{
            template:'<div><slot name = "left"/>我是标题<slot name="right"/></div>'
        }
    }
})

组件动态绑定

<div id = 'app'>
  <keep-alive>
    <component :is="nowHeader"></component>
  </keep-alive>
</div>
<script>
   //1.component标签的is属性来完成组件的动态绑定
   //2.按钮的@click来修改data属性
   //3.keep-alive保留文件的组件的状态值
   var vue = new Vue({
      el: '#app',
      data:{
         nowHeader:'header-1'
      },
      component:{
          'header-1':{template:'<div>组件1</input></div>'},
          'header-2':{template:'<div>组件2</input></div>'},
          'header-3':{template:'<div>组件3</input></div>'}
      }
   })
</script>

4. 参数传递：
   父组件传给子组件：子组件通过props方法接收数据
   子组件传给父组件：$emit方法传递参数
   兄弟间组件通信：使用vuex解决问题，先创建store对象；或者用eventBus，就是创建一个事件中心，相当于中 转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适
5. 路由的钩子函数：
   beforeEach主要有3个参数to，from，next
   to：route即将进入的目标路由对象
   from：route当前导航正要离开的路由。
   next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转
   next（） 去下一步；next（ false ）阻止跳转；next（’ / ‘）或 next（{ path：’ / ’ }）跳转到不同路径
   路由跳转:this.$router.push()
   (1) 实际使用-默认脚手架安装已经安装路由：
   在router的index.js直接配置如下：

import Router from 'vue-router'
import News from ../component/News.vue
Vue.use(Router)
export default new Router({
  routers:[
	  {
	   path: '/News',
	   name:'News',
	   News
	  }
  ]
})

（2）没有选择安装vue-router
npm install vue-router --save / cnpm install vue-router --save 进行安装
在main.js入口文件下，导入并引用

import Router from 'vue-router';
Vue.use(Router);

配置路由信息：—>创建组件，并引入---->定义路由---->实例化---->挂载

//创建组件并引入
import News from ../component/News.vue
//定义路由
const routers = [
 {path: '/News',name:'News',News},
 {path: '*',redirect,'/News'}//默认跳转路由
]
//实例化router
const router = new Router({router})
new Vue({
	el:"#app",
	router,
	component:{App},
	template:'<App/>'
})

组件模板里放入路由的入口，所有的路由都在此处显示

<div id='app'>
   <router-view></router-view>
</div>

5. vue生命周期
   创建之前，vue实例的挂载元素el和数据对象data都为undefined
   created，vue实例的数据对象data
   挂载之前，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点 ,data.message还未替换
   mounted（挂载完成）阶段，vue实例挂载完成 data.message成功渲染
   updated data数据被更新时执行
   销毁之前，
   destoryed，Vue实例的所有东西会解除绑定，所有的事件监听器会被移除，所有的子实例会被销毁 ，但是dom结构依然存在
6. axios

<script>
//跨域：现阶段域名与访问地址不是同一个域名
created:function(){
 axios.get("http://www.163.com").then(function(result){
    console.log(eval(result.data))
 }.bind(this))
}
</script>