Vuejs入门todolist项目解析

Vue开发入门todolist项目解析

项目:https://github.com/spritecoco…

创建vuejs项目(window系统)

  1. li vue init webpack demo1
  2. npm install

《Vuejs入门todolist项目解析》

原因: 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的区别

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

2、 v-for(循环渲染)

:《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

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

缩写:v-bind:href=”url”—- :href=”url”
v-on:click=”dosomething”—– @click=”dosomething”

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

4、 localstorage存储资料

store.js存取数据《Vuejs入门todolist项目解析》

导入《Vuejs入门todolist项目解析》

监听数据《Vuejs入门todolist项目解析》

data数据《Vuejs入门todolist项目解析》

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

5、 父传子组件传参

app.vue
《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

componentA.vue

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

6、子传父组件传参

app.vue

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

methods

《Vuejs入门todolist项目解析》

componentA.vue

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

《Vuejs入门todolist项目解析》

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

    原文作者:耶雪碧
    原文地址: https://segmentfault.com/a/1190000011291784
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞