<!DOCTYPE html>
<html lang="zh">
<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">
.active{
color: aqua;
}
</style>
</head>
<body>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
<!-- 基本变量传递 -->
<div id="box">{{name}}
<!-- 基本数据类型运算 -->
<div>{{name+"vue"}}</div>
<div>{{1+1}}</div>
<!-- 逻辑运算 -->
<div>{{test||"我是可爱的小果儿"}}</div>
<!-- 字符串 -->
<div>{{name.indexOf("果")!=-1?"我的宝贝":""}}</div>
<!-- 字符串切割 -->
<div>{{name.slice(1)}}</div>
<!-- 数组运算 -->
<div>{{["哈哈","嘻嘻","么么哒"].splice(1,2)[0]}}</div>
<!-- 设置文字，内置html 以及设置display:none 显隐 -->
<div v-text="name"></div>
<div v-html="html"></div>
<div v-show="bool">小果儿可以隐身奥</div>
<!-- 会把div节点也会删除的 -->
<div v-if="bool===true">我要隐身喽</div>
<!-- 属性绑定 v-bind 简写 ：-->
<a v-bind:href="url" v-bind:title="name">百度一下</a>
<!-- 属性绑定简写 :-->
<a :href="url" :title="name">百度</a>
<!-- 事件绑定 v-on 简写@-->
<button v-on:click="show(false)">隐身</button>
<button @click="totext">简写</button>
<button @click="text('name',$event)">鼠标事件</button>
<!-- 事件冒泡 -->
<div @click="test1">
<!-- 阻止冒泡 -->
<button type="button" @click.stop="test2">冒泡</button>
</div>
<form action="">
<!-- 禁止默认行为 action 为空，默认提交数据到当前页。-->
<input type="text">
<input type="password">
<button type="submit" @click.prevent.stop>提交</button>
</form>
<!-- 数据遍历 v-for-->
<ul>
<li v-for="(item,index) in userList" :class="num==index?'active':''">
<h1 @click="showName(index)">{{item.uname}}</h1>
<!-- <h1>{{index}}</h1> -->
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
// 定义属性
data:{
name:"小果儿",
test:"",
html:"<h1>果儿小宝贝</h1>",
bool:true,
url:"http://www.baidu.com",
userList:[
{uname:"果儿"},
{uname:"洁儿"},
{uname:"彬彬"}
],
num:0
},
// 定义属性方法,主要逻辑部分
methods:{
show(bool){
this.bool=bool;
},
totext(){
alert("简写");
},
text(str,e){
console.log(str);
console.log(e);
},
test1(){
alert("test1");
},
test2(){
alert("test2");
},
showName(index){
this.num = index;
}
}
});
</script>
</body>
</html>
