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 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
angular实现商品筛选功能
Feb 01 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
如何利用js在两个html窗口间通信
Apr 27 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Vue header组件开发详解
2018/01/26 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python中的pack和unpack的使用
2018/03/12 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
初中生物教学反思
2014/01/10 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技