Vue单文件组件开发实现过程详解


Posted in Javascript onJuly 30, 2020

第一步:配置环境

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装@vue/cli

cnpm install -g @vue/cli

检查版本是否正确

vue --version

Vue单文件组件开发实现过程详解

使用vue.server和vue.build对*.vue文件进行快速原型开发,需要安装vue serve

cnpm install -g @vue/cli-service-global

新建一个App.vue文件测试安装是否成功:

<template>2 <h1>Hello world!</h1>3 </template>

在该文件当前路径运行:

vue serve App.vue

打开浏览器输入localhost:8080看到如下画面则运行成功

Vue单文件组件开发实现过程详解

环境安装到此结束,接下来用一个简单案例来学习vue的单文件组件开发。

第二步:简单案例实战

以一个物品清单为例:

Vue单文件组件开发实现过程详解

该案例由4个组件构成,分别是:

1. addItem.vue 添加物品

2. item.vue 物品实例

3. items.vue 物品列表

4. changeTitle 改变标题

首先,创建一个项目demo:

vue create demo

项目默认目录如下,启动主页在public, vue源码(包括组件)都存放到src

Vue单文件组件开发实现过程详解

然后分别编写各组件代码

1. addItem.vue:

<template>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="add shopping list item" v-model="newItem">
    <span class="input-group-btn">
      <button class="btn btn-primary" @click="emitAdd">
        <i class="fa fa-plus-square-o fa-lg"> </i><span>Add</span>
      </button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    emitAdd() {
      this.$emit('addItem', this.newItem);
    }
  }
}
</script>

<style>
</style>

2. item.vue:

<template>
  <li :class="{'removed': item.checked}" class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="item.checked">
        <span>{{ item.text }}</span>
      </label>
    </div>
  </li>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style>
.removed {
  color: gray;
}

.removed span {
  text-decoration: line-through;
}
</style>

3. items.vue:

<script>
import item from './item'

export default {
  props: ['items'],
  components: {
    item
  }
}
</script>

<template>
  <ul class="list-group">
    <item v-for="item in items" :key="item.id" :item="item"></item>
  </ul>
</template>

<style>
</style>

4. changeTitle.vue:

<template>
  <div>
    <em>Change the title here:</em>
    <input type="text" :value="title" @input="onInput">
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

最后修改App.vue,导入上面的组件:

<template>
  <div id="app" class="container">
    <h1>{{ title }}</h1>
    <add-item @addItem="add"></add-item><br>
    <items :items="items"></items>
    <div class="footer">
      <hr>
      <change-title :title="title" v-model="title"></change-title>
    </div>
  </div>
</template>

<script>
import addItem from './components/addItem'
import items from './components/items'
import changeTitle from './components/changeTitle'

export default {
  name: 'app',
  components: {
    addItem,
    items,
    changeTitle
  },
  data() {
    return {
      items: [
        {id: 1, text: 'Bananas', checked: true},
        {id: 2, text: 'Apples', checked: false}
      ],
      title: 'My Items List'
    }
  },
  methods: {
    add(text) {
      this.items.push({
        text: text,
        checked: false
      });
    }
  }
}
</script>

<style>
</style>

需要注意的是:每个组件必须只有一个根元素。我这里需要在public/index.html引入bootstrap样式和font-awesome图标字体。

运行程序:

cnpm run serve

最后附上运行截图:

Vue单文件组件开发实现过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
js实现产品缩略图效果
Mar 10 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
js实现双人五子棋小游戏
May 28 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 #Javascript
在vue中实现嵌套页面(iframe)
Jul 30 #Javascript
Vue文本模糊匹配功能如何实现
Jul 30 #Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 #Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 #Javascript
Vue Render函数原理及代码实例解析
Jul 30 #Javascript
vue - props 声明数组和对象操作
Jul 30 #Javascript
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python批量图片处理简单示例
2019/08/06 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
工作中的自我评价如何写好
2013/10/28 职场文书
商场促销活动方案
2014/02/08 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技