一、环境搭建

  1.npm

    大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用。具体安装步骤请参考网上的诸多教程。完成后使用如下命令安装vue。

  1. $ npm install vue

    安装完成后,命令行运行命令 vue ,看到如下效果表示vue安装成功:

  2.vue-cli

    vue-cli是vue提供的一个官方命令行工具。可用于快速搭建大型的单页应用。

  1. # 全局安装 vue-cli
  2. $ npm install --global vue-cli

二、项目搭建

  安装完成之后我们就可以开始搭建我们的项目了。本次项目是基于webpack模板来构建的。参考下图:

  

  这样我们就创建了一个项目。可以看到在todo文件夹下生成了如下文件:

    接着使用npm install 安装项目所需的依赖。这个过程可能有点慢。推荐使用淘宝镜像。安装完成使用npm run dev。浏览器中可以看到如下图。说明我们的项目已经搭建完成。

二、todoList实现

  1.首先介绍几个重要的文件

    index.html:这是项目的入口html文件。

    

    main.js:这是项目的入口js文件,在webpack.config.js可以看到。

    

    main.js主要是初始化vue实例。"el"是将vue实例挂载到index.html中的id为app的元素上。“render”在这里是给绑定的节点渲染一个vue组件。

    

    App.vue:这是我们的主组件。

  2.现在开始项目的编写。这个例子很简单,适用于刚开始接触vue的人群。

    在App.vue中代码如下:

  1. <template>
  2. <div id="app">
  3. <todoList :list="lists"></todoList>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. import todoList from "./component/todoList.vue";
  9. export default{
  10. name:"app",
  11. data(){
  12. return {
  13. lists:[
  14. {id:1,text:"吃饭"},
  15. {id:2,text:"睡觉"},
  16. {id:3,text:"打豆豆"}
  17. ]
  18. }
  19. },
  20. components:{
  21. "todoList":todoList
  22. }
  23. }
  24. </script>

    引入了一个新的组件todoList显示列表项。使用自定义属性list将父组件的值传递到子组件。

    在todoList.vue中如下所示:

  1. <template>
  2. <div>
  3. <ul>
  4. <li v-for="listItem in list">{{listItem.text}}</li>
  5. </ul>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. export default{
  11. name:"todoList",
  12. props:{
  13. list:{
  14. type:Array
  15. }
  16. }
  17. }
  18. </script>

    props用于接收从父组件传递过来的值,试用v-for循环显示列表项。页面显示:

    

    这样一个简单的todoList就做完了。用到了vue的组件化,以及父子组件间的值传递。

                                      ————— 本文部分参考vue官方网站,如需转载请联系作者

vue学习笔记(1)—— 组件化实现todoList的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

  3. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  4. Vue 学习笔记之 —— 组件(踩了个坑)

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...

  5. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  8. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  9. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  10. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

随机推荐

  1. python3中socket套接字的编码问题解决

    一.TCP 1.tcp服务器创建 #创建服务器 from socket import * from time import ctime #导入ctime HOST = '' #任意主机 PORT = ...

  2. Gradle学习笔记之Groovy

    [TOC] Gradle 的核心功能是由Java实现. 在这些功能之上, 有一个使用动态编程语言Groovy编写的领域特定语言(DSL). Gradle的构建脚本build.gradle和settin ...

  3. http(一)web和网络基础

    深入学习http不为别的,只为补充底层知识,打好根基,深入了解其他技术,擒贼先擒王,学好九阳神功以后,乾坤大挪移,太极剑就容易了,急于求成,就只能变周芷若.走着...... 来源于:图解HTTP 1. ...

  4. mysql启动关闭的批处理,感觉很好用在其他论坛帖子上找到的,感谢分享

    最近用mysql的时间比较多,每次都在计算机管理工具下面去启动,感觉很麻烦,于是搜索了下果然有前辈已经做出了这些东西,今天收藏整理,mysql启动关闭的批处理感觉很好用在其他论坛帖子上找到的,感谢互联 ...

  5. 拥抱.NET Core系列:依赖注入(1)

    依赖注入时编程手段中解耦和封装的一个非常重要的手段,我本人已经到了没有DI无法编写项目的程度了,在.NET Framework中微软并没有在FCL中引入DI,虽然推出了"Unity" ...

  6. h5 新增的invalid事件,貌似有很大bug

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. 从一个针对ASP.NET MVC框架的Controller.Action的请求处理顺序来说整个请求过程。

    下面引用的所有代码都来自ASP.NET MVC的源码,但是可能只选取每个方法的其中一部分. System.Web.Routing.UrlRoutingModule在管道事件中注册PostResolve ...

  8. WriteTeacherObj

    package JBJADV003;import java.io.*;public class WriteTeacherObj { /** * @param args */ public static ...

  9. Teacher implements java.io.Serializable

    package JBJADV003; public class Teacher implements java.io.Serializable{ private String name; privat ...

  10. 20170714_js闭包变量重置

    <html> <body> <script> function createFunctions(){ var result = new Array(); for ( ...