实现一个脚手架(vue-cli)创建的一个简单 to do list 实例。
完整项目下载:
Download
下载后进入项目目录执行 npm install 命令导入依赖模块。
执行以下命令启动项目:
npm run dev
此项目端口号设为 6060。
项目目录结构:
src/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> </template> <script> import Store from './store' export default { data:function(){ return { title:"This is a Todolist", items:Store.fetch(), newItem:"" } }, watch:{ items:{ handler:function(items){ Store.save(items) }, deep:true } }, methods:{ toggleFinish:function(item){ item.isFinished = !item.isFinished }, addNew:function(){ this.items.push({ label:this.newItem, "isFinished":false }) this.newItem="" } } } </script> <style> .finished{ text-decoration:line-through; } li{ list-style:none; font-size:1.6em; margin-top:10px; } #app { background-image:url(./576df1167c887_1024.jpg); font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } input{ width:230px; height:40px; border-radius:20px; padding: 0.4em 0.35em; border:3px solid #CFCFCF; font-size: 1.55em; } </style>
src/store.js 实现存储,即刷新数据不消失:
const STORAGE_KEY='todos-vuejs' export default { fetch:function(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]'); }, save:function(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) } }
exact-active-class 和 active-class 的区别
router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 <router-link to="/article">,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class,例如:
<router-link to="/article" active-class="router-active"></router-link>
当用户访问 /article/1 时会被激活为:
<a href="#/article" class="router-active" rel="nofollow"></a>
而当使用:
<router-link to="/article" exact-active-class="router-active"></router-link>
当用户访问 /article/1 时,不会激活这个 link 的 class:
<a href="#/article" rel="nofollow"></a>
这个例子的执行过程注解:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小鸟启蒙(facesoho.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div id="counter-event-example"> // 6. 页面上更新total的值 <p>{{ total }}</p> // 4. 这里的自定义事件再次触发局域方法incrementTotal <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> // 1. 注册全局组件 Vue.component('button-counter', { // 2. button绑定点击事件incrementHandler template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { // 3. 点击事件触发后,再次触发自定义事件increment incrementHandler: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { // 5. 局域方法执行了total+1 incrementTotal: function () { this.total += 1 } } }) </script> </body> </html>
props 验证补充代码:注意 替换 vue.min.js 为 vue.js,验证结果可以到浏览器 console 查看,自定义验证函数尚未尝试出来
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script> <div id="app"> <example :propa="'asda'" :propb = "'aasasa'" :propc="'sdf'" :prope="{a:'a'}" :propf="100" ></example> </div> <script type="text/javascript"> Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propa: Number, // 多种类型 propb: [String, Number], // 必传且是字符串 propc: { type: String, required: true }, // 数字,有默认值 propd: { type: Number, default: 1000 }, // 数组/对象的默认值应当由一个工厂函数返回 prope: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propf: { type: Number, validator: function (value) { // 这个值必须匹配下列字符串中的一个 return value>0? -1:1 }, defalut:12 } }, template: ` <table border="1px"> <tr> <th>propA</th> <th>propB</th> <th>propC</th> <th>propD</th> <th>propE</th> <th>propF</th> </tr> <tr> <td>{{ propa }}</td> <td>{{ propb }}</td> <td>{{ propc }}</td> <td>{{ propd }}</td> <td>{{ prope }}</td> <td>{{ propf }}</td> </tr> </table>` }) new Vue({ el: "#app" }); </script>
尝试一下 »
你可能在找的系统点击事件的例子。
<div id="app"> <p>点击元素输出元素内容:</p> <ol> <todo-item v-for="item in sites" v-bind:todo="item" @click.native="alert(item.text)"></todo-item> </ol> </div>
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
702Vue.js 实例
实现一个脚手架(vue-cli)创建的一个简单 to do list 实例。
完整项目下载:
Download
下载后进入项目目录执行 npm install 命令导入依赖模块。
执行以下命令启动项目:
npm run dev
此项目端口号设为 6060。
项目目录结构:
src/App.vue 文件代码:
src/store.js 实现存储,即刷新数据不消失:
701Vue.js 路由
exact-active-class 和 active-class 的区别
router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 <router-link to="/article">,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class,例如:
当用户访问 /article/1 时会被激活为:
而当使用:
当用户访问 /article/1 时,不会激活这个 link 的 class:
700Vue.js 组件
这个例子的执行过程注解:
699Vue.js 组件
props 验证补充代码:注意 替换 vue.min.js 为 vue.js,验证结果可以到浏览器 console 查看,自定义验证函数尚未尝试出来
尝试一下 »
698Vue.js 组件
你可能在找的系统点击事件的例子。
尝试一下 »