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 相关文章推荐
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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
laravel配置Redis多个库的实现方法
2019/04/10 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python构建深度神经网络(续)
2018/03/10 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
中国央视网签名寄语
2014/01/18 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
颁奖典礼主持词
2014/03/25 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
初二学习计划书范文
2014/04/27 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
军训结束新闻稿
2015/07/17 职场文书
清明节主题班会
2015/08/14 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书