Vue.js学习笔记

最新推荐文章于 2023-03-09 22:44:31 发布

技术的搬运工

最新推荐文章于 2023-03-09 22:44:31 发布

阅读量152

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/IT_Boy_/article/details/102972979

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在开始学习Vue.js的时候，为了加深记忆，也为了日后在翻阅的时候可以快速找到自己想要的东西，特此在这里记录下我认为需要记录的知识点。在这里也分享给大家，希望可以给需要的你们提供一些帮助。具体内容还请看 Vue.js官网

双向数据绑定指令：v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" placeholder="你的名字" v-model="name">
    <h1>你好，{{ name }}</h1>
</div>

<script>
    var vm = new Vue({ // 实例里面写入各种的 选项
        el: '#app',  // 或者 el: document.getElementById('app')
        data: {
            name: '',
        }
    })
</script>
</body>
</html>

v-model 的修饰符：

.lazy：在失焦或按回车时才更新
.number：将输入转换为 Nubmer 类型
.trim：自动过滤输入的首尾空格

示例：

<!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">
    <h3>.lazy</h3>
    <input type="text" v-model.lazy="message1">
    <p>message1类型：{{ typeof message1 }}</p>
    <p>{{ message1 }}</p>

    <br>
    <h3>.number</h3>
    <input type="number" v-model.number="message2">
    <p>message2类型：{{ typeof message2 }}</p>
    <p>{{ message2 }}</p>

    <br>
    <h3>.trim</h3>
    <input type="text" v-model.trim="message3">
    <p>message3类型：{{ typeof message3 }}</p>
    <p>{{ message3 }}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message1: '',
            message2: 123,
            message3: '',
        },
    });
</script>

</body>
</html>

其中使用 .lazy 修饰时，在输入完成后需要失去焦点或点击回车才会显示出来。

常用的生命周期钩子：

created：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介绍。
mounted： el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestroy：实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

var app = new Vue({
    el: '#app',
    data: {
        a: 2,
    },
    created: function() {
        console.log(this.a);  // 2  // 这里的 this 指向的是调用它的 Vue 实例
    },
    mounted: function() { // Vue 提供了很多常用的实例属性和方法，都以 $ 开头
        console.log(this.$el);  // <div id="app"></div>
    }

})

7个数组变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

6个事件修饰符：.stop、.prevent、.capture、.self、.once、.passive

技术的搬运工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记

在开始学习Vue.js的时候，为了加深记忆，也为了日后在翻阅的时候可以快速找到自己想要的东西，特此在这里记录下我认为需要记录的知识点。在这里也分享给大家，希望可以给需要的你们提供一些帮助。具体内容还请看Vue.js官网双向数据绑定指令：v-model<!DOCTYPE html><html lang="en"><head> <m...
复制链接

扫一扫

专栏目录