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官方网站,如需转载请联系作者

时间: 2024-11-06 22:53:14

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

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Vue学习笔记进阶篇——多元素及多组件过渡

本文为转载,原文:Vue学习笔记进阶篇--多元素及多组件过渡 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容.即使在技术上没有必要,给在 <transition> 组件中的多个元素设置 key 是一个更好的实践. 示例: <transition> <button v-if="isEditing

## vue学习笔记--简单父子组件--

## vue学习笔记 ### 组件之间的通讯1. 父组件到子组件```js //father <div> <son msg="父组件的信息写在这"></son> <son title="title"></son> <!--:title--> </div> <script> export default { data(){ return { title: '当传递一个变量过

Vue学习笔记目录

本文为转载,原文:Vue学习笔记目录 Vue介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

Vue学习笔记进阶篇——过渡状态

本文为转载,原文:Vue学习笔记进阶篇--过渡状态Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来,可以直接转换到数字.做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态. 状态动画和watcher 通过 watcher 我们能监听到任何数值属性的数值更新.可能听起来很抽象,所以让我们先来看看使用 T

Vue学习笔记进阶篇——列表过渡及其他

本文为转载,原文:Vue学习笔记进阶篇--列表过渡及其他本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag