<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
<script>
// vue的使用是从对象开始的
</script>
</head>
<body>
<!--
vue是前端的一个函数库，一个框架，和jq实现的功能是一样的
每一个标签都使用scripty中vue创建一个对象，然后使用el和标签关联起来
然后通过胡子编程{{ 属性 }}，来显示数据，
通过:href= 。。。来控制html属性
通过@click=等事件，绑定事件：
通过class=字典...，来设置控制class属性
-->
<!-- 显示数据使用胡子语法：{{ }},两个括号之间不能有空格，-->
<div id="app">{{str}}</div>
<script>
var vm = new Vue({ //字典的格式，v要大写
// el:vue要控制的标签Element 的缩写
el:"#app",
// data:存储vue的数据,字典的格式
data:{
str:'hellow world'
}
})
</script>
<hr>
<h3>vue控制html属性</h3>
<!-- vue中的模板语法 显示数据（得到一个节点后，可以控制节点中的任何数据）：可以写事件，可以写运算，可以写三元运算等-->
<div id="div1">
{{ str.split("").reverse().join("") }}
<p>
{{ num+1 }}
</p>
<!--
v-XX： 表示指令，具备特殊功能的语法
： 化简写法,只写一个冒号即可
-->
<a v-bind:href="url1">baodu </a>
<br>
<a :href="url1">taobao</a>
<!-- 使用三元运算符 -->
<div>{{ bool?"真的":"假的" }}</div>
<!-- 绑定事件:完整写法和化简写法 -->
<br>
<button v-on:click="num +=1">按钮</button>
<br>
<button @click="num +=1">按钮2</button>
<!-- 调用函数：没有参数的话，写括号和不写都可以，有参数的话，需要写括号，这里的5就是实参 -->
<br>
<button @click=fnAdd(5)>按钮3</button>
</div>
<script>
var vmdiv = new Vue({
el:'#div1',
data:{
str:"adadfaf",
num:22,
bool:true,
url1:"https://www.baidu.com/",
url2:"https://www.taobao.com/"
},
// 封装函数，然后被调用
methods:{
// 封装函数：函数名、匿名函数，其中a为形参，调用函数的时候，可以传递
fnAdd:function(a){
// this表示当前对象vmdic，
this.num += a
}
}
})
</script>
<hr>
<h3>vue控制class属性:三种：字典，对象，列表</h3>
<!--
字典：{类名：布尔类型，true表示添加，fals表示不添加}
对象：key是真实的类名，value是布尔类型的取值
列表：每个元素都是类名
列表中有三元：看结果取类名
-->
<div id="div2">
<!-- class=字典中，一个类名对应一个布尔类型 -->
<div :class="{'class1':'bool1','':''}">1111111111</div>
<!-- 写上对象。根据对象中的属性，添加类名 -->
<div :class="myobject">2222222222</div>
<!-- 普通列表的话，写的是属性，根据属性获取类名 -->
<div :class="[myclass1,myclass2]">3333333333</div>
<!-- 三元运算中，要将类名写上，而不是属性 -->
<div :class="[bool2?'leiming1':'leiming2']">4444444444</div>
</div>
<script>
var div2 = new Vue({
el:"div2",
data:{
bool1:true,
bool2:true2,
myobject:{
class1:true,
class2:false
},
myclass1:'leiming1',
myclass2:'leiming2'
}
})
</script>
</body>
</html>
