学习vue起步

最新推荐文章于 2022-04-29 21:57:16 发布

JH江涵

最新推荐文章于 2022-04-29 21:57:16 发布

阅读量433

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_47155400/article/details/123256971

版权

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

JH江涵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue起步

先引入这个<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">
复制链接

扫一扫