<!--
* @Author: your name
* @Date: 2020-02-01 11:19:29
* @LastEditTime: 2020-03-30 21:32:11
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \x\vue-order.html
-->
<!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>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-color:red;
}
.active {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 創建實例化對象
// {{}} 插值
// v-text innerText
// v-html innerHtml
// v-if true顯示 false則顯示else
// v-show 控制Dom原素的顯示隱藏display: none | block
// 控制類名對元素顯示隱藏 display: none | block
// v-bind 綁定標籤屬性（內置屬性，自定義屬性）簡寫 :
// v-on: 事件名='函數名'簡寫 :@
// v-for "(item, index) in 對象"
/*
v-if 條件渲染，性能消耗，dom銷燬創建
v-show 性能消耗小，都會渲染，css切換
v-show 更高的初始渲染開銷，v-if有更高的切換開銷
頻繁切換 -- v-show
很少改變 -- v-if
*/
var vm = new Vue({
el: "#app",
data: function () {
// 返回必須是一種對象
return {
msg: 'order',
msg2: '<h2>o</h2>',
isShow: false,
isGreen: false,
menuList: [
{id: 1, name:'da', price:70},
{id: 2, name:'da1', price:60},
{id: 3, name:'da2', price:80},
],
person: {
name: 'a',
age: '13',
fav: 'PE'
}
}
},
// 默認加載template的模板
template: '<div class="app">\
<h2>{{msg}}</h2>\
<p v-html="msg2"></p>\
<p v-text="msg"></p>\
<div v-if="isShow">begin</div>\
<div v-if="!isShow">end</div>\
<div v-if="Math.random() > 0.5">xx</div>\
<div v-else>x</div>\
<div v-show="isShow">xianshi</div>\
<div v-show="!isShow">wu</div>\
<div class="box" v-on:click="clickHandler" v-bind:class="{active:isGreen}"></div>\
<ul>\
<li v-for="(item, index) in menuList">\
<h5 v-text="item.id"></h5>\
<h3>{{item.name}}</h3>\
<em>{{item.price}}</em>\
</li>\
</ul>\
<ul>\
<li v-for="(value, key) in person">\
<h5>{{key}} == {{value}}</h5>\
</li>\
</ul>\
</div>',
methods: {
clickHandler(e) {
console.log(this)
this.isGreen = !this.isGreen;
}
},
});
</script>
</body>
</html>
