vue快速入门（二）

程序员文章站 2022-05-15 09:15:51

...

文章目录

vue组件

组件注册方式

全局组件
局部组件
全局组件与局部组件
模块化注册

组件数据共享与私有
组件的组织
组件参数传递

父组件传递给子组件
子组件传递给父组件

import、export和export default的区别和用法

vue路由

模块化路由例子

vue组件

组件注册方式

每个组件必须只有一个根元素，即每个组件都需要一个根元素将所有子元素包裹起来，如<div class="blog-post"/>：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

全局组件

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

局部组件

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

全局组件与局部组件

局部组件只能被父模板调用，而全局组件在所有模板中都可以使用。

<div id="app">
	app：<runoob></runoob>
</div>
	
<div id="app2">
	app2：<runoob></runoob>
</div>

<script>
Vue.component('runoob', {
  template: '<h1>局部组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': {
	  template: '<h1>全局组件!</h1>'
	}
  }
})
new Vue({
  el: '#app2'
})
</script>

模块化注册

如果你使用vue_cil生成vue的工程，将会用到该方法：
https://cn.vuejs.org/v2/guide/components-registration.html#模块系统

组件数据共享与私有

https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

这个就相当于是一个工厂模式，每一次实例化组件都会从工厂构造出一个数据对象，否则若写成

data: count: 0

则count相当于是所有组件实例共享的变量。

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：
vue快速入门（二）
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

组件参数传递

父组件传递给子组件

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

通过插槽分发内容
https://cn.vuejs.org/v2/guide/components.html#通过插槽分发内容

子组件传递给父组件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

父组件使用 $on(eventName) 监听事件
子组件使用 $emit(eventName) 触发事件，即向父组件发送事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

子组件还可以通过配置参数向父组件传递值：
https://cn.vuejs.org/v2/guide/components.html#使用事件抛出一个值
在组件上使用-v-model
https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model

import、export和export default的区别和用法

Vue中export和export default的区别和用法（注意匿名形式的导出，等于在import定义临时命名）
export ，export default 和 import 区别以及用法

vue路由

**手把手教Vue–路由「Vue-router」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>
</body>
</html>

模块化路由例子

转自：**手把手教Vue–路由「Vue-router」

模块化「组件式开发」中 vue-router 的使用

如果使用 vue 开发手机 webapp ，那么页面跳转就非常多，路由使用的非常非常多，这样就更能体现出路由的强大之处，在这里我们使用 vue-cli 来创建一个 webapp ,来模拟一个简单的手机 app ，体验一下路由

效果如下：

vue快速入门（二）

1、初始化项目

vue快速入门（二）

使用　vue-cli 命令创建项目的时候，我们选择安装 vue-router，默认进去项目中就会有 vue-router 的配置，创建好的项目结构如下：

vue快速入门（二）

我们看到创建的目录结构多了一个 router 目录和 index.js 文件「vue-cli默认给添加的，如果你选了安装 vue-router 的话」

2、文件简单的分析

我们来看看 router 下的 index.js「路由配置文件」

vue快速入门（二）

router-indexjs

我们可以看到默认　vue-cli 创建的带路由的项目把 router 配置文件单独的写在了 router/index.js 文件中了，并且我们看到默认指定打开的是 HelloWorld 组件「想配置路由组件，引入组件配置即可」

再看 main.js

vue快速入门（二）

router-mainjs

一般来说 APP.vue 就是我们应用的首页，我们在 main.js 中注入路由，从而让整个应用都具有路由功能

3、再看 App.vue

核心就一个 <router-view/> 即可路由组件要显示的地方，默认路由路径是 / 对应的是 HelloWorld 组件，所以运行起应用就会显示 HelloWorld 组件，这里不显示运行后的结果了，我们使用 vue-cli 创建的 demo 样式看的太多了，自行运行查看即可

经过以上分析，我们基本上就把 vue-cli 带路由的 demo 说完了「核心就这几个东西，剩下的无非就是配置路由，然后组件组合，然后各种路由跳转」

4、修改 demo，一步步修改成效果图的样式

添加 First.vue 文件「核心代码

vue快速入门（二）

add-firstvue

样式和数据「mockList 就是一个数组」就不截图了，完整例子可以查看源码:https://github.com/tigerchain/vue-lesson/tree/master/06、Vue路由/vue-cli-router-webapp

其中的条目点击方法 nav(index) 就是路由跳转功能

vue快速入门（二）

first-item-nav-method

以上点击方法我们使用编程式导航「跳转」,当然你也可以不传参数

  this.$router.push({name:xxx,params:{xxxx}})

细心的朋友会发现,我们这个 name 叫 second 这是那里来的,它其实就是我们在 router/index.js 中配置的别名,再看 router/index.js 文件之前,我们先添加一个 Second.vue 组件

添加 Second.vue 组件「核心代码

vue快速入门（二）

second-vue

这个没有什么好说的,就是一个有导航条并且接收到 First.vue 路由跳转传递过来的参数

修改 router/index.js 文件

前面我们使用跳转 this.$router.push({name:'second',params:{itemData:this.mockList[index]}}) 中传了一个 name 为 second ,我们说了这是在　router/indes.js 中配置的,下面我们来看此文件

我们看到 / 对应的是 First 组件,/second 对应的是 Second 组件,并且分别给了 name 属性「在路由 push 的时候就可以使用到」,没什么好说的,当然你也可以不写 name　属性，路由跳转有几种写法

// 命名的路由
router.push({ path: '/second', params: { xxx:xxx }})
// 对象
router.push({ name: 'second', params: { xxx:xxx }})

等几种方式,如果有 name 属性直接使用即可,如果没有就使用 path「router/inde.js 中配置的路由 path」即可,具体可以看官网:https://router.vuejs.org/zh-cn/essentials/navigation.html

如果想返回上一个界面,那么就使用 this.$router.go(-1) 和 h5 的 history 是一样的

修改 App.vue

我们来修改 App.vue 来让每个组件的内容都能全屏显示「我这里使用的 flexbox 布局,具体看源码」

在这里插入图片描述

modify-appvue

这没有什么好说的,都是一些 css 样式的设置

运行查看效果

vue快速入门（二）

vue-cli-router-one

从效果图中我们可以看到我们已经实现了两个界面之间的跳转「通过路由功能」只不过这个界面跳转有点生硬，显的很不友好，下面我们给界面跳转添加一个动画

添加界面跳转动画

说到 vue 的跳转动画，我们就要说说 transition 过度效果，简单的说 transition 就是控制组件或标签的进入和离开的过度「这里不过多的介绍，我们看如何修改代码

修改 App.vue

第一步：给 router-view 添加过虑效果

vue快速入门（二）

add-transition

第二步：给 transitionName 设置个属性值

vue快速入门（二）

transition-data

在这里我们给 transitionName 设置一个值「这个值可以随便起一个名字，这里我就叫做 slide-right,向右滑动」

第三步：给 transitionName 添加进入，退出效果

vue快速入门（二）

transition-setcss

这里我们给过度设置效果，一般使用 name-enter「过渡开始的状态」 name-enter-active「定义进入过渡的状态」、name-leave「离开过渡的开始状态」、name-leave-active「离开的过度状态」，其中 name 是可以的值是可以动态设置的，类如上面的 slide-right 和 slide-left，但是后面的部分是固定的，下面我们来使用 name

第四步：监听路由变化

我们先把路由定义一个统一的返回方法，打开 router/index.js，添加如下代码，使用 js 的 prototype「prototype 属性使您有能力向对象添加属性和方法」属性即可

vue快速入门（二）

addGoBackToRouter

这样一来，router 就有了统一的返回方法，直接调用即可，我们修改返回按钮的返回方法如下：

this.$router.goBack()

第五步：监听路由变化

在这里我们使用到了 Vue 的 watch「这里不专门说，以后有需要会抽出来说」方法，修改如下：

vue快速入门（二）

addWatchRouter

这样我们就可以监听是进入界面还是返回界面「这里 watch 和 data 方法是平级的，如果是返回的话，则从左边滑入到右边，打开新界面就是从右边滑到左边」

通过以上步骤，我们就给路由添加了一个过渡效果，我们来看看效果，就和刚开始的效果图是一样的

vue快速入门（二）

router-demo

这样我就完成了组件式开发中的路由的基本功能，结束了吗？这里本应该可以结束了，但是我们前面学过组件，并且 vue 的核心特点之一就是组件化开发，我们这里使用的头部功能「两个界面头部如下」

vue快速入门（二）

first-titlebar

vue快速入门（二）

second-titlebar.png

我们可以看到两个界面的头部是何其的相似，这里我们完全可以把这个头部封装成一个组件呀，下面我们继续改造我们的代码

封装头部组件

1、新建一个 Head.vue 文件「核心代码」

vue快速入门（二）

custom-head-template

vue快速入门（二）

custom-head-js

2、在 First.vue 和 Second.vue 中引入

分三步：

第一步：引入组件

vue快速入门（二）

import-head-component

第二步：注册组件

vue快速入门（二）

第三步：使用组件

vue快速入门（二）

use-head-component

想在那个 vue 组件中使用以上三步就可以搞定了

到这里我们就把 head 组件封装完成了，并且达到使用的上的，具体可以看源代码

vue快速入门（二）

文章目录

vue组件

组件注册方式

全局组件

局部组件

全局组件与局部组件

模块化注册

组件数据共享与私有

组件的组织

组件参数传递

父组件传递给子组件

子组件传递给父组件

import、export和export default的区别和用法

vue路由

模块化路由例子

模块化「组件式开发」中 vue-router 的使用

快速解决vue动态绑定多个class的官方实例语法无效的问题

Android开发入门环境快速搭建实战教程

Photoshop将利用替换颜色命令快速将照片变成黄色的入门实例教程

入门教程:教你用CDR快速制作漂亮的七彩画

快速解决vue-cli在ie9+中无效的问题

快速解决Vue项目在IE浏览器中显示空白的问题

vue实现微信二次分享以及自定义分享的示例

MySQL入门(二) 数据库数据类型详解

一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

PHP学习之SQL语句快速入门