vue组件基础之创建与使用

一、创建组件

<script src="vue.js"></script> <!--引入vue.js文件-->

<div id="app">
    <Vheader></Vheader> //使用组件
</div>
<script>
    //创建组件
    Vue.component(‘Vheader‘, {
            //一定是函数
            data:function () {
                return {} //必须要返回,就算是空对象
            },
            template:‘<div class="header"><p>我是头部</p></div>‘
        });

    var vm = new Vue({
        el:‘#app‘, //目标区域
        data:{

        }
    })

</script>

  组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用,如上面的代码所示。

  • 组件的复用

组件可以进行任意次数的复用

<div id="app">
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
</div>
  • data必须是一个函数,并且必须要有返回值

一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

data:function () {
                return {} //必须要返回,就算是空对象
            },
  • 组件的注册

为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别,这样才能在根下进行使用, Vue.component 就是全局注册的,

Vue.component(‘Vheader‘, {
           // ... options ...
        });

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。

二、项目中使用组件

(一)创建项目

通过vue-cli创建项目,然后在其中创建项目并且使用组件。

1、安装node.js

自行去官网https://nodejs.org/en/下载并且安装,安装完毕后:

#在命令行工具中输入

C:\Users\Administrator>node -v
v10.14.2

C:\Users\Administrator>npm -v
6.4.1

如果出现对应的版本号,说明安装成功。

2、全局安装vue-cli

npm install --global vue-cli  /  cnpm install --global vue-cli         #(npm相当于python中的pip工具,此命令只需要执行一次)

安装完毕后,命令行输入:

C:\Users\Administrator>vue -V        #这里的vue只是一个工具,用于快速创建项目
2.9.6

此时已经完成vue-cli工具的安装,vue-cli工具是一个用于快速创建项目的工具

3、vue-cli的使用

在命令行中查看帮助信息

C:\Users\Administrator>vue --help
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

此时可以根据提示查看可以使用的模板

C:\Users\Administrator>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
.

之前使用的一直是simple 简单的模板,此时可以使用webpack-simple模板创建项目:

  • 切换你需要建立项目的目录下
C:\Users\Administrator>e:

E:\>cd E:\vueProject
  • 初始化项目
E:\vueProject>vue init webpack-simple webpackProject
webpack-simple表示需要使用的模板,webpackProject表示项目的名称

E:\vueProject>vue init webpack-simple webpackProject

? Project name wptest  #不能含有大写的字母
? Project description A Vue.js project
? Author bright <[email protected]>
? License MIT
? Use sass? No #需要选择No

初始化注意事项

  • 按照提示进行安装
  vue-cli · Generated "webpackProject".

  To get started:

    cd webpackProject
    npm install
    npm run dev

此时就完成了一个项目的创建。

#在npm install 发现下载的太慢,时长卡住,这时考虑使用淘宝镜像

#安装cnpm
E:\vueProject\webpackProject>npm install -g cnpm --registry=https://registry.npm
.taobao.org

#使用
E:\vueProject\webpackProject>cnpm install

cnpm install

(二)创建组件

在生成的项目中,主要关心的是src文件夹中的内容:

这个项目的入口文件是main.js文件,这里主要是加载App.vue的内容。

import Vue from ‘vue‘ //导入模块
import App from ‘./App.vue‘  // 一个.vue就是一个组件

new Vue({
  el: ‘#app‘,
  render: h => h(App) //加载组件
});

在App.vue组件中又引入了新的组件,这里先看看引入的三个组件:

在Vheader.vue组件中:

<template>//注意标签不能并列,只能是包裹的,也就是说其余的标签必须放在下面div中,不能再有其它与其并列的标签
  <div class="header">
    <p>我是头部</p>
  </div>
</template>

<script>
    export default {
        name: "Vheader",
      data:function () {
        return {}
      },

      methods:{
          //在当前组件内调用
      },

      computed:{
        //在在当前组件内调用
      }

    }
</script>

<style scoped>
  /*设置scoped,只对当前组件样式起作用*/

</style>

其它组件的创建与其类似,而将其引入到App.vue中分为三步:

  • 引入组件
  • 挂载组件
  • 使用组件
<!--一个组件有三部分组成-->

<template>
  <!--页面结构-->
  <div id="app">
    <!--使用组件-->
    <Vheader></Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>

  </div>
</template>

<script>
  // 导入组件
  import Vheader from ‘./components/Vheader.vue‘
  import Vcontent from ‘./components/Vcontent.vue‘
  import Vfooter from ‘./components/Vfooter.vue‘
  // 页面业务逻辑
export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  },

  // 挂载组件
  components:{
    Vheader:Vheader,
    Vcontent:Vcontent,
    Vfooter:Vfooter
  }
}
</script>

<style>
  /*页面样式*/

</style>

这样就完成组件的创建以及使用了。

原文地址:https://www.cnblogs.com/shenjianping/p/11221416.html

时间: 2024-10-30 06:39:47

vue组件基础之创建与使用的相关文章

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

Vue组件基础

gitHub地址:https://github.com/huangpna/vue_learn里面的lesson06 一 vue组件基本实例 举个例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>app1</title> </head> <body> <div id=&q

Vue 组件基础完整示例2

简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在一个js文件中,用标签引入,然后将子组件对象置入components中Live Demo 在线示例Live Demo 提示不建议用HTML模式开发项目,建议使用vue-cli3创建项目,使用单文件组件模式开发Vue cli3 代码 <!DOCTYPE html> <html lang=&qu

vue - 组件基础

1. 全局组件 2. 局部组件 3. 常规属性传值(props属性传值) 4. v-bind传值 4.1 属性取值 4.2 在构造器向组件传值(v-bind) 5. 父子组件调用 5.1 父组件 5.2 子组件 6. 组件注册 官方文档:https://cn.vuejs.org/v2/guide/components-registration.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5

13.vue组件

vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="vue.js"></script> <script> Vue.component("aaa",{ template:`&l

跟着文档学Vue(三)——组件基础

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue组件的创建

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: Vue.component('Vheader',{ data:function(){ return { } }, template:`<div class="header"> <div class="w"> <

Vue——组件的创建

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: Vue.component('Vheader',{ data:function(){ return { } }, template:`<div class="header"> <div class="w"> <

vue 熟悉项目结构 创建第一个自己的组件

* vue开发环境搭建 * 项目入口文件 ./src/main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router'