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

金子1213

已于 2024-08-16 20:27:58 修改

阅读量1.4k

点赞数 36

CC 4.0 BY-SA版权

文章标签：学习笔记 vue.js 前端

于 2024-08-12 20:41:59 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63634307/article/details/141139054

一、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事件绑定指令

完整格式：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选项中定义的函数计算属性
会进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。
函数：每次都会执行函数体进行计算。

watch监听器

当属性数据发生变化时,对应属性的回调函数会自动调用,在函数内部进行计算通过watch选项或者 vm
实例的$watch()来监听指定的属性

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

<!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">
        总得分:(监听器)<input type="text" v-model="sumScore3">
      
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                mathematics: 120,
                language: 148, 
                sumScore3: 0,  
            },
            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
                    }
                }
            },
             watch: {
                // 通过watch选项进行监听数学分数 当数学分数更新后 回调函数中冲核心计算总分sumScore3
                mathematics: function (newValue, oldValue) {
                    this.sumScore3 = (newValue - 0) + (this.language - 0)
                }
            },
        })
        // 监听器方式2 通过vue实例进行定义
        // 第一个参数为监听的属性名，第二个参数为回调函数
        vm.$watch('language', function (newValue) {
            this.sumScore3 = (newValue - 0) + (this.mathematics - 0)
        })
    </script>
</body>
</html>

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

Class与Style绑定v-bind

通过 class 列表和 style指定样式是数据绑定的一个常见需求。它们都是元素的属性,都用v-bind处理,其中表达式结果的类型可以是:字符串、对象或数组。

语法格式

v-bind:class=‘表达式’或:class=‘表达式’
class的表达式可以为:
字符串:class=‘activeClass’
对象:class=’{active:isActive,error:hasError}’
数组:class='[“active”,“error”]'注意要加上双引号,不然是获取data中的值
v-bind:style='表达式’或:style=‘表达式’
o:style的表达式一般为对象
:style="{color:activeColor,fontSize:fontSize+‘px’}"注意要加上单引号,不然是获取data中的值
注意:对象中的value值 activeColor和 fontSize 是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.js"></script>
    <style>
        .active {
            color: green;
        }
        .deletd {
            color: red;
        }
        .error {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div id="root">
        <h3>class绑定：v-bind:class 或 :class</h3>
        <p v-bind:class="activeClass">字符串表达式</p>
        <!-- key是样式名 value是data中绑定的属性  -->
        <!-- 当isDelete为true的时候 delete就会进行渲染 -->
        <p :class="{deletd:isDelete,error:hasError}" @click="fn()">对象表达式</p>

        <p :class="['active','error']">数组表达式</p>

        <h3>style绑定 v-bind:style 或 :style</h3>
        <p :style="{color:activeColor,fontSize:fondsize+'px'}">style样式</p>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                activeClass: 'active',
                isDelete: false,
                hasError: true,
                activeColor: 'red',
                fondsize: 50
            },
            methods: {
                fn() {
                    this.isDelete = !this.isDelete
                    this.hasError = !this.hasError
                }
            },
        })
    </script>
</body>
</html>