Vue入门01

最新推荐文章于 2023-05-17 19:46:30 发布

钢铁直女.

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量88

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_44836362/article/details/112680058

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

Vue基础知识01

ES6：
定义变量let
定义常量const

编程范式：
声明式编程，如使用Vue管理一个div显示文本内容；
命令式编程，如使用Js创建div设置相关属性显示div中的文本内容。

创建Vue对象的时候，传入了一些参数（options，一般是对象）：{}
- {}中包含了el属性：决定了这个Vue对象挂载到哪一个元素上(管理哪个元素)。
- {}中包含了data属性：通常会存储一些数据
  这些数据可以是我们直接定义出来的，也可能是来自网络，从服务器加载的。
- {}中包含了methods属性：用于在Vue对象中定义方法。@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)
实现响应式：数据更改，则界面显示内容自动随之更改。
列表展示：v-for=“itme in list”（响应插入要用push！！)
响应事件：v-on:xxx，如点击事件v-on:click=“event”

Vue列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_列表</title>
</head>
<body>
    <div id="list">
        <ul>
            <li v-for="item in songs">{{item}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const list = new Vue({
            el: '#list',
            data: {
                message: '歌曲列表：',
                songs: ['庐州月','雅俗共赏','最佳歌手','燕归巢']
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

Vue响应式

在这里插入图片描述

Vue案例1_计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_计时器案例</title>
</head>
<body>
    <div id="counter">
        <h2>当前计数：{{number}}</h2>
        <button v-on:click = "add"> + </button>
        <button @click = "sub"> - </button><!--指令糖-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let counter = new Vue({
            el: '#counter',
            data: {
                number : 0
            },
            methods: {
                add: function (){
                    this.number++;
                    console.log("执行一个add");
                },
                sub: function () {
                    this.number--;
                    console.log("执行一个sub");
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

Vue的MVVM

MVVM（Model View ViewModel）：一种软件架构模式。
在这里插入图片描述
MVVM模式的组成部分

模型，是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。
视图，就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。
视图模型，是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。
绑定器，声明性数据和命令绑定隐含在MVVM模式中。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。

MVVM旨在利用WPF（用户界面框架，它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。）中的数据绑定函数，通过从视图层中几乎删除所有GUI代码（代码隐藏），更好地促进视图层开发与模式其余部分的分离。不需要用户体验（UX）开发人员编写GUI代码，他们可以使用框架标记语言（如XAML），并创建到应用程序开发人员编写和维护的视图模型的数据绑定。角色的分离使得交互设计师可以专注于用户体验需求，而不是对业务逻辑进行编程。这样，应用程序的层次可以在多个工作流中进行开发以提高生产力。即使一个开发人员在整个代码库上工作，视图与模型的适当分离也会更加高效，因为基于最终用户反馈，用户界面通常在开发周期中经常发生变化，而且处于开发周期后期。

MVVM模式试图获得MVC提供的功能性开发分离的两个优点，同时利用数据绑定的优势和通过绑定数据的框架尽可能接近纯应用程序模型。它使用绑定器、视图模型和任何业务层的数据检查功能来验证传入的数据。结果是模型和框架驱动尽可能多的操作，消除或最小化直接操纵视图的应用程序逻辑（如代码隐藏）。

MVVM模式不同于MVC，在MVVM模式中，将ViewModel层绑定到View层后，它基本不使用点击事件，而是使用命令(Command)来控制。数据的显示也是不同于MVC，而是使用Binding来绑定相关数据。

MVVM通常会使用属性更改通知，即数据驱动而不是事件驱动。在WPF中当数据发生改变时，会通过接口通知到对应的组件绑定的数据，实现同步数据刷新。

MVVM模式处理的工作：

ViewModel通过Data Binding让Model中的数据实时的在View中显示。
其次ViewModel通过DOM Listener来监听View中的事件，并且通过methods中的操作，来改变Model中的数据。

在这里插入图片描述

Vue的生命周期（又称钩子函数）

3个阶段：初始化（包含创建和渲染）、更新、销毁（死亡）

8个周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

用的比较多的是created（一般组件创建完成之后在created中进行网络请求，将请求的数据保存在data中，之后再将data中的数据渲染在dom上）和mounted。

一般销毁的是组件不是vue对象。
在这里插入图片描述

vue生命周期函数测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>4Vue生命周期</title>
</head>
<body>
  <div id="info">{{message}}</div>
  <script src="../js/vue.js"></script>
  <script>
    const info = new Vue({
      el: '#info',
      data: {
        message: "Hello Vue"
      },
      methods: {

      },
      beforeCreate:function () {
        console.log("beforeCreate");
      },
      created:function (){
        console.log("created");
      },
      beforeMount:function () {
        console.log("beforeMount");
      },
      mounted:function (){
        console.log("mounted");
      },
      beforeUpdate:function () {
        console.log("beforeUpdate");
      },
      updated:function () {
        console.log("updated");
      },
      beforeDestroy:function () {
        console.log("beforeDestroy");
      },
      destroyed:function () {
        console.log("destroyed");
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

钢铁直女.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue入门01

Vue列表展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue_列表</title></head><body> <div id="list"> <ul> <li v-for="item in songs">{{i
复制链接

扫一扫

专栏目录