標籤：
準備知識
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; // 布爾值取反 } }});
Vue.js雙向資料繫結模板渲染
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
