实例如下所示： <template><div class="hello"><h1>{{ msg }}</h1><h2>Foo</h2><div v-for ="(item, index) in list"><!--<p>{{item }}</p>--><h1 v-show="false">{{a[index] = item.bb}}</h1><!-- <h1>index:{{index}}</h1>--></div><h2>a:{{a}}</h2><h2>{{cc}}</h2><!--<button v-on:click="cc">点击</button>--></div> </template> <script> export default {name: foo,data () {return {msg: 这儿是Foo,list:[{insertId: asfas...
我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事，这里的markdown的代码总是串行。。所以代码看得不舒服，见谅啊，我最后会放github的源代码地址。 1. 父组件topNav中注册子组件，引入子组件 <template><div><p>下面这一行就是定义的组件名称</p><todo-list></todo-list><router-view></router-view></div> </template> <script> /* 1. 通过import来引入我们的子组件drawerLayout 2. 引入子组件，并重新取名...
前言 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁，业务清晰。 首先分析以...
看了两天的Vue，还是上手写一个简单的todolist更实用（文末有彩蛋）。 一、使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件，方法： npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev这样我们的一个基于webpack的vue项目目录就可以快速构建好了。目录如下：二、完成一个简单的todolist 接下来就看一下webpack.base.conf文件，这是核心文件，必须执行...
案例知识点： 1.vue.js基础知识 2.HTML5 本地存储localstorage store.js代码 const STORAGE_KEY = todos-vue.js export default{fetch(){return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || [])},save(items){window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));} }App.vue代码 <template><div id="app"><h1 v-text="title"></h1><input v-model="newItem" v-on:keyup.enter="addNew"/><ul><li v-for="...
通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="lib/bootstrap.min.css"/><script src="lib/jquery-1.7.2.js"></script><script src="lib/bootstrap.js"></script> </head> <body> <div class="container"><...
前言最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监听，加深了对vue基本原理的印象。 github地址：todo-list 学习链接前排感谢以下文章，对我理解vue的基本原理有很大的帮助！ 剖析vue实现原...
新建组件todoList.vue，在App.vue中引入 import TodoList from "./components/todoList"; export default {name: app,components: {TodoList} } <template><div id="app"><h1>TO DO LIST !</h1><todo-list></todo-list></div> </template> 三处缺一不可，第一处引入文件，第二处注册组件，第三处声明组件位置 由于html中不区分大小写，所以驼峰命名方式中的大写变为-，即第三处中写成todo-list，不理解的可以动手实验一下！ todoL...
如图，A simple todo-list长这样这是一个基于vue.js的一个简单的todo-list小demo。首先要实现添加非空list，点击list切换finished状态这样的一个效果，推荐学习地址---->点击打开链接 接下来是实现的一个上移，下移，删除的效果图：删除效果：讲一下思路： 上移-----首先将鼠标所指list的内容插入到上一条上面，然后删除鼠标所指的list（也就是this.items[index]），运行代码便可实现上移的效果，或者将上下两条list的内容进行调换...
看完vue2的官方文档后，找个入门项目巩固下知识点，简单的todolsit是个不错的选择。项目用到了vue.js vue.cli webpack ES6 node环境，完成项目后会对这些技术栈有了些了解。 准备开发环境 $ npm install -g vue-cli $ vue init ，比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev安装谷歌插件vue.js devtools下载vue.js的webpack模板下载todomvc的模板 (提供html和css)（也可以直接$ git clone https://...
Vue学习完成Todo List网页，供大家参考，具体内容如下跟着老师学习Vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。 Vue非常容易上手，运用到了双向绑定机制，即HTML里的DOM元素与JS里的Vue实例进行双向绑定，只要Vue实例中的代理数据改变，HTML中的实际数据就会跟着变，这和原生的Js的命令驱动模式不同，它是数据驱动模式，通过数据的改变来控制DOM的变化。什么意思呢？我们会在接...
刚学习vue的小伙伴不知道从哪入手，很多网上的教程一来就搭建脚手架环境，可以新手更本看不懂，建议还是用引入script的方式引入vue.js，然后看官网的教程，再拿那这个demo练练手，也可以看看官网的demo，然后再去熟悉安装，搭建单页面应用。 效果：功能： 在input输入文字点击按钮或者enter，下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数： data，methods，watch，还有localstorage 页面非常简单： 先写外面的盒子...
用vue.js实现一个todolist项目：input输入框输入的值会呈现在下方，并且会保存在localStorage里面，而且下方的列表点击之后也会有变化：完整代码： App.vue <template><div id="app"><h1 v-html = "title"></h1><input v-model="newItem" v-on:keyup.enter="addNew" ></input><ul><li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</li></ul></div> </templat...
一、需求与准备 1、准备 使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要 2、功能需求 1）、表单实现输入任务清单后加入到展示项中 2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件） 3)、确定删除时，删除对应项（单项删除，全部删除） 4）、任务列表为空时，显示“数据为空” v-show二、实例 1、静态页面 demo使用bootstrap来快速搭建页面 1）、表单组件： .form, form-group, form-con...
网上有很多关于vue的todolist小程序。大多是利用vue-cli脚手架工具开发的，这个官网的文档也不支持新手从单文件开始学习。所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习。1、vue是啥？ Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的 渐进式框架。简单说是一个模板引擎，做过后端的应该很清楚，以前靠服务器端渲染的dom，放在浏览器端端渲染，vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的，数据...