<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基础</title>
<script type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--1.设置标签内容-->
<p id="app1">
{{name}}
</p>
<div id="app2">
<p>{{pTxet}}</p>
<a href="">{{aTitle}}</a>
<h1>{{h1Txet}}</h1>
</div>
<div id="app3">
<img v-bind:src="imgurl" v-bind:title="name"/>
</div>
<div id="app4">
<!--如果message的值是空就隐藏，不是就显示-->
<p v-if='message'>内容是:{{message}}</p>
<!--如果message的值是123就显示,否则就隐藏-->
<p v-if="message=='123'">内容是:{{message}}</p>
</div>
<div id="app5">
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
/*
Vue主要包含两个部分：Vue对象和指令
1.Vue对象
var 对象名 = new Vue（{
el：关键对象的选择器
data：数据对象（属性和值自己决定）
methods：方法对象（属性对应的值是方法）
}）
*/
//1.控制标签显示
var aap1 = new Vue({
el:'#app1',
data:{
message:'我是P标签',
name:'初识Vue',
}
})
var app2 = new Vue({
el:'#app2',
data:{
pTxet:'我是段落',
aTitle:'百度一下',
h1Txet:'我是H1'
}
})
//2.设置标签属性
/*
v-bind：属性 = 'Vue属性名'
*/
var app3 = new Vue({
el:'#app3',
data:{
imgurl:'img/luffy.jpg',
name:'路飞'
}
})
/*
3.if.语句
v-if = '条件语句' -- 如果条件语句的结果是true，标签就显示，否则就不显示
*/
var app4 = new Vue({
el:'#app4',
data:{
message:'123'
}
})
/*
4.循环结构
v-for="变量 in 数组属性"
*/
var app5 = new Vue({
el:'#app5',
data:{
names:['Python','Java','H5','UI']
}
})
</script>
<!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="app1">
<p>{{num}}</p>
<button v-on:click="addAction">加1</button>
</div>
<div id="app2">
<p>{{message}}</p>
<input v-model="message"/>
</div>
</body>
</html>
<script type="text/javascript">
//1.单向事件绑定
// v-on:事件 = "方法名 "
var app1 = new Vue({
el:'#app1',
data:{
num:0
},
methods:{
addAction:function(){
this.num++
}
}
})
//2.input标签双向绑定
// v-model='Vue对象属性名'
var app2 = new Vue({
el:'#app2',
data:{
message:''
},
methods:{
addAction:function(){
this.num++
}
}
})
</script>
