准备知识
1. 前端开发基础 html、css、js
2. 前端模块化基础
3. 对ES6有初步的了解
vuejs官网：cn.vuejs.org
HTML：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Vuejs</title> <style> .finished { text-decoration: underline; } </style> </head> <body> <div id="demo"> <h1 v-text="title"></h1> <ul> <li v-for="item in items" :class="{finished: item.isFinished}"> {{item.label}} </li> </ul> </div> <script src="vue.js"></script> <script src="demo01.js"></script> </body> </html>
Js：
var demo = new Vue({ el: '#demo', data: function () { return {
a: 1, title: 'this is a todo list', items: [ { label: 'coding', isFinished: false }, { label: 'walking', isFinished: true } ], liClass: 'thisIsLiClass' }; }, methods: { doSomething: function () { console.log(this.a); } } });
实例2：
html：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Vuejs</title> <style> .finished { text-decoration: underline; } </style> </head> <body> <div id="demo"> <h1 v-text="title"></h1> <!-- v-model随表单控件的不同而不同 --> <input type="text" v-model="newItem"/> <ul> <li v-for="item in items" :class="{finished: item.isFinished}" @click="toggleFinish(item)"> {{item.label}} </li> </ul> </div> <script src="jquery-3.1.0.min.js"></script> <script src="vue.js"></script> <script src="demo01.js"></script> </body> </html>
js：
var demo = new Vue({ el: '#demo', data: function () { return { title: 'this is a todo list', items: [ { label: 'coding', isFinished: false }, { label: 'walking', isFinished: true } ], newItem: '', liClass: 'thisIsLiClass' }; }, methods: { doSomething: function () { console.log(this.a); }, toggleFinish: function (item) { item.isFinished = !item.isFinished; // 布尔值取反 } } });