Vue2学习笔记

WDEP

已于 2024-03-05 17:18:52 修改

阅读量41

点赞数

分类专栏：前端开发文章标签： vue.js 学习笔记

于 2023-11-11 00:34:13 首次发布

本文链接：https://blog.csdn.net/qq_59294755/article/details/134343027

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。

注意：当前Vue官方已经停止对Vue2的维护

Vue2官方文档链接：Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/

一、入门教程

第一种方式：下载至本地，使用js外联使用

安装Vue

npm install vue@2.6.10

基本使用Vue

第一步：新建html文件

第二步：在HTML的body标签中引入Vue.js文件

<script src="./node_modules/vue/dist/vue.js"></script>

第三部：引入写Vue代码的js文件

<script src="./main.js"></script>

总体展示：

Vue编辑HTML

定义一个id为app(不是app也行名字自取)作为入口
new Vue（）实例化Vue程序：

Vue实例说明
el 元素element缩写，指定被Vue管理的DOM节点入口，注意el的值不能是html 或body
data 指定初始化数据，可通过模版语法使用（大胡子语法）
```
(function(Vue) {
    new Vue({
        el: "#app", //这里el绑定的元素要与HTMl中Vue的路口id相同
        data: {

        }
    })
})(Vue)
```
在HTML中显示数据————模版语法（或大胡子语法）：{{data中的数据}}

Vue实例说明
el	元素element缩写，指定被Vue管理的DOM节点入口，注意el的值不能是html 或body
data	指定初始化数据，可通过模版语法使用（大胡子语法）

HTML中代码

<body>
    <div id="app">
        number:{{number}} number23:{{number23}}
    </div>
    <!-- 引入Vue -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./cheshi.js"></script>
</body>

JS中代码

(function(Vue) {
    new Vue({
        el: '#app',
        data: {
            number: 123,
            number23: 234
        }
    })
})(Vue)

结果（vue中的data数据成功渲染到网页上）：

第二种方式：直接使用网络版本，并在html中使用

建议：使用第一种方式，因为使用网络版本可能由于官方停止维护的原因已经访问不到vue包了，建议使用第一种下载后引入使用

引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>

在Html内部使用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>
</head>

<body>
    <div id="app">
        number:{{number}} number23:{{num23}}
    </div>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                number: 123,
                num23: 234
            }
        })
    </script>
</body>

</html>

二、分析MVVM模型

MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格

Model：模型、数据对象（data选项当中的）

View：视图，模版页面（用于渲染数据）

ViewModel：视图模型，其本质上就是Vue的实例

思想：通过数据驱动视图
把需要改变视图的数据初始化到Vue中，当Vue中的数据发生改变，网页的数据也会发生改变，从而实现对视图的更新
声明式编程：按照Vue 的特定语法进行声明式开发，可以实现相对应的功能，不需要我们直接操作Dom元素
命令式编程：JQuery，需要手动去操作DOM才能实现相对应的功能

三、模版数据绑定渲染

声明式渲染

{{xxx}}双大括号绑定
v-xxxxx 以v-开头用于标签属性绑定，称为指令

基本指令

Vue基本指令
指令名称	简写	说明
v-model	无	双向数据绑定
v-bind	：	元素绑定
v-once	无	一次性插入值
v-html	无	将文本当作HTML渲染
v-text	无	输出文本内容
v-on	@	事件绑定
v-if/v-else-if/v-else	无	判断条件
v-for	无	循环遍历渲染
v-show	无	切换显示和隐藏
v-slot
v-pre
v-cloak

v-model:双向数据绑定

Vue提供的响应式数据的绑定指令，当依赖项发生变化的时候或目标项发生变化的时候都同时更新数据

v-model修饰符
修饰符	说明
.lazy	取代input监听change事件
.number	输入字符串转为有效的数字
.trim	输入首尾空格过滤

v-bind：元素绑定

对单一的数据进行绑定例如style，与v-model的区别在于它不是双向更新而是单向更新，通常绑定的是定值

v-bind修饰符
修饰符	说明
.prop	作为一个 DOM property 绑定而不是作为 attribute 绑定
.camel	将 kebab-case attribute 名转换为 camelCase
.sync	语法糖，会扩展成一个更新父组件绑定值的v-on侦听器

基本使用

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-once：一次性插入值

只会对目标数据进行一次响应式更新

v-html：输出HTML内容

用于将文本以html的形式渲染到网页
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用v-html，永不用在用户提交的内容上。

基本使用

<div v-html="html"></div>

v-text：在网页上输出文本

用于将文本输出到网页上

基本使用

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-on：事件绑定

用于监听 DOM 事件
用于事件和方法的绑定

v-if/v-else-if/v-else：判断条件是否渲染

用于判断是否渲染该标签，可与v-else搭配使用

v-for:循环遍历渲染

基本使用

<ul id="example-1">
  <li v-for="(item,name,index) in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

其中items是源数据数组，而item则是被迭代的数组元素的别名
在v-for块中，我们可以访问所有父作用域的 property。v-for还支持一个可选的第二个参数，即当前项的索引。
也可以用of替代in作为分隔符
可以提供第二个的参数为 property 名称 (也就是键名),第三个作为索引

v-show：切换显示和隐藏

v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好
当v-if与v-for一起使用时,v-for具有比v-if更高的优先级
v-show的元素始终会被渲染并保留在 DOM 中，v-show只是简单地切换元素的 CSS property display

计算机属性（computed）

对于任何复杂逻辑，都建议使用计算属性
方法和计算机属性的区别：计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

//HTML代码
    <div id="app">
        翻转前的文字是：{{message}} 翻转后的文字是：{{reversedMessage}}
        <hr>
    </div>



--------------------------------------------------------------------------
//JS代码
(function(Vue) {
    var vm = new Vue({
        el: '#app',
        data: {
            message: "Hello,你好"
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function() {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        }
    })
    // 可以访问实例对数据进行修改
    vm.message = 'hao123'
    console.log(vm.reversedMessage);
})(Vue)

监听属性（watch）

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动
监听属性的好处是能监听数据，但是不会缓存上次的数据，而计算机会有缓存上次的数据
计算属性适用于需要对响应式数据进行计算操作的场景，而侦听器适用于需要对数据变化做出特定响应的复杂场景。计算属性在多次访问时具有性能优势，而侦听器则提供了更灵活的异步操作支持。

(function(Vue) {
    var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello,你好",
                firstName: 'Foo',
                lastName: 'Bar',
                fullName: 'Foo Bar'
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function() {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                }
            },
            watch: {
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
        // 可以访问实例对数据进行修改
    vm.message = 'hao123'
    console.log(vm.reversedMessage);
})(Vue)

watch的getter和setter写法

            watch: {
                // getter
                get: function() {
                    return this.fullName = val + ' ' + this.lastName
                },
                // setter
                set: function(newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }

四、Css和Style的绑定

使用v-bind绑定CSS

使用对象语法动态切换css

HTML：
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>


-----------------------------------------------------------------

Vue：

data: {
  isActive: true,
  hasError: false
}

渲染结果为

<div class="static active"></div>

使用v-bind绑定返回对象的计算机属性修改style

HTML：
<div v-bind:class="classObject"></div>


-------------------------------------------------------------

Vue：

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      //对style进行判断处理
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

使用数组绑定css

HTML：
<div v-bind:class="[activeClass, errorClass]"></div>
//还可以使用三元表达式
//<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

------------------------------------------------------

Vue：

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染结果