1.Vue 简单的替换更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<h2>{{ product }}Python</h2>
</div>
</body>
<!-- <script src='js/vue.min.js'></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#app',
data: {
product:'流浪'
}
})
</script>
</html>
2.v-bind-更新标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue_v-bind-更新标签属性</title>
</head>
<body>
<div id="page">
<a id="prev" v-bind:href= prev>上一页</a>
<a id="next" v-bind:href= next>下一页</a>
</div>
</body>
<!-- <script src='js/vue.min.js'></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#page',
data: {
prev:'https://www.bootcdn.cn/',
next:'https://www.baidu.com/'
}
})
</script>
</html>
3.v-for_模板更新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue_v-for_模板更新</title>
</head>
<body>
<div id='app'>
<table id="emp">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr v-for = 'emp in emps'>
<td>{{emp.no}}</td>
<td>{{emp.name}}</td>
<td>{{emp.job}}</td>
</tr>
</tbody>
</table>
</div>
<!-- <script src="js/vue.min.js"></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#app',
data:{
emps:[{no:'01',name:'锤锤',job:'让人笑'},
{no:'02',name:'狗娃子',job:'好养活'},
{no:'03',name:'召唤师',job:'召唤神兽'}
]
}
})
</script>
</body>
</html>
4.v-if_v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue_v-if_v-else</title>
</head>
<body >
<div id ='app'>
<h1 v-if="Math.random() > 0.5">Yes</h1>
<h1 v-else>No</h1>
<div v-if="Math.random() > 0.5">Sorry</div>
<div v-else>Not sorry</div>
</div>
</body>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<!-- <script src="js/vue.min.js"></script> -->
<script>
const app = new Vue({
el:'#app'
})
</script>
</html>
5.vue-computed(计算)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-computed(计算)</title>
</head>
<body >
<div id ='app'>
<p>我们的队名是: "{{ message }}"</p>
<p>我可以倒背如流: "{{ reversedMessage }}"</p>
</div>
</body>
<!-- <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script> -->
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '流浪python'
},
computed: {
reversedMessage: function () {
// 先把字符串切片成列表,倒序后重新组合成字符串
return this.message.split('').reverse().join('')
}
}
})
</script>
</html>