随笔分类 - vue
摘要：创建项目 在码云中创建仓库，使用git clone https://gitee.com/xintl/Travel.git 克隆到本地 进入文件夹使用vue init webpack Travel初始化项目 cd Travel npm run dev 在浏览器中输入http://localhost:8
阅读全文
摘要：安装CLi // npm 安装 npm install -g @vue/cli // yarn 安装 yarn global add @vue/cli 查看是否安装成功 vue -V // 正确显示版本号 初始化项目 vue create vue-learn 回车之后会出现以下画面 Vue CLI
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> </head> <body> <div id="app">
阅读全文
摘要：路由重定向 重定向到路由地址 通过属性 redirect 指定重定向的路由地址： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 示例 <!DOCTYPE html> <html lang="e
阅读全文
摘要：默认视图 在之前的小节中，我们学习来如何使用 来承载路由分发的内容。我们并没有给 指定一个 name 属性，实际上他有一个默认的属性 default，我们以一个简单的实例来验证这一点： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
阅读全文
摘要：定义路由名 route 对象中有两个属性。path 表示路由地址，component 表示路由显示的组件。我们可以在 route 对象中添加一个 name 属性用来给路由指定一个名字： const router = new VueRouter({ routes: [ { path: '/user',
阅读全文
摘要：router.push 基本使用 在之前的小节中，我们的路由跳转是通过标签来完成的。但有时候，我们可能需要通过一个普通的 onClick 事件来完成跳转。router.push 就可以帮我们实现这一点。 示例： <!DOCTYPE html> <html lang="en"> <head> <met
阅读全文
摘要：配置嵌套路由 要配置嵌套路由，我们需要在配置的参数中使用 children 属性： { path: '路由地址', component: '渲染组件', children: [ { path: '路由地址', component: '渲染组件' } ] } 基本使用 接下来我们对上一小节的例子来做一
阅读全文
摘要：安装 VueRouter 直接下载 我们可以在官网(VueRouter)上直接下载 VueRouter。 在 Vue 之后引入 VueRouter 会进行自动安装： <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s
阅读全文
摘要：插槽的类型 默认插槽 default 具名插槽 name 作用域插槽 v-slot 默认插槽的使用 在自定义组件中使用<slot />标签进行占位，当我们使用该组件时，在组件标签内写入需要展示的具体内容： { components: { 'MyConponent': { template: '<di
阅读全文
摘要：组件是可复用的Vue实例，且带有一个名字。 组件是可复用的 Vue 实例, 我们可以把页面中在多个场景中重复使用的部分抽出为一个组件进行复用。组件大大提高了代码的复用率。 组件的注册 全局组件注册 可以通过调用Vue.component的方式来定义全局组件，它接收两个参数：1.组件名，2.组件属性对
阅读全文
摘要：父组件通过props传递数据给子组件 父组件通过props属性向子组件传递数据，子组件利用组件实例的props属性定义组件需要接收的参数，在使用组件时通过attribute的方式传入参数，如： // 在子组件内定义组件接收一个参数 name { props: ['name'] } // 父组件使用组
阅读全文
