vue学习笔记(1)—— 组件化实现todoList
一、环境搭建
1.npm
大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用。具体安装步骤请参考网上的诸多教程。完成后使用如下命令安装vue。
- $ npm install vue
安装完成后,命令行运行命令 vue ,看到如下效果表示vue安装成功:
2.vue-cli
vue-cli是vue提供的一个官方命令行工具。可用于快速搭建大型的单页应用。
- # 全局安装 vue-cli
- $ 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中代码如下:
- <template>
- <div id="app">
- <todoList :list="lists"></todoList>
- </div>
- </template>
- <script>
- import todoList from "./component/todoList.vue";
- export default{
- name:"app",
- data(){
- return {
- lists:[
- {id:1,text:"吃饭"},
- {id:2,text:"睡觉"},
- {id:3,text:"打豆豆"}
- ]
- }
- },
- components:{
- "todoList":todoList
- }
- }
- </script>
引入了一个新的组件todoList显示列表项。使用自定义属性list将父组件的值传递到子组件。
在todoList.vue中如下所示:
- <template>
- <div>
- <ul>
- <li v-for="listItem in list">{{listItem.text}}</li>
- </ul>
- </div>
- </template>
- <script>
- export default{
- name:"todoList",
- props:{
- list:{
- type:Array
- }
- }
- }
- </script>
props用于接收从父组件传递过来的值,试用v-for循环显示列表项。页面显示:
这样一个简单的todoList就做完了。用到了vue的组件化,以及父子组件间的值传递。
————— 本文部分参考vue官方网站,如需转载请联系作者
vue学习笔记(1)—— 组件化实现todoList的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue.js官方文档学习笔记(二)组件化应用的构建
组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- Vue 学习笔记之 —— 组件(踩了个坑)
最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
随机推荐
- python3中socket套接字的编码问题解决
一.TCP 1.tcp服务器创建 #创建服务器 from socket import * from time import ctime #导入ctime HOST = '' #任意主机 PORT = ...
- Gradle学习笔记之Groovy
[TOC] Gradle 的核心功能是由Java实现. 在这些功能之上, 有一个使用动态编程语言Groovy编写的领域特定语言(DSL). Gradle的构建脚本build.gradle和settin ...
- http(一)web和网络基础
深入学习http不为别的,只为补充底层知识,打好根基,深入了解其他技术,擒贼先擒王,学好九阳神功以后,乾坤大挪移,太极剑就容易了,急于求成,就只能变周芷若.走着...... 来源于:图解HTTP 1. ...
- mysql启动关闭的批处理,感觉很好用在其他论坛帖子上找到的,感谢分享
最近用mysql的时间比较多,每次都在计算机管理工具下面去启动,感觉很麻烦,于是搜索了下果然有前辈已经做出了这些东西,今天收藏整理,mysql启动关闭的批处理感觉很好用在其他论坛帖子上找到的,感谢互联 ...
- 拥抱.NET Core系列:依赖注入(1)
依赖注入时编程手段中解耦和封装的一个非常重要的手段,我本人已经到了没有DI无法编写项目的程度了,在.NET Framework中微软并没有在FCL中引入DI,虽然推出了"Unity" ...
- h5 新增的invalid事件,貌似有很大bug
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 从一个针对ASP.NET MVC框架的Controller.Action的请求处理顺序来说整个请求过程。
下面引用的所有代码都来自ASP.NET MVC的源码,但是可能只选取每个方法的其中一部分. System.Web.Routing.UrlRoutingModule在管道事件中注册PostResolve ...
- WriteTeacherObj
package JBJADV003;import java.io.*;public class WriteTeacherObj { /** * @param args */ public static ...
- Teacher implements java.io.Serializable
package JBJADV003; public class Teacher implements java.io.Serializable{ private String name; privat ...
- 20170714_js闭包变量重置
<html> <body> <script> function createFunctions(){ var result = new Array(); for ( ...