先引入这个<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
以下是使用的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- Mustache语法糖,插值 -->
{{ message }}
<p>{{ name }}</p>
<p>{{ age }}</p>
</div>
</body>
</html>
<script>
// 实例对象 --- VM:视图模型
let vm = new Vue({
el: "#app",// element元素的意思,与页面关联
data: {
message: 'Hello World',
name: 'Cherry',
age: 16
}// M:数据模型,专门保存页面的数据
})
</script>
插值
el: 绑定id的
data: 用户数据
computed: 计算属性
methods 方法
watch 监听属性
相关的指令
v-if
v-if指令:当满足条件的时候,会在DOM里面直接渲染元素,反之,不满足移除该元素
v-else
v-else-if指令:搭配v-if指令去使用,可以无限写下去,这些条件判断只会有一个生效,就像js里面一样
v-show
v-show指令:是通过css属性display:none/block去控制元素的显示和隐藏的
v-model
v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
v-bind
v-bind
指令将待办项传到循环输出的每个组件中:简写 “ : ”
v-for
v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
v-on
-
用法:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个
$event
property:v-on:click="handle('ok', $event)"
。从
2.4.0
开始,v-on
同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。 -
缩写:
@
-
示例:
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) --> <button @[event]="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>