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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
浅析php数据类型转换
2014/01/09 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python读取oracle函数返回值
2016/07/18 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python之django母板页面的使用
2018/07/03 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Django实现内容缓存实例方法
2020/06/30 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
精彩的英文自荐信
2014/01/30 职场文书
大学生新学期计划书
2014/04/28 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
学生会任命书范本
2015/09/21 职场文书