web前端 vue介绍使用

知识点

    vue.js   是一个以数据处理为核心的前端框架 ( 模块化,组件 .vue)

    vue.js   个人开发   支付宝  尤雨溪

    模式:MVVMvue.js

        M model  数据层

        V:  view   视图层(html+css)

        VMviewModel  薄片层:是链接数据层和视图层的薄片层(vue的实例

    还有一种模式:MVC

        M:model 数据层

        V:view 视图层(html+css

        Ccontroller控制层(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')

 

2Vue指令使用

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

         2.指令

                   v-model:双向绑定  可作用与inputvalue使用

                   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

 

 

展开阅读全文

没有更多推荐了,返回首页