01、Vue-基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行找的皮卡丘</title>
<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{text}}</p>
<span id="app" v-html='msg'></span>
<a v-bind:href='url'>{{url}}</a>
<p>{{titel.split("").reverse().join("")}}</p>
<p v-if="seen">判断seen是否为真</p>
<p>{{message}}</p>
<button v-on:click="reverseMessage">点我</button>
<p>{{res}}</p>
<input type="text" v-model="res">
<div>{{istrue}}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
text: '文本插入',
msg: '<h1>html插入</h1>',
url: 'www.baidu.com',
titel: 'HBuilder',
seen: true,
message: "反转字符串",
res: "双向数据绑定",
istrue: 1 == 1,
},
methods: {
reverseMessage: function(e) {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</html>