<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>studyVue</title>
</head>
<body>
<div id="app" @click.stop="hello">
<input type="text" v-model="num"/>
<button v-on:click="num++">点赞</button>
<button v-on:click="cancel">取消点赞</button>
<h1>{{name}},当前有{{num}}人点赞</h1>
<span v-html="msg"></span>
<span v-text="msg"></span>
<a v-bind:href="link" @click.prevent.stop="hello">百度</a>
<hr>
<p>v-model双向绑定</p>
<input type="checkbox" v-model="language" value="java" />java<br>
<input type="checkbox" v-model="language" value="PHP"/>PHP<br>
<input type="checkbox" v-model="language" value="python"/>python<br>
选中了{{language.join(",")}}
</div>
<div id="app2">
<li v-for="(user,index) in users" :key=user.name>
<!--遍历时加上:key来区分不同的数据,提高vue渲染的效率-->>
{{index}}:{{user.name}}==>{{user.age}}
<span v-for="(v,k,i) in user">
{{k}}=={{v}}=={{i}}
</span>
</li>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、vue声明式渲染
let vm=new Vue(
{
el:"#app",
data:{
name:'zhangshuai',
num:10,
msg:"<h1>Hello Vue</h1>",
link:"http://www.baidu.com",
language:[]
},
methods:{
cancel(){
this.num--;
},
hello(){
alert("点击了")
}
}
}
);
//2、双向绑定
//3、事件处理
//v-xx:指令
//1、创建vue实例,关联页面的模板,将自己的数据渲染到关联的模板,响应式的
//2、指令来简化对dom的一些操作
//3、声明方法来做更复杂的操作
//插值表达式 有闪烁的问题
//v-bind用于绑定数据和元素属性 v-bind:属性名 简写 :属性名 单项绑定
//v-model双向绑定,常用于表单项
//v-on 事件修饰符 按键修饰符
/*
遍历数组:
v-for="item in items
(item, index) in items
遍历对象:
value in object
(value, name) in object
(value, name, index) in object
*/
let vue1=new Vue({
el:"#app2",
data:{
users:[
{name:"name1",age:"21"},
{name:"name2",age:"22"},
{name:"name3",age:"23"},
{name:"name4",age:"24"}
]
}
});
//v-if和v-show的区别
/*
共同点:v-if 和 v-show 都能实现元素的显示隐藏
区别:
1. v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁);
2. v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多;
3. v-if 有更高的切换开销,v-show 切换开销小;
4. v-if 有配套的 v-else-if 和 v-else,而 v-show 没有
5. v-if 可以搭配 template 使用,而 v-show 不行*/
/*
v-bind 缩写
完整语法
<a v-bind:href="url">...</a>
缩写
<a :href="url">...</a>
------------------------------------------------
v-on 缩写
完整语法
<a v-on:click="doSomething">...</a>
缩写
<a @click="doSomething">...</a>
*/
</script>
</body>
</html>