<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="root">{{ msg}}{{ number }}</div>
<div id="div">
<!-- v-text= 是一个vue里的一个指令 他告诉vue 要把number这个值渲染到页面上-->
<!-- v-html 指令 也可以做到 html 渲染的时候可以跟标签元素 -->
<h1 v-text="number"></h1>
</div>
<!--怎么给一个标签上绑定一个事件-->
<div id="div1">
<!--事件指令写法 v-on: 绑定事件 v-on:click='aa' v-on这个简写 @ -->
<h1 @click="handle">{{content}}</h1>
</div>
<!--属性绑定-->
<!--指令 v-bind:进行属性绑定 v-bind:title='' v-bind:简写 : -->
<div id="div2" v-bind:title="title">
<div>hello word</div>
<!--双向绑定-->
<!-- v-model 指令 双向绑定 当绑定了此事件 然后 一个发生改变 另一个也会发生改变-->
<input type="text" v-model:value="info">
<div>{{ info }}</div>
</div>
<!--Vue中的计算属性和监听器-->
<div id="div3">
姓：<input type="text" v-model="firstName">
名：<input type="text" v-model="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<!--v-if,v-show,v-for指令-->
<div id="div4">
<!--v-if -->
<!--v-show -->
<!--这两个指令相同与不相同之处-->
<!--相同之处为 都是进行标签的隐藏与显示-->
<!--不相同之处为 v-if 消失和显示标签为 删除标签和追加标签-->
<!--而v-show 是给这个标签加了一个属性 display:none 或者 display:block -->
<!--一般用 v-show-->
<div v-if="show">hello word</div>
<button @click="one">保存</button>
<!--v-for 循环命令 key属性提高效率 然后不能重复-->
<ul>
<li v-for="(i,key) of list" :key="key">{{ i }}</li>
</ul>
</div>
</body>
</html>
<script>
//创建VUE 实例
new Vue({
//el 控制元素
el:"#root",
// 数据 处理 进行渲染 插值表达式 {{ number }}
data:{
msg:'hello word',
number:'123'
}
});
//除了上面的渲染写法 还有别的写法
new Vue({
el:"#div",
data:{
number:'456'
}
});
//进行事件绑定
new Vue({
el:'#div1',
data:{
content:'hello'
},
//vue定义函数
methods:{
handle:function(){
//改变数据
this.content = 'word';
}
}
});
//属性绑定 双向绑定
new Vue({
el:"#div2",
data:{
title:'this is hello word',
info:'双向绑定'
}
});
//Vue中的计算属性和监听器
new Vue({
el:'#div3',
data:{
firstName:'',
lastName:'',
count:0
},
//计算属性 如果想让两个值合并 或者相加相加 然后得到一个新值 就可以用 computed这个来代替 定义一个变量 进行函数处理
computed:{
fullName:function(){
return this.firstName + ' ' +this.lastName
}
},
//监听器 监听一个数据发生变化 而要做的事情
watch:{
fullName:function(){
this.count++;
}
}
});
//v-if,v-show,v-for指令
new Vue({
el:'#div4',
data:{
show:true,
list:[1,2,3]
},
methods:{
one:function(){
if(this.show==true){
this.show=false
}else{
this.show=true
}
}
}
})
</script>
