web前端 vue介绍使用

一 知识点

    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是你创建的组件名

              3.组件的使用（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