Vue的过滤器、生命周期钩子函数、组件开发、路由、Promise基本使用语法

原创于 2024-06-24 20:07:54 发布 · 483 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

**beforeCreate、creacted、

beforeMount、mounted、

beforeUpdate、updated、

beforeDestroy、destroyed**

】

keep-alive切换时的：

【activated、deactivated】

组件化开发：

在组件开发模板中，可以直接在html文档中使用template标签来创建一个模板，方便写html类型的模板，但是需要定义相关的id或者class

在Vue.component中使用template：’#id 或者 .class名‘

定义公有组件：

使用Vue.extend（{ }）创建全局的Vue组件模板对象

使用Vue.component(‘组件的名称’ ，创建出来的组件模板对象）来引用组件

定义私有组件：

components：{ ’组件名称‘：{组件模板对象 } }

组件可以有自己的data数据，但是组件中的data和实例中的data有点不一样，即：实例中的data可以作为一个对象，但是组件中的data必须是一个方法，且该方法必须有返回值，返回值为一个对象。

组件中的data数据和实例中的data使用方式完全一样

组件之间传递参数：

父组件向子组件：props[ ]

子组件向父组件：$emit (可选参数 )

===============================================

路由

使用Vue-router 定义路由

在vue的容器中使用router-view标签来当作占位符，将路由规则，匹配到的组件，展示到这个占位符中去

使用router-link to=’路由位置‘来定义要去的路由位置在里面可以使用tag属性来定义对应的标签，默认为a标签


// 创建路由实例对象 

    var router = new VueRouter({



        routes: [

            { path: '路由名1', redirect: '重定向的路由名2' },//重定向路由

            { path: '路由名2', component: 在当前路由下需要解析的对象模板 },

            {

                path: '路由名3',

                component: 在当前路由下需要解析的对象模板,

                // 通过 children 属性， 添加子路由规则

                children: [

                    { path: '子路由名', component: 在当前路由下需要解析的对象模板},

                    { path: '子路由名', component: 在当前路由下需要解析的对象模板 }

                ]

            }

        ]

    })

===============================================

async、await、promise三者的关系

执行async函数，返回得都是promise对象

promise.then 成功的情况对应await


async function test（）{

    const p = Promise.resolve(3);

    p.then(data =>{

	console.log('data',data);

    })

   //使用await 得到的结果和 .then的结果是一样的

   const data = await p;

   console.log('data',data);

}

test（）

promise.catch 异常的情况，对应try…catch

Promise常用的API：

*promise赋值变量名.then() 表示得到异步任务的正确结果

*promise赋值变量名.catch（）表示获取异常信息