携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天,点击查看活动详情 >> 1.vue的判断循环
v-if: 用来控制页面元素是否展示底层控制是DOM元素 操作DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
ok: true
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
items:[
{message:"java"},
{message:"java1"},
{message:"java2"},
{message:"java3"}
]
}
});
</script>
</body>
</html>
2.绑定事件
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">点我</button>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
message:"haipeng"
},
methods:{//方法必须在vue的methods中
sayHi:function (event){
alert(this.message);
}
}
});
</script>
</body>
</html>
<body>
</body>
</html>
总结:
事件 事件源:发生事件dom元素 事件: 发生特定的动作 click.... 监听器 发生特定动作之后的事件处理程序 通常是js中函数
1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名
3.在vue中事件的函数统一定义在Vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据
简化写法为日后在vue中绑定事件时可以通过@符号形式 简化 v-on 的事件绑定
v-show:用来控制页面中某个标签元素是否展示 底层使用控制是 display 属性
v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性
3.vue的七个属性
- el属性
-
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
- data属性
-
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
- template属性
-
- 用来设置模板，会替换页面元素，包括占位符。
- methods属性
-
- 放置页面中的业务逻辑，js方法一般都放置在methods中
- render属性
-
- 创建真正的Virtual Dom
- computed属性
-
- 用来计算
- watch属性
-
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，
4.双向数据绑定
v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
输入文本：<input type="text" v-model="message">{{message}}
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
message:""
},
methods:{
}
});
</script>
</body>
</html>
<body>
</body>
</html>
总结
1.使用v-model指令可以实现数据的双向绑定
2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 v5.vue组件（数组遍历）
