前端Vue的基础操作(二)
1. 事件监听绑定
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!--
v-on:事件名 = “方法名”
简写： @事件名 = “方法名”
事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名
-->
<body>
<div id="app">
{{count}}
<button v-on:click="count+=1">点我加1</button>
<button @click="sub">点我减1</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {count: 1},
methods: {
sub: function () {
this.count -= 1;
}
}
});
</script>
</body>
</html>
2. 数据双向绑定
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!--
双向数据绑定:
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，
当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
表单中使用双向数据绑定:
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，
但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
你应该通过 JavaScript 在组件的 data 选项中声明初始值!
-->
<body>
<div id="app">
<!-- 示例1 -->
<input type="text" v-model="message"/>{{message}}
<!-- 示例2 -->
<br>
<input type="radio" name="sex" value="男" v-model="gender"/>男
<input type="radio" name="sex" value="女" v-model="gender"/>女
<p>{{gender}}</p>
<!-- 示例3 -->
<br>
<select v-model="selected">
<option value="">--请选择--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<p>{{selected}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: '',
gender: '',
selected: ''
}
});
</script>
</body>
</html>
3. Vue组件
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!--
组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。
Vue.component()：注册组件
beixi：自定义组件的名字
template：组件的模板
-->
<body>
<div id="app">
<Jerome></Jerome>
</div>
<script>
//注册组件
Vue.component("Jerome", {
template: '<div>Jerome</div>'
});
var app = new Vue({
el: "#app",
});
</script>
</body>
</html>
4. props动态传递参数
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!--
-->
<body>
<div id="app">
<!--组件：使用props把值传递给组件-->
<blog-post v-for="item in items" v-bind:value="item"></blog-post>
</div>
<script>
Vue.component("blog-post", {
props: ['value'],
template: '<li>{{value}}</li>'
});
var app = new Vue({
el: "#app",
data: {
items: ['Jerome', 'qizai', 'papyboy']
}
});
</script>
</body>
</html>
