首页 > 其他分享 >【Vue2学习笔记】基础（持续更新）

【Vue2学习笔记】基础（持续更新）

时间：2024-08-16 19:57:41浏览次数：15  
标签：Vue 绑定 vm 更新 vue 笔记 Vue2 data 属性

一、vue介绍

什么是vue？

Vue 是一套用于构建用户界面的渐进式框架。
Vue被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层。

vue特点

1.采用组件式开发，提高代码复用率，且让代码更高维护
2.声明式编码，让编码人员无需dom操作，提高开发效率
3.使用虚拟机dom和优秀的diff算法，尽量复用节点

第一个vue

编写步骤

1.从官网引入vue.js文件
网站链接：https://v2.cn.vuejs.org/v2/guide/installation.html
2.定义一个div
3.创建一个new Vue()实例化Vue应用程序
（1）el选项:元素element缩写，指定被 Vue 管理的Dom 节点入口(值为选择器),必须是一个普通的HTML标签节点,
（2）data选项:指定初始化数据,在Vue 所管理的 Dom 节点下,可通过模板语法来进行使用
4. 标签体显示数据:{{xxxxx}}
5. 表单元素双向数据绑定:v-model
6. 注意:el的值不能为 html 或 body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- {{}} 用于标签体内显示数据 -->
        <p>{{msg}}</p>
        <p>{{Date.now()}}</p>
        <!-- v-model 进行数据的双向绑定 -->
        <input type="text" v-model="msg">
    </div>
    <script>
        // 创建一个vue实例
        new Vue({
            el: '#root',//指定被vue管理的入口，值为选择器 不可以是body或者html
            data: {//用于初始化数据 在vue实例管理的dom节点下 可以通过模板请求来引用
                msg: 'hello world',
                p:555
            }
        })
    </script>
</body>
</html>
使用vue注意事项

1.使用vue时，必须创建一个vue实例，并且要传入配置对象
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
3.root容器里的代码被称为 vue模板
4.vue容器和实例是一一对应的，且容器里会自动读取到data中的所有属性
5.真实开发中只有一个vue实例
6.{{xxx}}中的xxx要写js表达式
7.一旦data中的数据发生改变，那么模板中用到该数据的地方会自动更新

MVVM模型

什么是MVVM模型？

MVVM是 Model-View-ViewModel 的缩写,它是一种软件架构风格
Model:模型,数据对象(data当中的数据)
View:视图,代码模板页面(用于渲染数据)
ViewModel:视图模型,其实本质上就是 Vue 实例

实际操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        {{name}}
        {{$createElement}}
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'xihua',
                sex: 'nan'
            }
        })
        console.log(vm);
    </script>
</body>
</html>

结果图：
在这里插入图片描述

1.data中所有的属性 最后都出现在vm身上
2.vm身上所有的属性 vue原型上的所有属性 在vue模板里都可以直接使用

模版语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

1.插值语法

 功能：用于拆解标签体的内容
 写法：{{xxx}}，xxx是js表达式，而且可以直接读取到data中所有的属性

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>1.插值语法</h1>
        <h3>{{name}}，真好看</h3>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '小花',
            }
        })
    </script>
</body>
</html>

效果图：
在这里插入图片描述

2.指令语法

v-once： 通过once指令 ，能执行一次性的插值，当数据发生改变时 插值处的内容不会更新

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>2.指令语法</h1>
        <span v-once>{{message}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                message: '一切正常',
            }
        })
    </script>
</body>
</html>

效果图：
请添加图片描述

3.HTML指令

作用：如果时html格式数据 双大括号会将数据解释为普通文本 为了输出真正的html 需要用v-html指令。
Vue为了防止XSS攻击，再此指令上做了安全处理，当发现输出内容有script标签时，则不渲染

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
    <h3>3.html指令</h3>
        <!-- 如果时html格式数据 双大括号会将数据解释为普通文本 为了输出真正的html 需要用v-html -->
        <p>双大括号：{{contentHtml}}</p>
        <p>v-html指令：<span v-html="contentHtml"></span></p>
        <div v-html="contentS"></div>
    </div>
        <script>
            new Vue({
            el: "#root",
            data: {
                contentHtml:'<span style="color: red;">我是红色的字</span>',
                contentS:'<script>alert("123")<\/script>',//v-html指令防xss攻击 不识别script
            }
            })
        </script>
</body>
</html>

效果图：
在这里插入图片描述

双大括号语法：格式{{ }} 作用：使用与标签体中，用于获取数据，可以使用JavaScript表达式

4.v-bind元素绑定指令

完整格式：v-bind:元素的属性名=‘xxxx’
缩写格式：元素的属性名=‘xxxx’
作用：将数据动态绑定到指定的元素上

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>4.v-bind元素绑定指令</h3>
        <!-- 将动态元素绑定到指定元素的属性上 -->
         <!-- <img v-bind:src="imgUrl" alt="">缩写 -->
        <img :src="imgUrl" alt="">
    </div>
        <script>
            new Vue({
            el: "#root",
            data: {
                imgUrl: 'https://v2.cn.vuejs.org/images/logo.svg',
            }
            })
        </script>
</body>
</html>

效果图：
在这里插入图片描述

5.v-on事件绑定指令

  1. 完整格式：v-on:事件名称=“事件处理函数名”
    缩写格式：@事件名称=“事件处理函数名”，注意@后没有冒号
    2.事件的回调需要配置在methods中，最终会出现在vm上
    3.methods中配置函数，不要使用箭头函数，否则this的指向就不是vm了
    4.@click=“dome” 和 @click="dome($event)"的效果一致 但是后者可以传参
    作用：监听DOM事件

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
       <h3>{{num}}</h3>
       <button v-on:click="add">点击+1</button>
       <button @click="sub">点击-1</button>
    </div>
        <script>
           const vm = new Vue({
            el: '#root',
            data: {
                num: 100
            },
            methods: {
                add(even) {
                    console.log(even);
                    // console.log(this);//指向vm/vue实例对象
                    this.num++
                },
                sub(num, event) {
                    console.log(num);
                    console.log(event);
                    this.num--
                }
            }
        })
        </script>
</body>
</html>

效果图:
在这里插入图片描述

6. 计算属性

computed选项定义计算属性
计算属性：类似于methods选项中定义的函数 计算属性
会进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。
函数 ：每次都会执行函数体进行计算。

案例源码：（单双项绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        数学：<input type="text" v-model="mathematics">
        语文：<input type="text" v-model="language">
        <br><br>
        总得分:(函数)<input type="text" v-model="sumScore()">
        <br><br>
        总得分:(计算属性-单项绑定)<input type="text" v-model="sumScore1">
        <br><br>
        总得分:(计算属性-双项绑定)<input type="text" v-model="sumScore2">
      
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                mathematics: 120,
                language: 148,   
            },
            methods: {
                sumScore: function () {
                    console.log('函数调用了');
                    //`this`指向当前 vm 实例,减 0 是为了字符串转为数字运算
                    return (this.mathematics - 0) + (this.language - 0)
                }
            },
            // 这里写计算属性
            computed: {
                sumScore1() {
                //计算属性 默认 getter 只支持单向绑定
                    console.log('监听属性调用了');
                    return (this.mathematics - 0) + (this.language - 0)
                },
                sumScore2: {
                //指定 getter/setter 双向绑定
                    get: function () {
                        return (this.mathematics - 0) + (this.language - 0)
                    },
                    set: function (newValue) {//有了set可以进行双向数据绑定
                        var avgScore = newValue / 2//取平均值
                        this.mathematics = avgScore
                        this.language = avgScore
                    }
                }
            }
            })
    </script>
</body>
</html>

方法和计算属性的区别
1.方法需要加小括号
2.方法总会执行两次
3.方法没有缓存，每次都会被调用
4.计算属性有缓存 只有当计算数学体内的属性值被更改以后才会调用，如果没有发生变化 则取它上一次计算的结果
5.函数只支持单向的
6.计算数学默认只有get函数，而没有set函数，所以只支持单向数据绑定 如果需要双向，则需要手动设

标签：Vue,绑定,vm,更新,vue,笔记,Vue2,data,属性
From： https://blog.csdn.net/m0_63634307/article/details/141139054

相关文章

  • 算法笔记——可持久化线段树
    维护历史值当要修改一个节点时，把跟他有关的线段树中所有节点舍弃，并建立新节点连接.代码如下：#include<bits/stdc++.h>usingnamespacestd;constintN=1e6+5;intn,m,a[N],root[N],top;structnode{ intl,r,val;}t[N*40];intclone(intx)//新建节点{ top++; t......
  • 统计学（贾俊平）学习笔记--第二章
    本章主要讲解了数据来源、调查方法、试验方法，以及数据抽样误差、非抽样误差，误差产生的原因等内容。该章内容较简单，不在仔细分析。这些也是数据来源的方法，大家可以了解。抽样误差（samplingerror）是由抽样的随机性引起的样本结果与总体真值之间的差异。影响抽样误差大小的因素......
  • 记net 7.0 使用Windows 批处理 和exe 程序的快速打包 更新
     如图，项目路径，我们使用publis.bat批处理进行项目打包，将编译的项目文件压缩成zip包放到publish文件夹@echooffsetcur_path=%~dp0 setfe_build_path=%cur_path%build\setbe_pub_path=%cur_path%publish\setcompress_tool=%cur_path%tools\7za.exeecho*当前地......
  • 简单的linux系统学习笔记——01
    一、准备环境1.创建虚拟主机软件：vmware（是一个管理虚拟机的平台）vmware官网流程：1.点击创建新的虚拟机2.选择自定义3.兼容选最大4.选稍后安装操作系统5.选择想创建的系统6.命名，选择位置（保存位置）7.选择cpu和内存配置8.选nat模式9.选推荐10.创建新的虚拟磁盘11设置磁......
  • 简单的linux系统学习笔记——07
    一、虚拟机克隆本体删了，克隆机也会消失1.先关闭虚拟机2.右键虚拟机点管理，点击克隆3.克隆源选择“虚拟机中的当前状态”4.克隆类型选择“创建链接克隆”5.编辑虚拟机名字，设置存放路径6.点击完成7.修改主机名8.更改ip，修改网卡9.重启，保存快照二、文件文件属性：1）权限2......
  • Leetcode刷题笔记8.12-8.16
    Leetcode刷题笔记8.12-8.1619.删除倒数第n个链表结点(8.12)一个巧妙删除倒数第n个结点的trick该方法避免了对链表的一次全面扫描来获得总长度//返回链表的倒数第k个节点ListNodefindFromEnd(ListNodehead,intk){ListNodep1=head;//p1先走k步......
  • 我是如何使用 vue2+element-ui 处理负责表单，避免单文件过大的问题
    引言在工作中我经常需要处理一些复杂、动态表单，但是随着需求不断迭代，我们也许会发现曾经两三百行的.vue文件现在不知不觉到了两千行，三千行，甚至更多...这对于一个需要长期维护的项目，无疑是增加了很多难度。因此，为了减小文件大小，优化表单组织的结构，我在日常的开发中实践出一种基......
  • [笔记]关于在linux中通过yum安装mysql错误--因为Centos 7官方镜像不可用的解决方法
     因为Centos7在2024年6月30号停止维护   在执行命令时找不到镜像源， 在下载时出现的错误为，还有一种错误由于没有截图，但是问题一样先通过yumremovemariadb*-y去删除自带的sql包通过命令编辑这个文本文件 vim/etc/yum.repos.d/CentOS-Base.repo这里举......
  • 方法精讲-言语1笔记
    前：1、听思路、听方法，举一反三是目的。2、挖坑在哪是重点。3、跟上笔记言语理解与表达考情：联考-省一、三大类：1、片段阅读2、语句表达3、逻辑填空二、1、题量40~25不等2、考场上速度，标准题量-5分钟如：40-5=35分3、开始学不要求速度4、文科80%以上的准确率合格5、理......
  • win10的自动更新在哪，你知道win10的自动更新在哪吗
    在Windows10系统中，自动更新的设置位置相对直观，用户可以按照以下步骤找到并配置自动更新设置：一、通过设置界面找到自动更新1.打开设置：点击屏幕左下角的“开始”按钮，然后选择“设置”（齿轮形状的图标）或者直接按下Win+I快捷键打开设置应用。2.进入更新和安全：在设置窗口中，找到并......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99