<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE基本使用</title>
<link href="https://mirrors.idiyrom.com/web/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.active {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<!--
<div id="app">-->
<!-- 模板语法 -->
<!--
<h3>{{ msg }}</h3>
<h3>{{ "测试字符串" }}</h3>
<h3>{{ 1+2 }}</h3>
<h3>{{ {"name": "pengge"} }}</h3>
<h3>{{ person.name }}</h3>
<h3>{{ 1>2? "真显示R": "假显示L" }}</h3>
<p>{{ msg2.split('').reverse().join('') }}</p>
<div>{{ text }}</div>
</div>-->
<!--<div id="app">
{{ msg }}
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>-->
<div id="app1">
{{ add(2,3) }}
<button v-on:click="handlerClick">HIDE</button>
<!--
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
-->
<div class="box1" v-show="isShow"></div>
<div class="box2" v-if="isShow"></div>
<div v-if="Math.random() > 0.5">显示大于条件成立的内容</div>
<div v-else>显示条件不成立的内容</div>
<!--<img v-bind:src="imgsrc" v-bind:alt="altmsg">-->
<!--v-bind 可以绑定标签中任何属性，v-on 可以绑定JavaScript所有事件
v-bind:src 可以简写:src v-on:click 可以简写@click-->
<img :src="imgsrc" :alt="altmsg">
<button @click="handlerChange">切换颜色</button>
<div class="box1" :class="{active:isActive}" @mouseenter="handlermouseenter" @mouseleave="handlermouseleave">
</div>
<ul v-if="data.status === 200">
<!--v-for的优先级最高-->
<li v-for="(item, index) in data.users" :key="item.id">
<h3> {{ item.id }} --- {{ item.name }} --- {{ item.age }} </h3>
</li>
</ul>
<div v-for="(value, key) in person">
<h3> {{ key }} ------ {{ value }} </h3>
</div>
</div>
</div>
<!-- 1 导入包文件 -->
<script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script>
<script>
//2 实例化对象
//new Vue({
// el: "#app",
// data: {
// msg: "用户名或密码错误",
// person: {
// name: "ropon"
// },
// msg2: "hello world",
// text: "<h3>测试标题</h3>"
// }
//});
//指令系统v-text v-html
// new Vue({
// el: "#app",
// data () {
// return {
// msg: "<h3>测试v-text v-html</h3>"
// }
// }
// });
new Vue({
el: "#app1" ,
data () {
return {
msg: "<h3>测试v-text v-html</h3>",
isShow: false,
imgsrc: "https://www.ropon.top/wp-content/themes/JieStyle-Two/images/avatar.jpg",
altmsg: "这是一张图片",
isActive: true,
data: {
status: 200,
users: [
{id: 1, name: "ropon", age: 18},
{id: 2, name: "pengge", age: 20},
]
},
person: {
name: "luopeng"
}
}
},
methods: {
add(x, y) {
return x + y
},
handlerClick() {
//数据驱动
this.isShow = !this.isShow;
},
handlerChange() {
this.isActive = !this.isActive;
},
handlermouseenter() {
this.isActive = false;
},
handlermouseleave() {
this.isActive = true;
},
}
});
</script>
</body>
</html>
