【学习笔记01】vue的了解和指令

news2025/1/24 2:25:16

一、什么是 Vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

二、Vue的两个核心功能

声明式渲染

Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和 JavaScript 状态之间的关系。

响应性

Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。

官网：cn.vuejs.org

三、搭建环境

1、前提条件

vue.global.js文件地址

 链接：https://pan.baidu.com/s/1nJyLYYKt4c4QLfeuQrUGOg 提取码：1115

2、搭建环境代码

createApp：创建一个应用，这个方法的返回值是的对象
数据必须存储在data函数返回的对象里
mount(挂载):把应用挂载到一个dom节点上

    <div id="box">
        {{str}}
    </div>
    <script>
        // createApp 创建一个应用  这个方法的返回值是的对象
        let app = Vue.createApp({
            //数据必须存储在data函数返回的对象里
            data: function () {
                return {
                    str: 'hello world'
                }
            }
        })
        app.mount("#box")
        //mount 挂载  把应用挂载到一个dom节点上
        console.log(app)
    </script>

3、代码简化

    <div id="box">
       {{str}}
    </div>
    <script>
        let app = Vue.createApp({
            data(){  //响应式数据   
                return {
                    str:"hello world"
                }
            }
         }).mount("#box");
         console.log(app)
    </script>

插件中显示

4、Vue 的双向数据绑定原理是什么

在 Vue2.x 中，双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的，也就是说 数据和视图同步 ，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

数据绑定的核心

Vue2双向数据绑定的核心是Object.defineProperty()方法
Vue3.x则是用ES6的语法Proxy对象来实现的

Object.defineProperty()的缺点

只能监听对象(Object)，不能监听数组的变化，无法触发push, pop, shift, unshift,splice, sort,reverse
必须遍历对象的每个属性
只能劫持当前对象属性，如果想深度劫持，必须深层遍历嵌套的对象。

Proxy的优点

Proxy可以直接监听对象而非属性。
Proxy可以直接监听数组的变化。
Proxy有多达13种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是
Object.defineProperty 不具备的。
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能历对象属性直接修改。
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利

四、 vue的调试工具

1、插件下载地址

vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发
地址：https://chrome.zzzmh.cn/#/theme

在这里插入图片描述

五、配置用户代码块

在后续的学习中，我们都需要搭建环境的代码，因此我们可以配置代码块，方便使用

配置的代码

	"Print to console": {
		"scope": "javascript,typescript,html",
		"prefix": "vvv3",
		"body": [
			"<div id=\"app\">",
			"</div>",
			"<script>",
				"Vue.createApp({",
					"data() {",
						"return {",
						"}",
					"},",
				"}).mount(\"#app\")",
			"</script>"
		],
		"description": "Log output to console"
	}

效果演示