vue学习进阶：组件入门练习到使用vue-cli开发

最新推荐文章于 2023-06-21 17:09:28 发布
最新推荐文章于 2023-06-21 17:09:28 发布
阅读量494 收藏
点赞数
分类专栏： 前端开发 文章标签： vue学习 vue组件 vue-cli
原创文章如需转载请注明地址。
本文链接：https://blog.csdn.net/Irene1991/article/details/83622045
版权

新建index.html，直接复制以下代码，双击浏览器运行即可。代码包含Vue的组件使用，可对照练习。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件</title>
    <!--<script src="./vue.js"></script>-->

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="root">
    <h1>todoList</h1>
    <input v-model="inputValue" placeholder="请输入内容"/>
    <button @click="handleSubmit">提交</button>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>

    <h1>全局组件 todo-item</h1>
    <ul>
        <todo-item v-for="(item,index) in list" :key="index"
                   :content="item"
                   :index="index"
                   @delitem="doDelItem"
        ></todo-item>
    </ul>

    <h1>全局组件</h1>
    <my-p></my-p>

    <h1>局部组件</h1>
    <my-h2></my-h2>

</div>

<script>
    //全局组件
    Vue.component('my-p',{
        template:'<p>我是一个P标签</p>'
    })

    //局部组件
    var myH2={
        template:'<h2>我是一个h2标签</h2>'
    }

    Vue.component('todo-item',{
        props:['content','index'],
        template:'<li>{{content}}<button @click="clickDelItem">删除当前项</button></li>',
        methods:{
            clickDelItem:function(){
                this.$emit('delitem',this.index)
            }
        }
    })

    new Vue({
        el:"#root",
        components:{
            'my-h2':myH2
        },
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue)
                this.inputValue=''
            },
            doDelItem:function(index){
                this.list.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

使用vue-cli开发，首先确保电脑上安装了node和npm

#全局安装 vue-cli

npm install --global vue-cli

#创建一个基于webpack 模板的新项目

vue init webpack your-project-name

cd your-project-name

npm run dev

文件结构

重复实现上述代码的功能,可以比较语法上的差异。

修改main.js

import Vue from 'vue'
import todoList from './todoList'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { todoList },
  template: '<todoList/>'
})

在src文件夹下新建文件todoList.vue

<template>
  <div>
    <h1>todoList</h1>
    <input v-model="inputValue" placeholder="请输入内容"/>
    <button @click="handleSubmit">提交</button>

    <ul>
      <todo-item v-for="(item,index) in list" :key="index"
                 :content="item"
                 :index="index"
                 @delitem="doDelItem"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
  import todoItem from './components/itemList'

  export default{
    components:{
      'todo-item':todoItem
    },
    data(){
      return {
        inputValue:'',
        list:[]
      }
    },
    methods:{
      handleSubmit(){
        this.list.push(this.inputValue)
        this.inputValue=''
      },
      doDelItem(index){
        this.list.splice(index,1)
      }
    }
  }
</script>

<style scoped>

</style>

在src/components文件夹下新建文件itemList.vue

<template>
  <div>
    <li>{{content}}<button @click="clickDelItem">删除当前项</button></li>
  </div>
</template>

<script>
  export default{
    props:['content','index'],
    data(){
      return {
      }
    },
    methods:{
      clickDelItem(index){
        this.$emit('delitem',index)
      }
    }
  }
</script>

<style scoped>

</style>

 

Irene1991
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE | 组件练习
Fanny0602的博客
11-30 485
来源：Vue.js官网 文件结构： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
Vue练习2：组件开发2（字体图标组件）
最新发布
前端萌新
02-16 100
【代码】Vue练习2：组件开发2（字体图标组件）
Vue面试题：最常见得20道含答案和代码示例的练习题
三拾的博客
06-21 2130
computed是计算属性，它会根据其依赖的数据属性自动计算出一个新的值，并将这个值缓存起来，只有当依赖的数据属性发生变化时，才会重新计算。v-model指令会将表单元素的值绑定到组件实例中的数据属性上，同时也会将组件实例中的数据属性的值绑定到表单元素上。在项目中，可以使用Vue.js的语法和组件，同时也可以使用Nuxt.js提供的一些API来实现服务器端渲染和静态网站生成。在配置中，需要将Vue实例转换为一个可以在服务器端运行的对象，并使用Vue SSR的API来渲染组件和模板。最后，在Vue组件中。
Vue练习题（带解析）
qq_60245590的博客
06-11 9246
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
vue专项训练测试题合集（更新中）
pigpigzzz的博客
04-10 1360
解析：Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。解析：watch在不添加immediate: true属性时，默认是不监听第一次赋值，watch未触发。解析：单页面应用程序中首页的数据需要通过在服务器异步获取，在这之前首页仅仅是一个模板，不利于seo。属性有一个特点，就是当值第一次绑定时，watch不会执行监听函数，只有值发生改变时才会执行。mutations => 提交更改数据的方法，同步！
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
使用vue-i18n-loader的单个文件组件中的区域设置消息 区域设置消息丢失和未使用的报告（实验性） 环境变量 :rocket: 入门 如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件安装到您的项目中： ...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant简介这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖npm install// ...
Vue学习笔记进阶篇之vue-cli安装及介绍
12-08
Vue-cli是Vue的脚手架工具 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 地址：https://github.com/vuejs/vue-cli 安装 全局安装vue-cli npm install -g vue-cli 当然了，要想使用npm工具，就必须...
vue.js组件示例：小学竖式与拖式20题练习
05-05
程序代码及库 博文链接：https://wallimn.iteye.com/blog/2424664
06_Vue3组件化开发(一)之注册组件
酒客的博客
02-05 1431
Vue3组件化开发(一) 人处理问题的方式 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 认识组件化开发 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展； 但如果，我们讲一个
Vue学习之组件基础学习
道阻且长
09-10 461
Vue学习之组件基础学习
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
刘大猫
04-28 1381
文章目录一、案例概述二、代码准备工作：案例1.1：父组件向子组件传值（或者叫：子组件使用父组件属性）案例1.2：子组件向父组件传值（或者叫：子组件调用父组件方法）,修改父组件属性案例1.3：父组件调用子组件方法，修改子组件属性值案例1.4：父组件直接修改子组件属性值案例2.1：平行组件之间通信：Student2组件内打印展示Student1组件传递过来的属性案例2.2：平行组件之间通信：Student2组件内调用Student1组件方法修改Student1组件属性三、html项目页面实现平行组件通信案例本.
vue基础精讲组件/路由/vuecli4
05-08
主要讲了vue的各种基础语法知识vue组件  组件的通信vue指令 使用vue动画过渡后台api请求 axios使用vuecli4安装使用vue-router路由安装使用
Vue课后练习题及答案解析
热门推荐
Lvruoyu的博客
05-05 2万+
Vue课后练习题 第一章 填空题 Vue是一套构建________的渐进式框架。 用户界面 MVVM主要包含3个部分，分别是Model、View和________。 ViewModel Vue中通过________属性获取相应的DOM元素。 refs 在进行Vue调试时，通过使用________工具来完成项目开发。 vue-devtools Vue中页面结构以________形式存在。 组件 判断题 Vue与Angular和React框架不同的是，Vue设计为自下而上逐层应
vue父子组件通信之随机数小练习
weixin_51753727的博客
08-12 412
vue、父子组件通信、随机数
VUE购物车案例（组件间传参练习）
m0_66051368的博客
04-30 1523
目录 购物车效果图及组件关系图如下： 1 App.vue 2 Header.vue 3 Goods.vue 4 Counter.vue 5 Footer.vue 6EventBus.js 购物车效果图及组件关系图如下： 其中Counter.vue-->App.vue 是通过EventBus 1 App.vue <template> <div class="a......
Vue进阶教程：组件、prop、event与slot详解及生命周期管理
Vue是一个流行的前端开发框架，本文档总结了从基础到进阶的学习路径，涵盖了多个关键概念和实践技巧。首先，我们来深入理解Vue的核心组件API： 1. **Vue组件API：prop和event** - **prop** (属性): 是组件间通信的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Irene1991

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值