VUE基础学习笔记

最新推荐文章于 2023-12-14 09:47:49 发布

VIP文章抹泪的知更鸟

最新推荐文章于 2023-12-14 09:47:49 发布

阅读量237

点赞数

分类专栏： jQuery+BootStrap+VUE 文章标签：前端框架 vue.js

本文链接：https://blog.csdn.net/qq_51596354/article/details/123674360

版权

VUE基础学习笔记

1.基本使用 (学习QQ群：330737900)

本篇的主要内容有：

vue 的安装
生命周期钩子
模板语法
常用指令
数据侦听器
Class、Style 绑定
条件渲染
列表渲染
表单输入绑定
组件

vue 的安装

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方文档：链接地址

最简单的安装方式是创建一个 .html 文件，然后通过如下方式引入 Vue：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

当然也可以使用 Node.js 的构建工具安装 vue-cli。这种方式主要针对专业前端开发，这里便不再赘述。

为了使 idea 有更好的代码提示效果，建议安装 vue.js 插件。
在这里插入图片描述

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，以操作数据的方式操作 DOM 节点，Vue 不建议使用者直接操作节点内容，目前大部分开发平台都倡导以修改数据的方式操作节点，操作节点被认为是一种落后的技术。

<div id="app">
  {
   {
    message }}
</div>

渲染代码：

var app = new Vue({
   
  el: '#app',
  data: {
   
    message: 'Hello Vue!'
  }
})

如此便成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

通过浏览器控制台输入 app.message=“测试” 可以修改vue的数据，会发现一旦数据变化了，vue 管理的页面也发生变化。

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app-5">
  <p>{
   {
    message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

渲染代码：

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

注意在 reverseMessage 方法中，更新了应用的状态，但没有触碰 DOM。所有的 DOM 操作都由 Vue 来处理，编写的代码只需要关注逻辑层面即可。

练习：

1.在页面中编写一个点击次数统计的功能，点击一次值增加一。

参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" style="text-align: center">
    <h1>{
   {
   count}}</h1>
    <input type="button" value="增加" v-on:click="add()">
</div>
<script>
    new Vue({
   
        el: "#app",
        data: {
   
            count: 0
        },
        methods: {
   
            add() {
   
                this.count++;
            }
        }
    })
</script>
</body>
</html>

生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如：需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
   
  data: {
   
    a: 1
  },
  created: function () {
   
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

下图展示了实例的生命周期。销毁的事件需要在 vue 脚手架中才能使用。
在这里插入图片描述
这是官方文档给出的一个组件从被创建出来到最后被销毁所要经历的一系列过程，所以这个过程也叫做一个组件的生命周期图。从图中我们可以看到，一个组件从被创建到最后被销毁，总共要经历以下8个过程：

beforeCreate:组件创建之前
created：组件创建完毕
beforeMount：组件挂载之前
mounted：组件挂载完毕
beforeUpdate：组件更新之前
updated：组件更新完毕
beforeDestroy：组件销毁之前
destroyed：组件销毁完毕

案例：

let app = new Vue({
   
    el: "#app",
    data: {
   
        message: "大家好，我是vue"
    },
    beforeCreate() {
   
        console.info("beforeCreate:组件创建之前")
    },
    created() {
   
        console.info("created：组件创建完毕")
    },
    beforeMount() {
   
        console.info("beforeMount：组件挂载之前")
    },
    mounted() {
   
        console.info("mounted：组件挂载完毕")
    },
    beforeUpdate() {
   
        console.info("beforeUpdate：组件更新之前")
    },
    updated() {
   
        console.info(" updated：组件更新完毕")
    },
    beforeDestroy() {
   
        console.info("beforeDestroy：组件销毁之前")
    },
    destroyed() {
   
        console.info("destroyed：组件销毁完毕")
    },
    methods: {
   
        setMessage() {
   
            this.message = this.message.split('').reverse().join('')
        }
    }
})

练习：

1.在上一个练习中使用 created 生命周期函数完成数据从缓存中读取。

参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" style="text-align: center">
    <h1>{
  {count}}</h1>
    <input type="button" value="增加" v-on:click="add()">
</div>
<script>
    new Vue({
     
        el: "#app",
        data: {
     
            count: 0
        },
        methods: {
     
            add() {
     
                this.count++;
                sessionStorage.count = this.count;
            }
        },
        created() {
     
            if (sessionStorage.count) {
     
                this.count = sessionStorage.count
            }
        }
    })
</script>
</body>
</html>

模板语法

1.插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {
   {
    msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {
   {
    msg }}</span>

2.原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<p>Using mustaches: {
   {
    rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。

3.Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 button 元素中。

4.使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{
   {
    number + 1 }}

{
   {
    ok ? 'YES' : 'NO' }}

{
   {
    message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

练习：

1.制作一个点击一次在页面增加一张照片的按钮。每次点击都将插入一张相同的照片到页面。

参考代码：

<div id="app" style="text-align: center">
    <p v-html="content"></p>
    <input type="button" value="增加" v-on:click="add()">
</div>
<script>
    new Vue({
     
        el: "#app",
        data: {
     
            content: ""
        },
        methods: {
     
            add() {
     
                this.content += "<img src=http://58.42.239.163:8888/static/img/noteBook/PAZrEvLF.jpg width='100'>";
            }
        }
    })
</script>

常用指令

指令（Directives）是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式（v-for 是例外情况，稍后我们再讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾前面看到的例子：

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE基础学习笔记

VUE基础学习笔记vue 的安装生命周期钩子模板语法常用指令数据侦听器Class、Style 绑定组件插槽1.基本使用 (学习QQ群：330737900)本篇的主要内容有：vue 的安装生命周期钩子模板语法常用指令数据侦听器Class、Style 绑定条件渲染列表渲染表单输入绑定组件vue 的安装Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅
复制链接

扫一扫