Vue的开始-基础知识点概括

chnnds

已于 2022-03-22 11:44:25 修改

阅读量1.5k

点赞数

文章标签：前端 javascript vue

于 2022-03-22 11:44:03 首次发布

本文链接：https://blog.csdn.net/chnnds/article/details/123652244

版权

本文详细介绍了Vue的基础知识，包括数据绑定的模板语法、双向数据绑定、数据代理，事件处理的基本使用、修饰符及键盘事件，计算属性和监视属性的区别，以及样式绑定和渲染技巧。同时涵盖了数据监视、表单收集和过滤器的实践应用。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1、Vue简单了解

终于经过千难万险进入了心心念念的Vue。经过长时间的努力还是不负众望啊！废话不多说！开始我们今天的Vue的小编的知识点整理！

首先我们先说说什么是Vue：

Vue的概念：Vue是一套用于构建用户界面的渐进式JavaScript框架

渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件

Vue的特点：

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

但是大家先要学好Vue还是要掌握牢靠的基础知识。掌握好基础知识会让你的学习事半功倍，小编这就告诉大家需要学好哪些基础知识：

掌握的JavaScript知识点：

ES6语法规范
ES6模块化
包管理器
原型、原型链
数组常用方法
Axios
promise

2、数据绑定和数据代理

2.1、模板语法

（1）插值语法

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

（2）指令语法

功能：用于解析标签（包括标签属性、标签体内容，绑定事件……）
写法：Vue中有很多的指令，且形式都是：v-????

2.2、数据绑定

（1）单项数据绑定：

概念：v-bind数据只能从data流向页面
写法：v-bind:value或者:value

（2）双向数据绑定：

概念：v-model数据不仅能从data流向页面，还可以从页面流向data
写法：v-model:value=""或者v-model=""

注意点：

不是所有的标签都适用于v-model，v-model只能应用在表单（输入类）元素上面
v-model：value可以简写为v-model，因为v-model默认收集的就是value值

2.5、数据代理

数据代理的概念： 通过一个对象对另外一个对象中属性的操作（读/写）

数据代理基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性

3、事件处理

3.1、事件的基本使用

使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要使用箭头函数！否则this的指向是window
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click='demo'和@click='demo($event)'效果一致，但是后者可以传参

3.2、事件修饰符

prevent：阻止默认行为（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

3.3、键盘事件

（1）Vue中常用的按键别命名

回车=>enter
删除=>delete（捕获“删除”或者“退格”键）
退出=>esc
空格=>space
换行=>tab
上=>up
下=>down
左=>left
右=>right

（2）自定义按键别名

创建自定义按键别名语法： Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

4、计算属性和监视属性

4.1、计算属性

（1）定义

要用的属性不存在，要通过已有属性计算得来

（2）原理

低层借助了Object.defineproperty方法提供的getter和setter方法

（3）get()的使用时候

初次读取时会执行一次
当依赖的数据发生改变时会被再次调用

（4）优势

与methods实现相比，内容有缓存机制（复用），效率更高，调用方便

（5）注意点

计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

4.2、监视属性watch

（1）定义：当被监视的属性变化时，回调函数自动调用，进行相关操作

（2）监视的两种写法：

new Vue时传入watch配置
通过vm.$watch监视

（3）深度监视：（重点）

Vue中的watch默认不检测出对象内部值的改变（一层）
配置deep:true可以检测对象内部值的改变（多层）

（4）注意点：

Vue自身可以检测对象内部值得改变，但是Vue提供的watch默认不可以！
使用watch时更具数据的具体结构，决定是否采用深度监视

4.3、computed和watch

computed和watch的区别

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步任务

两个重要的小原则

所被Vue管理的函数，最好写成普通函数，这样this的执行才是vm或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、Ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

5、绑定样式和渲染

5.1、class绑定与style绑定

（1）class样式绑定

字符串写法：适用于样式的类名不确定，需要动态指定
数组写法：适用于要绑定的样式个数不确定，名字也不确定
对象写法：适用于要绑定得到样式个数确定，名字也确定，但要动态决定用不用

（2）案例展示

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>绑定样式</title>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        
        .happy {
            border: 4px solid red;
            ;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg, yellow, pink, orange, yellow);
        }
        
        .sad {
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }
        
        .normal {
            background-color: skyblue;
        }
        
        .atguigu1 {
            background-color: yellowgreen;
        }
        
        .atguigu2 {
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }
        
        .atguigu3 {
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            mood: 'normal',
            classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
            classObj: {
                atguigu1: false,
                atguigu2: false,
            },
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleObj2: {
                backgroundColor: 'orange'
            },
            styleArr: [{
                fontSize: '40px',
                color: 'blue',
            }, {
                backgroundColor: 'gray'
            }]
        },
        methods: {
            changeMood() {
                const arr = ['happy', 'sad', 'normal']
                const index = Math.floor(Math.random() * 3)
                this.mood = arr[index]
            }
        },
    })
</script>

</html>

5.2、条件渲染

（1）v-if

写法

v-if="表达式"
v-else-if="表达式"
v-else="表达式"

适用于：切换频率比较低的场景
特点：不展示的DOM元素直接移除
注意：v-if可以和v-else-if、v-else-if一起使用，但是要求结构不能被打断

（2）v-show

写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if时，元素可能无法获取到，而是用v-show一定可以获取到

5.3、列表渲染

（1）v-for

应用场景：用于展示列表数据
语法：v-for="(item,index) in xxx" :key="yyy"
特点：可以遍历：数组、对象、字符串（用得少）、指定次数（用得很少）

（2） Key的内部原理

6、监视数据、表单和过滤器

6.1、Vue监视数据的原理

6.2、收集表单数据

（1）情况一：若<input type="text"/>，则v-model收集的是value值，用户输入的就是value值

（2）情况二：若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value

（3）情况三：若<input type="CheckBox"/>

没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
配置input的value属性：

v-model的初始值是非数字，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的就是value组成的数组

（4）案例解答

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <form @submit.pervent="demo">
            <!-- <label for="demo">账号：</label>使点击账号也可以获取input的焦点
            <input type="text" id="demo"> -->
            账号：<input type="text" v-model.trim="userInfo.account"><br /><br /> 密码：
            <input type="password" v-model="userInfo.password"><br /><br /> 年龄：
            <input type="number" v-model.number="userInfo.age"><br /><br /> 性别： 男
            <input type="radio" name="sex" v-model="userInfo.sex" value="男"> 女
            <input type="radio" name="sex" v-model="userInfo.sex" value="女"><br /><br /> 爱好： 学习
            <input type="checkbox" v-model="userInfo.hobby" value="学习"> 打游戏
            <input type="checkbox" v-model="userInfo.hobby" value="打游戏"> 吃饭
            <input type="checkbox" v-model="userInfo.hobby" value="吃饭">
            <br /><br /> 所属校区
            <select v-model="userInfo.city">
                <option value=" ">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br /><br /> 其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea>
            <br /><br />
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com ">《用户协议》</a><br /><br />
            <button>提交</button>
        </form>

    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    sex: '',
                    age: '',
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    agree: ''
                }

            },
            methods: {
                demo() {
                    // console.log(JSON.stringify(this._data));
                    console.log(JSON.stringify(this.userInfo));
                }
            },
        })
    </script>
</body>

</html>