<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.a{
100px;
height:100px;
background:red;
}
.b{
100px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<div id="dd">
<!--v-bind:class='cla':通过vue给div绑定一个class属性，
属性值是vue对象的data中cla对应的值-->
<div v-bind:style="sty">{{con}}</div>
<input type="button" @click="fn" value="兄弟请点我">
</div>
</body>
<script>
var vm = new Vue({
el:'#dd',
data:{
con:123,
cla:'a'
},
methods:{
fn:function () {
this.cla='b'
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="dd">
<!--将值绑定进入data-->
<!--data中所有数据的格式都是 名：值 的形式-->
<!--v-model='a' 给这个数据取名为'a'-->
<input type='text' v-model="a">
<!--给按钮绑定点击事件-->
<!--'v-on:click'='fn':当这个按钮被点击的时候执行方法fn-->
<!--fn方法具体长什么样，在vue对象的methods中规定-->
<input type="button" value="提交" v-on:click="fn">
<ul>
<!--遍历vue对象中arr里面的数据-->
<!--con代表arr中的每一个值，有一个值就创建一个li,并且把此时的值放入li中-->
<li v-for="con in arr">{{con}}</li>
</ul>
</div>
</body>
<script>
//声明一个vue对象
var vm = new Vue({
//接管区域，冒号前不变后边跟着id名
el:'#dd',
//接管区域内用到的数据
data:{
arr:[]
},
//通过vue绑定的方法
methods:{
fn:function () {
//把a的值添加进arr中
//alert(this.a)
this.arr.push(this.a)
//将a的值赋值为空字符串（清空）
this.a=''
}
}
})
</script>
</html>
<!--模板语法补充-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="div1">
<div>{{con}}</div>
//获取的值
<div v-text="con"></div>
<!--字符串拼接-->
<div v-html="con"></div>
</div>
</body>
<script>
//div.innerHTML='hello world'
//声明一个vue对象，在里面进行vue的操作
var div1=new Vue({
//vue对象的接管区域
el:'#div1',
//操作的数据
data:{
//con:'<h1>hello world</h1>>'
//con:'<h1>100</h1>'
con:'100'+5
}
})
//模板语法
//data里面的数据，根据键名到页面上对号入座
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div class="dd">{{con}}</div>
<div class="dd">{{con}}</div>
</body>
<script>
//标签尽管用相同的类名，vue也只认第一个
var dd=new Vue({
el:'.dd',
data:{
con:'123'
}
})
</script>
</html>
<!--模板语法-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="dd">
<input type="button" v-on:click="fn" value="弹框输出123">
<input type="button" v-on:click="fn1" value="弹框输出345">
</div>
</body>
<script>
var dd=new Vue({
el:'#dd',
methods:{
fn:function () {
alert(123)
},
fn1:function () {
alert(345)
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<!--<ul id="uu">-->
<!--<li>{{con1}}</li>-->
<!--<li>{{con2}}</li>-->
<!--<li>{{con3}}</li>-->
<!--<li>{{con4}}</li>-->
<!--</ul>-->
<ul id="uu">
<li v-for="con in arr">{{con}}</li>
</ul>
</body>
<script>
var uu=new Vue({
el:'#uu',
data:{
arr:[111,222,333,444]
// con1:'111',
// con2:'day2',
// con3:'333',
// con4:'444'
}
})
</script>
</html>
<!--渲染-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background:red;
}
.c2{
background:yellow;
}
.c3{
background:green;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<tr class="c1">
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr class="c2">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr class="c3">
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background:red;
1000px;
height:50px;
}
.c2{
background:yellow;
1000px;
height:50px;
}
.c3{
background:black;
1000px;
height:50px;
}
span{
background:green;
1000px;
height:1000px;
}
</style>
</head>
<body>
<ul>
<li class="c1">1</li>
<li class="c1">2</li>
<li class="c2">3</li>
<li class="c2">4</li>
<li class="c3">5</li>
</ul>
<span>
1810a
</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="dd">
<input type="button" value="提交" @click="fn">
<span>反转前:</span>{{str1}}<br>
<span>反转后:</span>{{str2}}
</div>
</body>
<script>
var vm=new Vue({
el:'#dd',
data:{
str1:'python是最好的语言'
},
computed:{
str2:function () {
return this.str1.split('').reverse().join('')
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="get">
<input type="text">
<input type="password">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打豆豆
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置按钮">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background:red;
200px;
height:50px;
}
#d2{
background:red;
200px;
height:50px;
}
#d3{
background:red;
200px;
height:50px;
}
.c1{
background:yellow;
200px;
height:50px;
}
div{
background:green;
200px;
height:50px;
}
</style>
</head>
<body>
<div id="d1">1810a</div>
<div id="d2">1810a</div>
<div id="d3">1810a</div>
<div class="c1">1810a</div>
<div class="c1">1810a</div>
<div class="c1">1810a</div>
<div>1810a</div>
<div>1810a</div>
<div>1810a</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background:red;
100px;
height:100px;
}
.c2{
background:yellow;
200px;
height:200px;
}
</style>
</head>
<body>
<!--<div id="d1" class="c1">1810a</div>-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script>
//如何获取标签
//方式1，用id
//d1.innerHTML='1810a班是最牛的班级'
//弹框输出
//alert(123)
//交互输入
// var a=prompt('请输入一句话')
// //alert(a)
// d1.innerHTML=a
// d1.style.background='yellow'
// d1.style.height='500px'
// //修改类名
// d1.className='c2';
var arr=document.getElementsByTagName('li')
alert(arr[2].innerHTML)
for(var i=0;i<=5;i++){
alert(arr[i].innerHTML)
}
</script>
</html>