【前端笔记】五、初识VUE

最新推荐文章于 2024-09-24 10:01:00 发布

知识的芬芳和温柔的力量全都拥有的小王同学

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量216

点赞数 2

分类专栏：前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/tensixchuan/article/details/120162137

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了Vue框架的基础使用，包括创建Vue实例、数据驱动原理、模板插值以及生命周期的`created`和`mounted`阶段。重点展示了如何利用Vue简化数据更新与界面渲染的过程，以及关键的模板语法应用。

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

一、简介

在这里插入图片描述
vue是一套用于构建用户界面的渐进式框架：

构建用户界面：顾名思义，就是可以用来写界面的框架
渐进式：既可以改造一个页面的一个小部分，也可以从零开始做个复杂的网站

vue框架的核心思想是数据驱动：vue框架会监听数据的变化，每当数据发生改变后，vue框架会利用新的数据重新渲染页面，无需手动进行繁琐的DOM操作

二、Vue实例

创建实例

先！+Tab创建一个html实例，然后在body中引入vue源码

<!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>
</head>

<body>
    <div id="app">hello world</div>
    <!-- 引入vue源码 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./sch_ran_vue.js"></script>
</body>

</html>

sch_ran_vue.js文件：

// 创建一个vue实例
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  }
})

alert(vm.name);

上面的代码通过script标签引入了vue的源码，这样就可以在全局环境中使用vue的构造函数Vue
然后，在js代码中，使用了new操作符来创建一个vue实例
在创建vue实例的时候，还向Vue构造函数传入了一个对象，这个对象有el和data两个属性：

data：data属性用来存放实例的数据。Vue的核心思想是数据驱动，这里的数据就是指data属性中的数据，vue框架会监听这个数据的变化，重新渲染页面

vue实例会自动将data属性中的数据映射到vm实例自身上, vm.name和vm.$data.name都可以获取实例的name值

el：el属性用来绑定界面中的DOM元素，是将vue实例与html联系起来的纽带

实例的生命周期

和上面介绍过的el、data属性一样，生命周期其实就是一些初始化vue实例时传递的属性，不过这些属性都是函数，最常用的生命周期有两个：

created
mounted


// 创建一个vue实例
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  },
  // 指定created生命周期函数
  created() {
    alert('created');
  },
  // 指定mounted生命周期函数
  mounted() {
    alert('mounted');
  },
})

下图介绍了完整的生命周期及各个生命周期周期被触发的时间点
在这里插入图片描述

三、模板语法

插值

<!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>
</head>

<body>
    <div id="app">{{name}}</div>
	<!-- 引入vue的源码 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./sch_ran_vue.js"></script>
</body>
</html>

// 创建一个vue实例
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  }
})

运行发现页面上的{{name}}被替换成了hello world，这个{{}}双大括号语法叫模板语法 ，中间包含的内容就是插值，插值会变成被解析成变量或者单个表达式

// 创建一个vue实例
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  }
})


// 每隔500ms改变一次name属性
setInterval(function() {
  vm.name = Math.random();
}, 500);