Vuejs入门基础笔记

首先说明下

本文来自于学习慕课网:

vue.js入门基础的学习心得,体会,笔记。

1.从 .vue到页面

通过蓝色部分的脚手架工具我们实现vue的界面的展示。其中蓝色部分的技术细节我们可以不用关注。我们需要关注的是绿色部分的实现。

其中绿色部分的.js就是我们的数据层,也就是module模块。而html和css主要负责页面的元素展示以及css效果。

我们需要关注的,是如下图的三个部分,下图是vue的一个组件具体由哪三个部分组成:

2.vue的一些重要的组件总结和示例:

3.vue的基础框架

4.自己做一个基于vue的todolist项目

4.1搭建环境

a.安装淘宝cnpm镜像

b.安装vue-cil

c.新建项目工程

d.为项目工程安装依赖项

运行如下命令,安装package.json里面定义的需要的依赖项。

4.2开始开发我的第一个vue项目:toDolist

4.2.1 修改Hello.vue里面的 template模块的代码,实现view的部分

代码如下:

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <input v-model="newItem" @keyup.enter="addNew"/>
    <ul>
        <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinished(item)">
            {{item.lable}}
        </li>
    </ul>
  </div>
</template>

其中的

v-bind:class="{finished:item.isFinished}" 是实现点击列表子元素之后,在相应列表的子元素下实现有无下划线的css渲染。
v-on:click="toggleFinished(item)"是具体实现css的改变的函数。
 <input v-model="newItem" @keyup.enter="addNew"/>实现了利用localstorage给列表实现了添加新的列表子元素。

这三个方法的实现都写在了<script>模块的methods部分

4.2.2 script部分实现代码的逻辑处理

代码如下:

<script>

import Store from ‘@/js/store‘
var initItems=Store.fetch();
//console.log(initItems);
export default {
  name: ‘hello‘,
  data :function() {
    return {
      title: ‘This is a toDoList.‘,
      items:initItems,
      newItem:‘‘
    }
  },
   watch:{
     items: {
      handler: function (items) {
            Store.save(items);
       },
      deep: true
    }
  },
  methods:{
    toggleFinished:function(item){
    item.isFinished=!item.isFinished;
    },
    addNew:function(){
        this.items.push({
          lable:this.newItem,
          isFinished:false
        });
        this.newItem="";
    }
  }

}
</script>

其中的

import Store from ‘@/js/store‘,我们是新建一个叫js的文件夹,文件夹里面新建一个store.js的文件。然后store.js文件内部代码如下:(主要实现列表数据的提取和保存),利用了window.localStorage对象的相关方法。其中fetch方法是提取数据,save方法是保存数据。
const STORAGE_KEY = ‘todos-vuejs‘
export default {
    fetch() {
            if (JSON.parse(window.localStorage.getItem(STORAGE_KEY || ‘[]‘))) {
                return JSON.parse(window.localStorage.getItem(STORAGE_KEY))
            } else {
                var theItems = new Array();
                return theItems
            }

        },
        save(items) {
            window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
        }
}

这里的Hello.vue里面的script模块中,我们也利用了watch这个属性,来检测items的变化,来实现实时的保存items。

v-model="newItem"  就和input输入的item,二者进行了绑定。

最后实现的效果如下图:

5 vue的组件划分

5.1父向子组件传参

在components文件夹下,新建componentA.vue,

需要注意的代码:

props:[‘msgFromFather‘],
 methods:{
    clickComponetA:function(){
    alert(this.msgFromFather);
    }
  }
 
 <button v-on:click="clickComponetA()">Click me!</button><h1>{{ msgFromFather }}</h1>

代码如下:

<template>
<div >
<h1>{{ title }}</h1>
<h1>{{ msgFromFather }}</h1>
<button v-on:click="clickComponetA()">Click me!</button>
</div>
</template>

<script>

export default {
name: ‘hello‘,
data :function() {
return {
title: ‘Hello from component A‘
}
},
watch:{

},
props:[‘msgFromFather‘],
methods:{
clickComponetA:function(){
alert(this.msgFromFather);
}
}

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

a {
color: #42b983;
}
</style>

修改App.vue,代码如下:

注意代码:

 <component-a msgFromFather="Hi Son!"></component-a>
import componentA from ‘@/components/componentA‘
export default {
  name: ‘app‘,
  components:{componentA}
}
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <component-a msgFromFather="Hi Son!"></component-a>
  </div>
</template>

<script>
import componentA from ‘@/components/componentA‘
export default {
  name: ‘app‘,
  components:{componentA}
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果如下图:

5.2子向父组件传参

时间: 2025-01-01 21:08:07

Vuejs入门基础笔记的相关文章

python入门基础笔记--1

以前在学校的时候,其实学过python,自己感觉这是一门很优雅的语言.现在觉得有必要把基础整理出来,学习的教程是廖雪峰的python2.7 http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001374738150500472fd5785c194ebea336061163a8a974000 1)pythond 的安装: 现在python的安装十分简单.在windows上只要下载ex

Linux入门基础笔记1(韩立刚课程)

T1 -关闭Linux                  init0/shutdown -h now -切换终端                   Ctrl+alt+fn n=1-6 -查看终端                   tty -查看当前使用的shell          #echo $SHELL    Linux 严格区别大小写 -查看Linux可用的shell       #cat /etc/shells -关机重启命令 shutdown-r now 现在重启     shut

c#入门基础笔记

1.1:.NET与C# 1.1.1:.NET概述与C#应用 .NET是位于WINDOWs平台的一种技术.包含能在.NET FRAMwork平台运行的所有编程. 1.1.2:IDE环境 微软退出强大的平台和技术,并提供了强大的开发环境来和支持!! 1.2:第一个C#程序 1.2.1:新建程序: 步骤: 1启动vs工具 2新建项目 3生成可执行文件 4开始运行 1.2.2:认识控制台应用程序文件结构 Program.cs:该文件是启动文件!  扩展名是.cs Hello world .exe:这个文

智普教育Python视频教程之入门基础篇,python笔记

智普教育Python视频教程之入门基础篇,python笔记 print id()内存地址 type()变量类型 windows命令行下edit命令 python数据类型不需要指定类型 定义hostname="www.google.com" 结果运行后总是告诉我NameError: name 'socket' is not defined 哪位帮我分析一下,怎么改才对 没用过socket,不过你试着在第一行加入 import socket C:\>notepad somefile.

汇编入门学习笔记 (一)—— 基础知识、寄存器

疯狂的暑假学习之  汇编入门学习笔记 (一) 参考:<汇编语言> 王爽  第一,二章 一.基础知识 1. 用汇编语言编写程序的工作过程 汇编本质就是为了方便程序员,把二进制代码用汇编指令来表示 汇编指令---------------->  编译器  ---------------->机器码----------------> 计算机执行 mov ax, bx                                                          100

Nginx基础笔记

Nginx基础笔记 资源 安装 ubuntu下 编译安装 基本操作 HTTP基本配置 配置说明 配置文件目录结构 配置文件结构 模块 模块化 index模块 Log模块 Real IP模块 Access模块 Rewrite模块 Proxy模块 upstream模块 其他 配置静态化目录 负载均衡 控制页面缓存 nginx的内置变量 nginx小结 资源 资源 Nginx 官网 Nginx 官方下载地址 Nginx最佳实践配置项目 地址 Nginx Configuration wiki 教程 ag

REDIS基础笔记

Redis基础笔记 资源链接 简介 简介 安装 五种数据类型及相应命令 1. 字符串类型 2. 散列类型 3. 列表类型 4. 集合类型 5. 有序集合 其他 事务 SORT 生存时间 任务队列 发布/订阅模式 Python中使用Redis 实际实例 管理 其他 资源链接 推荐书籍:<Redis入门指南> 资源列表: redis命令速查command | CMD索引-中文 | CMD树-中文 redis源码github 下载地址redis.io The Little Redis book 入口

Hadoop入门学习笔记---part1

随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力,好好做.正是因为选题和hadoop有关,现在正式开始学习hadoop.将笔记整理于此,希望与志同道合的朋友共同交流. 作者:itRed 邮箱:[email protected] 个人博客链接:http://www.cnblogs.com/itred 好了,废话不多说.进入正题!开始hadoop的学习

Hadoop入门学习笔记---part3

2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hadoop有了一个基础的了解.但是还是有一些理论性的东西需要重复理解,这样才能彻底的记住它们.个人认为重复是记忆之母.精简一下: NameNode:管理集群,并且记录DataNode文件信息: SecondaryNameNode:可以做冷备份,对一定范围内的数据作快照性备份: DataNode:存储数据: