Vue.js学习

最新推荐文章于 2025-06-09 00:45:00 发布

原创最新推荐文章于 2025-06-09 00:45:00 发布 · 702 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue.js的基础知识，包括它是一个渐进式的JavaScript框架，用于构建用户界面。Vue的特点包括组件化开发和声明式编码。通过创建Vue实例和设置数据绑定，展示了如何在HTML中引入并使用Vue。Vue的数据绑定分为单向和双向，通过v-bind和v-model实现。文章还探讨了Object.defineProperty()在实现双向数据绑定中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习Vue

一、Vue.js是什么？

Vue.js是一套用于构建用户界面的渐进式JavaScript框架。
构建用户界面：使用某种方式拿到数据，将数据放到合适的位置。
渐进式：Vue可以自底而上逐层应用

二、Vue的特点

1.采用组件化开发，提高代码复用率，并且让代码更好维护
2.使用声明式编码，让程序员无需直接操作DOM，提高开发效率
3.使用虚拟DOM+Diff算法，尽量复用DOM节点

虚拟DOM：使用普通的js对象来描述DOM结构，因为不是真实的DOM，所以称为虚拟DOM，本质上是一个对象。

三、html中引入Vue并使用

步骤：
1.下载vue.js
Vue.js官网:https://cn.vuejs.org/v2/guide/installation.html
NPM:npm install vue

2.导入vue.js

<script src="../js/vue.min.js"></script>

3.创建容器

 <div id="root">
 	
 </div>

4.创建Vue实例

    const x=new Vue({
      el:'#root',
      data:{
        name:'curry',
        msg:'页面加载于 ' + new Date().toLocaleString(),
      }
    })

声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<div id="root">
  {{ message }}   <!-- 插值语法-->
</div>

一个完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue实例</title>
  <!-- 引入Vue -->
  <script src="../js/vue.min.js"></script>
</head>
<body>
  <!-- 容器 -->
  <div id="root">
    <span :title="msg">{{name}}</span>
  </div>
  <script>
    // Vue实例
    new Vue({
      el:'#root',
      data:{
        name:'curry',
        msg:'页面加载于'+new Date().toLocaleString()
      }
    })
  </script>
</body>
</html>

要注意的点：
1.想让vue工作，就必须创建一个vue实例，并且传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法；
3.root容器里的代码被称为【vue模版】；
4.vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

四、Vue相关

1.数据绑定

Vue有两种数据绑定方式，单向数据绑定和双向数据绑定

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还能从页面流向data

1.双向数据绑定一般都应用在表单元素上（如：input、select...，有value的元素）
2.v-model：value可以简写为v-model默认收集的就是value的值

单向数据绑定有两种形式
1.插值形式
插值形式也就是{{name}}
一旦data中的name改变了，那么页面中的name也随之发生了改变
2.v-bind形式
v-bind可以绑定标签的属性，如src、class、style等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单向数据绑定</title>
</head>
<body>
  <div id="root">
    <div v-bind:style="color">我是单向绑定</div>
    <div>{{name}}</div>
  </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
  const vm=new Vue({
    el:'#root',
    data:{
      color:'color:red',
      name:'ning'
    }
  })
</script>
</html>

没有改变时
在这里插入图片描述
在控制台改变data中数据的值时，页面也随之改变

双向数据绑定
数据的双向绑定，是Vue实现的一大功能。

所谓双向绑定，也就是data中的数据和页面渲染的数据保持一致，无论谁被改变，另一方都会更新为相应的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双向数据绑定</title>
</head>
<body>
  <div id="root">
    <input type="text" v-model:value="name">{{name}}
  </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
  const vm=new Vue({
    el:'#root',
    data:{
      name:'curry'
    }
  })
</script>
</html>

当在Input框中改变name的值时，可以从插值语法中看出data中的name也发生了改变。
在这里插入图片描述
双向数据绑定的原理-Object.defineProperty()
vue是通过Object.defineProperty( )来实现数据的劫持的，之前了解到的Object.defineProperty的作用是添加一个对象的属性，以及对该属性的一些操作，比如是否可枚举、是否可读写等，在vue阶段我们主要研究它的两个描述属性getter和setter。
我们通过Object.defineProperty()设置了对象person的age属性，对其get和set进行重写操作，get就是在读取age属性的值时触发的函数，set就是设置age属性的值时触发的函数。

<script>
  let number=10;
  let person={
    name:'curry',
    gender:'男',
  }
  // defineProperty这个函数接受三个参数，1：对象，2：属性名，3：配置对象
  Object.defineProperty(person,'age',{ 
    get(){            
      console.log('有人读取age了！！');//当读取该属性时调用，并且返回值就是该属性的值。
      return number;
    },
    set(value){         //set(setter)当修改该属性时调用，并且返回修改后的值
      console.log('age被修改了');
      number=value;
    }
  })
</script>

在这里插入图片描述