Vue整合

基础配置:

1.创建:cmd 中 输入 create vue vue_name

        启动命令:npm run serve

2.当node_modules(依赖)丢失时通过 npm install 下载  【根据:package-lock.json下载】

3.下载路由 npm i [email protected] -S

Vue使用:

一.js中的区域:

        a.data(){}         :用于存放变量:除了布尔和数字外 都需要引号

        b.methods:{}    :用于存放一般的事件包括自定义的function

        c.components:{} :用于注册组件

        d.mounted(){}         :生命周期,用于获取props,data,methods

        e.computed:{}  :用于计算渲染

        f.filters:{} :用于过滤

        g.watch: {} :用于监听        

        h.created(){} : 生命周期,用于获取数据

二.vue原生的渲染:

        1.内容渲染指令:

                        a. v-text:用在标签中,覆盖原有内容

                        b. {{}}: 插值表达式,直接接收数据的一种方式

                        c.v-html:可以携带标签,识别标签

2.属性绑定指令:

          v-bind:( 简写为 :)

3.事件绑定

        a. v-on:click=""  或者 @click="" 

        b.事件的修饰符:Ⅰ[email protected]           阻止浏览器的默认行为

                                     Ⅱ[email protected]              只触发一次事件

                                     Ⅲ[email protected]                阻止冒泡

4.双向数据绑定

        a.        v-model

        b.        v-model.number: 把内容转为数字类型

        c.         v-model.trim : 去除前后空格

        d.         v-model.lazy 失去焦点后触发同步

5.条件渲染指令 

        a.  v-if  v-else-if v-else条件判断

        b.显隐:        v-if:删除节点 达成显隐 更安全

                              v-show: 增加display-none

6.列表渲染指令

    a.   

                  {{index}}+{{item.id}} 

    b.        v-for 里写入索引index,以便在后端使用

   c.        key :主键,增加查询效率

7.过滤器         

        a.        html使用 :

{{ message | upperStr | upperStr 3}}

        b.        在filters中使用: upperStr(val){} value为 message

8.监听器

        a.          html 使用: v-model="watch1

        b.         在watch使用: watch1(nval,oval){}( nval 新的值;oval 旧的值 )

9.计算属性

        a.         html使用    {{rgb}

        b.         在computed 使用 : 

                 rgb(){
                    return `rgb(${this.r},${this.g},${this.b})`; 
                  }

10. 在css中  scoped  会防止组件样式冲突

       /deep/  h1{color: yellow;  } /deep/ 样式穿透 影响子组件

三、组件的使用

        1.组件的使用步骤:

                a.创建组件

                b.导入组件

                        import ZuJianName from '@/components/ZuJianName.vue';

                c.注册组件

                        在computed 中  ZuJianName :ZuJianName ,        

                          当组件名和变量名相同可以简写为ZuJianName

   

                d.使用组件 :

                           小写,使用 - 拼接

        2.路由占位符 :  

        3. 多个组件只显示一个

        4.父子传值(一个vue在另一个vue里)

                父-》子

                        父:

                        子:prop接收:与data同级

                                                a.        props:['abc']

                                                b.        props:{ 'abc':String}

                                                c.        props:{abc:{      type:String, default:'ok!' //默认值}}

                子-》父:

                        子:this.$emit('fangda',this.num)

                        父:        html :

                                     js: handle(val){ this.fs=val}

5.兄弟传值(没有关系)

               a.创建向外界共享vue的js文件,与views同级

               b.  传值的vue :  

                                sendMsg(){ bus.$emit('share',this.msg)}

               c.接收值的vue:

                                bus.$on('share',val=>{this.getmsg=val})

        

6.web缓存

        存入:localStorage.setItem ('username',this.username)   页面关闭后数据还存在 不安全

                   sessionStorage.setItem ('username',this.username)  页面关闭后数据不存在 安全

        获取:this.username= localStorage.getItem('username');

                   this.username= sessionStorage.getItem('username');

                        

                

                

        

四、路由的使用

        在路由下载后可使用:

        1. 导入依赖  当导入的依赖时node_modules 时直接写依赖的名称

        import Vue from 'vue'        

        import VueRouter from 'vue-router'

        2.导入页面组件 导入自己写的文件时必须使用相对路径

        import Page1 from '../views/Page1.vue'

        import Page2 from '@/views/Page2.vue'  @是src文件

        3. 配置路由规则

                a.重定向 :从一个vue直接跳到另一个vue

                     配置:

                        {

                            // 使用时路径,自己定义

                            //path: '/', 当进入是默认进入这个页面

                            path: '/page1',

                            // name自己定义

                            name: 'page1',

                            // 导入的页面组件名,与导入页面组件的名字一致

                            component: Page1

                          },

                        使用:

                        router-link 最终会渲染成a标签 to属性会渲染成href属性

                         跳转到page2

                b.嵌套路由 : 相当于在Page1里嵌套了Page2 两个都显示

                        {

                    path:'/page1',

                    // 当配置后无需导入组件

                    component:()=>import('../views/Page1.vue'),

                    // 子路径

                    children:[

              // 已经在上面导入组件

                {path:'page2',component:Page2}

                    ]

                  }

                使用:

                         跳转到page2

                         需要子路由的占位符,多个子路由只用一个占位符

4.跳转路由的其他方式

        this.$router.push("/page2");         push:会增加一条历史记录

        this.$router.replace("/page2");         replace:不会增加历史记录,而是替换当前的记录

       

        this.$router.go(-1);         go:历史记录的前进和后退        

        this.$router.forward();         forward:历史记录的前一个

        this.$router.back();         back:历史记录的后一个

5.全局守卫:防止不经过登录,直接访问重要页面 在router里

to :将要访问的路由信息

from:将要离开的路由信息

next:函数

      next():放行

      next('/login'):代表没有权限,强制跳转

      next(false):代表没有权限,也不强制跳转

router.beforeEach((to,from,next)=>{

//允许访问/跳转

// 如果

if(to.path=='/main'){

   const username=sessionStorage.getItem('username');

   if(username){

    //允许访问/跳转

    next();

   }else{

    // 不存在不允许访问,跳回登录页面

    next('/login');}}else{ next();}})

补充:@1:生命周期

  A。组件创建阶段     注意:方法按照顺序依次执行1次!!

    beforeCreate:组件实例刚被创建,组件的 props/data/methods都不能使用

    created:组件实例刚被创建,组件的 props/data/methods已创建好,处于可用状态。但是组件的模板结构尚未生成!

    beforeMount:将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中没有组件的DOM结构。

    mounted:将要把内存中的HTML结构,渲染到了浏览器之中。

B。组件运行阶段      注意:数据源发生变化就会执行,执行多次!!

    beforeUpdate:将要根据变化过后,最新的数据,重写渲染组件的模板结构。

    updated:已经根据最新的数据,完成了组件DOM结构的重新渲染。

C。组件销毁阶段    注意:方法按照顺序依次执行1次!!

    beforeDestroy:将要销毁此组件,此时尚未销毁,组件还处于正常工作的状态。

    destroyed:组件已经销毁,此组件在浏览器中对应的DOM结构已被完全移除。

结论:

    a。如果要在第一时间获取数据,应该在created里进行数据的获取。

    b。如果要在第一时间进行dom的操作,应该在mounted方法里进行

你可能感兴趣的:(vue.js,前端,javascript)