vue入门一
<!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></title>
<style type="text/css">
.box{
background-color: red
/* height: 200px
width: 200px*/
}
.box2{
background-color: green;
}
</style>>
</head>
<body>
<div >
<hr>
<h2>实例化对象测试</h2>
<h3>{{title}}</h3>
<h3>{{1+1}}</h3>
<h3>{{3>2?"真的":"假的"}}</h3>
<h3>hahaahahah</h3>
<!-- <h3>{{123}}</h3> -->
<!-- 这个可以正常显示，因为数字也是一个对象 -->
<!-- <h3>{{a}}</h3> -->
<!-- 这个会报错，会找a这个变量，找不到就会报错 -->
<hr>
<h2>指令系统测试</h2>
<h3 v-if = "show">显示隐藏测试</h3>
<input v-on:click = "clickhandler" type="button" value="按钮">
<h3 v-show = "isshow">v-show的测试</h3>
<h3 v-show = "isshow" v-bind:title="title">v-title的测试</h3>
<!-- 绑定一个title属性，鼠标悬浮上会显示title的值，可以绑定任何属性 -->
<!-- v-bind写起来有点繁琐，可以直接用冒号代替 ： -->
<!-- v-on写起来有点繁琐，可以直接用@符号代替v-on，其他和之前是一样的 -->
<div class="box" v-bind:class='{box2:isGreen}'>绑定class属性测试</div>
<input type="button" v-on:click="changeColour" value="切换按钮">
<button v-on:click="num+=1">加{{num}}</button>
<img v-bind:src="img" v-bind:alt="time">
<div v-if = "Math.random() > 0.5">
数字大于1
</div>
<div v-else>
数字小于1
</div>
<div v-if = "type === '打雷'">
打雷
</div>
<div v-else-if = "type === '下雨'">
下雨
</div>
<div v-else>
雷阵雨
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script>
// 1.创建vue实例化对象,一个vue实例只能绑定一块地，绑定的这块地就可以使用实例化中的data数据，采用{{}}的方式使用data中的数据
var app = new Vue({
el:"#app",
// el的属性是这个vue的对象绑定的标签的id
data:{
// 所有的数据都放在数据属性中,必须是data,第一个属性是el，第二个属性是data
title:'土豆' ,
show:true,
type:"下雨",
isshow:true,
title:"title测试",
img:'./timg.jpg',
time:`页面加载于${new Date().toLocaleString()}`,
isGreen:true,
num:1
},
methods:{
clickhandler(){
// 这里这个this就是当前实例化的对象
this.$data.show = !this.show;
},
changeColour(){
alert(123);
this.isGreen = !this.isGreen;
}
}
})
console.log(app);
// 打印app这个对象
console.log(app.$el);
// 打印app这个对象的el属性
console.log(app.$data.title)
console.log(app.title)
// 上面这两种方式效果一样，我们打印app这个对象，可以看到这个对象直接就有一个title属性
// 2、vue的指令系统
</script>
</body>
</html>
以上是 vue入门一 的全部内容， 来源链接： utcz.com/z/380212.html
