Vue基础

发布于 2022-08-01  75 次阅读


先引入这个<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>