博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vuejs入门todolist项目解析
阅读量:6148 次
发布时间:2019-06-21

本文共 669 字,大约阅读时间需要 2 分钟。

Vue开发入门todolist项目解析

项目:

创建vuejs项目(window系统)

  1. li vue init webpack demo1
  2. npm install

图片描述

原因: fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,忽略即可。意思就是你已经安装成功了。

  1. npm run dev

代码解析

认识代码形式

1、vueapp.html代码

<div id="app">

<p>{
{ message }}</p>
<input v-model="message">
</div>

2、vueapp.js代码

new Vue({

el: '#app',
data: {

message: '信息'

}

})

项目代码

1、 v-text与v-html的区别

图片描述

图片描述

图片描述

图片描述



2、 v-for(循环渲染)

:图片描述

图片描述

3、v-bind、 v-on(绑定事件)

缩写:v-bind:href="url"---- :href="url"

v-on:click="dosomething"----- @click="dosomething"

图片描述

图片描述

图片描述

4、 localstorage存储资料

store.js存取数据store.js

导入图片描述

监听数据图片描述

data数据图片描述

(注意:在 Vue2.0 中 $dispatch 和 $broadcast 已经被弃用,我使用的时候一直出错,神坑)

5、 父传子组件传参

app.vue

图片描述

图片描述

图片描述

componentA.vue

图片描述

图片描述

6、子传父组件传参

app.vue

图片描述

图片描述

methods

图片描述

componentA.vue
图片描述

图片描述

图片描述

第一次写,不是很好,下次会改进的

转载地址:http://mwqya.baihongyu.com/

你可能感兴趣的文章
【原创】远景能源面试--一面
查看>>
B1010.一元多项式求导(25)
查看>>
10、程序员和编译器之间的关系
查看>>
前端学习之正则表达式
查看>>
配置 RAILS FOR JRUBY1.7.4
查看>>
AndroidStudio中导入SlidingMenu报错解决方案
查看>>
修改GRUB2背景图片
查看>>
Ajax异步
查看>>
好记性不如烂笔杆-android学习笔记<十六> switcher和gallery
查看>>
JAVA GC
查看>>
3springboot:springboot配置文件(外部配置加载顺序、自动配置原理,@Conditional)
查看>>
9、Dubbo-配置(4)
查看>>
前端第七天
查看>>
图解SSH原理及两种登录方法
查看>>
[转载] 七龙珠第一部——第058话 魔境圣地
查看>>
【总结整理】JQuery基础学习---样式篇
查看>>
查询个人站点的文章、分类和标签查询
查看>>
基础知识:数字、字符串、列表 的类型及内置方法
查看>>
JSP的隐式对象
查看>>
JS图片跟着鼠标跑效果
查看>>