<!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>
</head>
<body>
<!-- app区域 -->
<div id="app">
<!-- 关于内容 -->
<p>{{msg}}</p>
<p v-html="msg"></p>
<p v-text="msg"></p>
<!-- 绑定属性v-bind -->
<p v-bind:title="title">java2</p>
<p :title="title">java2</p>
<!-- 绑定事件 + 事件修饰符 prevent取消默认事件 stop防止冒泡-->
<p><a href="https://www.baidu.com" @click.prevent="show">弹出信息</a></p>
<!-- v-model 双向绑定 -->
<p>
<input type="text" v-model="num">
<input type="button" value="add" @click="num++">
</p>
<p>java2班 {{num}} 人</p>
<!-- v-for循环 -->
<ul>
<li v-for="(item, index) in arr" :key="index">{{item}}--{{index}}</li>
</ul>
<ul>
<li v-for="(item, index) in 10" :key="index">{{item}}</li>
</ul>
<ul>
<li v-for="(item, index) in userinfo" :key="index">{{item}}--{{index}}</li>
</ul>
<ul>
<li v-for="(item, index) in userlist" :key="index">{{item.id}}--{{item.name}}--{{item.age}}--{{item.birthday}}--{{index}}</li>
</ul>
<!-- v-if和v-show -->
<p v-if="flag">v-if的内容</p>
<p v-show="flag">v-show的内容</p>
</div>
<!-- 1.先导入vue文件 -->
<script src="./js/vue.js"></script>
<script>
// 2.创建Vue实例 -- MVVM VM
const vm = new Vue({
el : "#app", // 挂载元素，当前vue实例控制的区域
data : {
msg : '',
title : '绑定信息',
num : 10,
arr : ['a','b','c','d'],
userinfo : {
id : '1001',
name : 'zs',
age : 22,
birthday : '2019-1-1'
},
userlist :[
{id : '1001',name : 'zs',age : 221,birthday : '2019-1-11'},
{id : '1002',name : 'ls',age : 222,birthday : '2019-1-12'},
{id : '1003',name : 'ww',age : 223,birthday : '2019-1-13'},
{id : '1004',name : 'zl',age : 224,birthday : '2019-1-14'},
],
flag :false
},
methods: {
show(){
// alert(this.title);
alert(this.test());
},
test(){
return '返回值信息';
}
},
created() { // 当创建完Vue实例之前
// console.log(object);
this.msg = '123'
},
mounted() {//Dom挂载完毕之后，类似document.onload
// 发送请求
},
})
</script>
</body>
</html>
网友评论