<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div v-html="template">
</div>
<a v-bind:href="url">百度</a>
{{count}}
<button type="button" v-on:click="submit()">加数字</button>
<div v-bind:id="bg1">
hello world!
</div>
<p>
{{msg1}}
</p>
</div>
<!--
v-bind == :绑定 属性
v-on == @ ：监听
computed 计算属性
watch 侦听器
v-if -->
</body>
<script>
var app1 = 'this is app1!';
var app = new Vue({
el: '#app',
data: {
msg: 'hello vue!',
another: 'another vue!!',
count: 0,
template: '<div>hello template</div>',
url: 'http://www.baidu.com',
bg1: 'app-bind'
},
watch: {
msg: function (newval, oldval) {
console.log('newval is:' + newval);
console.log('oldval is:' + oldval);
}
},
computed: {
msg1: function () {
return 'computed:' + this.msg + this.another + app1;
}
},
methods: {
submit: function () {
this.count++
}
}
})
</script>
</html>
网友评论