Vue基本概念
模板语法
- 认识Vue文件结构(template,script,style)
- 模板语法包含插值、指令(指令缩写)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.bg{ color: Red;}
</style>
<script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
<div class="bg" id="app">
{{msg}}<br />
{{count}}<br />
{{(count+1)*10}}<br />
{{template}}<br />
<div v-html="template"></div>
<a v-bind:href="url">百度</a>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello vue!!',
count: 0,
url:"http://www.baidu.com",
template:"<div>hello template</div>"
}
});
</script>
</body>
</html>
v-bind可以动态绑定id或者class的值
v-on使用示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/jscript" src="../scripts/vue.js"></script>
</head>
<body>
<div id="app">
<div>
count={{count}}<br />
(count+1)*10 ={{(count+1)*10}}<br />
<button type="button" v-on:click="submit()">
点击一次,count加一</button>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
count: 0
},
methods: {
submit: function () {
this.count++;
}
}
});
</script>
</body>
</html>
每点击一下,就会触发submit方法
on指令可以缩写@,v-bind指令可以缩写为: