Vue基礎
Vue應用
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Vue !'}})
</script>
</html>
綁定元素
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><span>{{ message }}</span> <br><span v-bind:title="ads">停留查看時間</span> <br><a v-bind:href="home" target="_blank">跳轉頁面</a>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Vue',ads: '頁面當前時間 ' + new Date().toLocaleString(),home: 'http://www.baidu.com/'}})
</script>
</html>
if條件渲染
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><span>{{ message }}</span> <br><p v-if="seen">seen為true，你可以看到這段文字</p>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!',seen: true,}})
</script>
</html>
for列表渲染
v-for指令可以綁定數組的數據來渲染一個項目列表
v-for指令需要使用item in items形式的特殊語法，items是源數據數組并且item是數組元素迭代的別名。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {todos: [{text: 'Java'},{text: 'Vue'},{text: 'Python'}]}})
</script>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><ol><li v-for="(todo,index) in todos">{{ todo.text }}-{{index}}</li></ol>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {todos: [{text: 'Java'},{text: 'Vue'},{text: 'Python'}]}})
</script>
</html>
對象
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><ul><li v-for="value in object">{{ value }}</li></ul>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {object: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}})
</script>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><ul><li v-for="item in its">{{ item.title }}~~~{{item.author}}~~~{{item.publishedAt}}</li></ul>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {its: [{title: 'Vue',author: 'Jane Doe',publishedAt: '2016-04-10'},{title: 'python',author: 'Ricky',publishedAt: '2019-04-10'},{title: 'JS',author: 'None',publishedAt: '2006-05-08'}]}})
</script>
</html>
事件
可以用v-on指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {counter:0}})
</script>
</html>
事件處理
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><button v-on:click="add">Add 1</button>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {counter: 0},methods: {add: function () {this.counter += 1alert(this.counter)}}})
</script>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><button v-on:click="addnum(counter)">Add {{counter}}</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',data: {counter:1},methods:{addnum:function(num){this.counter = num+this.counteralert(this.counter)}}
})
</script>
</html>
model表單輸入綁定
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 開發環境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><table border="1"><tr><td>用 戶 名</td><td><input type="text" v-model="username" @blur="checkusername"></td></tr><tr><td>密碼</td><td><input type="password" v-model="password1"></td></tr><tr><td>確認密碼</td><td><input type="password" v-model="password2"></td></tr><!-- 單選--><tr><td>性別</td><td>男<input type="radio" name="sex" value="boy" v-model="sex">女 <input type="radio" name="sex" value="girl" v-model="sex"></td></tr><!-- 多選--><tr><td>愛好</td><td>足球 <input type="checkbox" name="like" value="足球" v-model="like">籃球 <input type="checkbox" name="like" value="籃球" v-model="like">兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like"></td></tr><!-- 下拉--><tr><td>所在城市</td><td><select name="city" v-model="city"><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option><option value="深圳">深圳</option></select></td></tr><tr><td>個人簡介</td><td><textarea name="desc" v-model="desc"></textarea></td></tr></table><button @click="register">注冊</button>
</div>
</body>
<script type="text/javascript">var app = new Vue({el: '#app',data: {username: '',password1: '',password2: '',sex: '',like: [],city: '',desc: ''},methods: {register: function () {alert(this.username + this.password1 + this.password2 + this.sex + this.like + this.city + this.desc)},checkusername: function () {alert(this.username)}}})
</script>
</html>
簡單示例)
)
)
)