一知识点

vue.js   是一个以数据处理为核心的前端框架 ( 模块化，组件 .vue)
    vue.js   个人开发   支付宝  尤雨溪

模式：MVVM（vue.js）

M ：model  数据层
        V:  view   视图层(html+css)
        VM：viewModel  薄片层:是链接数据层和视图层的薄片层（vue的实例 ）

还有一种模式：MVC

M:model 数据层
        V:view 视图层（html+css）
        C：controller控制层（js代码）

二 Vue使用

1 . vue实例化：（两种实例化）

new Vue({
        el:'',//挂载 el可以挂载class名 /标签名/html/body?
        data:{数据}, //填写数据
                   methods：{},//填写方法
computed：{},//计算属性
beforeCreate:function(){}, //8大生命周期
created:function(){},
beforeMount:function(){},
mounted:function(){},
beforeUpdate:function()},
updated:function(){},
beforedestroy:function(){}
destroyed:function(){}
         });
new Vue({
                   data:{ },
                   methods:{},
                   computed:{ }
         }).$mount('#box')

2．Vue指令使用

         1.差值表达式：{{}}

         2．指令

v-model：双向绑定  可作用与input中value使用
                   v-if：控制css属性的消失隐藏
                   v-else：扩展是v-else-if
                   v-show:控制dome节点的删除和增加来实现消失隐藏
                   v-for：遍历
                   v-text：可以简写为{{}},并且支持逻辑运算
                   v-html    用于输出html

         3.属性、事件绑定

事件绑定：v-on ===@

                   属性绑定：v-bind === ：

三 Vue组件

  1. 构建组件的基本步骤：
  1. 组件的创立（2种方法）
var com = Vue.extend({}) //传承自vue.1.0
           var com = {}    //传承自vue2.0

            注意：里面可以写对应事件数据方法

              2.组件的注册

Vue.component('lol', com)  //lol相当于html标签    com是你创建的组件名
组件的使用（vue实例化）
                  new Vue({el:"#app",})

 创建组件发坑：

坑1:template中必须要有一个div根标签
坑2：'' 或者"" 不能换行  ，但是模板字符串``（es6） 可以换行的
坑3：组件中的data是一个函数，用return返回数据 data() {return {}},
坑4：组件的创建和注册要在vue实例之前
坑5:驼峰的命名方式haHa，在使用组件的时候转化为<ha-ha>

 四全局组件&局部组件

全局组件：vue.component()   能被任意vue实例使用 （放在vue实例外面）
局部组件：在vue实例中祖册组件   （放在vue实例里面）
new Vue({
el:"#app",
     components:{
'lol':{ // lol相当于html标签(也相当于一个组件)
                       template:`<div>我是局部组件</div>`,
                       data(){},
}
})

五组件之间个传值

         父传子：通过属性绑定

1.在子级中定义一个属性k，用来存储父级的数据    props：['k']  加引号
                            2.在子级的标签中绑定属性k <son v-bind:k = 'msg'></son>  msg为父级的数据
                             3.在子级中的组件构造中template  加入数据
                    template:`<div>我是子级组件,接受到的父集的数据为：{{k}}</div>`

        子传父：通过事件绑定

1.在子级中添加   this.$emit(事件名，数据)   用来发送数据
                            2.在父级的标签中绑定事
                                 <lol @事件名 = 'm'></lol>  这里的m不需要加括号  因为下面参数不确定
                            3.在父级中添加事件用来收数据
                                     methods:{m:function(d){// d就是子组件发过来的数据}

兄弟之间传数据：

（1）弟弟传父  父在传兄

（2）弟弟传到空的Vue实例中，兄弟从空的Vue实例中拿

这里不需要属性绑定：发送  .$emit()

接受  .$on() 

六 vue路由

vue路由搭建
              1.准备路由所需的组件
                       var Home = {
                           template:`<div>我是首页内容</div>`
                       }
              2.配置路由
                       var routes =[
                           {path:"/Home",component:Home}
                       ]
              3.创建路由实例
                       var router = new VueRouter({
                           routes
                        })
              4.vues实例化(挂载路由)
                       new Vue({
                           el:"#app",
                           router,
                       })
 
二级路由：
在配置路由中增加children新的二级路由
                   var routes = [
                 {path:'/user',component:User,
children:[
                                          {path:'one',component:One}, //不要加'/'因为children会自动加上去
                ]},]
 
路由传参：
                   1.利用二级路由传参（一个参数）只改变path    {path:':kk',component:One},    属性绑定kk（自定义）
利用$route.params.kk   获取路由的参数，也就是自己写的二级路径名
                   2. 二级路由中：path地址要写全 {name:'小强',path:'/home/one/',component:One}
                            通过名字搜索进行跳转  先写条件 在写数据 用params：{}
                            <router-link :to ='{name:"小强",params:{pwq:121212}}'>one</router-link>
                      二级路由组件中获取的数据为params:{pwq:121212}} 利用$route.params