当前位置：首页 > news >正文

vue2入门（1）vue核心语法详解复习笔记

news 2025/7/14 5:30:19

vue2

文章目录

- vue2
- - 1.下载 vue develop 插件给浏览器
  - 2.核心语法
  - - 1.new Vue
    - 2.使用 vue 的特性：
    - - 2.1插值表达式和响应式数据
      - 2.2methods 属性
      - 2.3计算属性：具有缓存性 computed
      - 2.4侦听器
      - 2.5指令
      - v-text v-html
        v-for
        v-if v-show
        v-bind
        事件指令 v-on
        v-model
      - 2.6修饰符

1.下载 vue develop 插件给浏览器

再浏览器扩展中下载插件

2.核心语法

首先我们先新建一个文件夹存放我们的学习代码，这里你们自己选择位置：

这里我在我的 code 文件夹下面新建了一个 vue2 文件夹，用于存放项目代码

这里我们需要新建一个 index.html 文件

使用开发工具打开这个 vue 2项目，并且生成初始化的代码结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

这里可以选择两种初始化方式：

1.使用 vue 官网的在线引入文件（初学）

2.使用 vue cli 基于脚手架的方式（后面介绍）

这里我们讲解第一种方式：

vue官网： https://v2.cn.vuejs.org/

这里需要注意，由于是初学者，我们先学习 vue2

点击这里的起步按钮

就会发现 vue 是可以直接通过 cdn 的方式引入

也就是通过 JavaScript 标签引入，这里引入的位置在 body 的底部

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue2</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>

1.new Vue

首先在 body 中添加一个 div， id 设置为 app

<div id="app"></div>

在 JavaScript 中 new Vue 实例，并使用它的一些配置和方法

<script> const vm = new Vue({el: "#app",})  
</script>

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body><div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',});
</script>
</html>

2.使用 vue 的特性：

2.1插值表达式和响应式数据

当我们想要修改页面的内容，如果使用 JavaScript 那么就会使用 Dom 操作，但是这很繁琐， vue 框架提供给我们一种给便利简洁的方式。

那就是我们在 vue 实例内部声明响应式数据

在 html 中使用插值表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app"><div>{{title}}</div><div>{{message}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '这是一个标题',message: '这是内容',}}});
</script>
</html>

这是页面效果，如果我们需要修改数据，直接修改响应式数据，页面会自动更新数据，这是一个数据的单向绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue学习</title></head><body><div id="app"><div>{{title}}</div><div>{{message}}</div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '一个标题',message: '这是内容',}}});</script>
</html>

2.2methods 属性

这个属性，其实就是我们的函数方法，这里面可以写很多个函数，这个属性中可以使用 this.响应式数据的方式访问修改我们定义的响应式数据，并且也可以使用插值表达式的方式使用这个函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue学习</title></head><body><div id="app"><div>{{title}}</div><div>{{message}}</div><div>{{output()}}</div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '一个标题',message: '这是内容',}},methods: {output() {return '这是一个output方法'+ this.message;}}});</script>
</html>

当然你也可以在 output 下方添加更多的同级函数，注意需要写在 methods 内

2.3计算属性：具有缓存性 computed

它的作用是，当写在内部的函数多次的结果都是一样的话，只会执行第一次运算，会把最后的结果缓存在一个地方，只要是发现没有变化，就会一直使用之前的结果。

也就是说，写在这内部的函数，调用次数越多，越节约计算成本，性能越好

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app"><div>{{title}}</div><div>{{message}}</div><div>{{output()}}</div><div>{{outputContent}}</div><div>{{outputContent}}</div><div>{{outputContent}}</div><div>{{outputContent}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '一个标题',message: '这是内容',}},methods: {output() {return '这是一个output方法'+ this.message;}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}}});
</script>
</html>

注意看这里的写法，它是一个属性，所以我调用的时候，是不用加括号的

这里可以看见，我们调用了多次计算属性，但是只计算了一次，从控制台能够看见

2.4侦听器

这是一个监测我们的响应式的数据有没有发生改变，如果发生改变，可以允许我们做一些操作

比如说，我们在 methods 中添加一个函数修改 title 的内容为嘿嘿嘿，在使用我们的侦听器。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue学习</title></head><body><div id="app"><div>{{title}}</div><div>{{message}}</div><div>{{output()}}</div><!--  <div>{{outputContent}}</div>--><!--  <div>{{outputContent}}</div>--><!--  <div>{{outputContent}}</div>--><!--  <div>{{outputContent}}</div>--><div>{{testWatchTitle()}}</div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',}},methods: {output() {return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});</script>
</html>

这里会发现，内部的输出在控制台上有了，这也就是说，我们可以在改变响应式数据的同时，去做一些操作。

2.5指令

v-text v-html

<p v-text="htmlContent"></p>
<p v-html="htmlContent"></p>

大家会发现这两个指令可以用来渲染 text 内容， v-html 则是可以渲染 html 页面内容

v-for

为了逻辑清晰我把以前的代码全部注释掉

并且使用 v-for 渲染五个嘿嘿嘿

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app">
<!--  <div>{{title}}</div>-->
<!--  <div>{{message}}</div>-->
<!--  <div>{{output()}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{testWatchTitle()}}</div>--><p v-text="htmlContent"></p><p v-html="htmlContent"></p><div v-for="item in 5">嘿嘿嘿</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',htmlContent: '<h1>我是h1</h1>',}},methods: {output() {return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});
</script>
</html>

这是一个循环渲染

当然我们可以拿来渲染数组或者对象：

v-if v-show

v-if：会根据条件重新渲染在 Dom

v-show ：一直都存在 Dom，会根据条件设置样式 display： none

发现没有 v-if

这里是 v-show

发现只是隐藏了

所以这里得出一个重要结论，如果我们的需求是不停的来回切换显示状态，我们最好使用 v-show，因为这样可以避免多次重复 dom 创建销毁带来的损耗

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app">
<!--  <div>{{title}}</div>-->
<!--  <div>{{message}}</div>-->
<!--  <div>{{output()}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{testWatchTitle()}}</div>--><p v-text="htmlContent"></p><p v-html="htmlContent"></p><!--  <div v-for="item in arr">{{item}}</div>--><div v-for="(item, key, index) in obj">{{item, key, index}}</div><div v-show="false">heihei</div><!--  属性指令-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',htmlContent: '<h1>我是h1</h1>',arr:['a', 'b', 'c'],obj:{name:'张三',age:18},falg:  true,}},methods: {output() {return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});
</script>
</html>

v-bind

可以简写：

事件指令 v-on

    <button v-on:click="output">按钮</button><button @click="output">按钮</button>

可以简写为 @Click

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app">
<!--  <div>{{title}}</div>-->
<!--  <div>{{message}}</div>-->
<!--  <div>{{output()}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{outputContent}}</div>-->
<!--  <div>{{testWatchTitle()}}</div>--><p v-text="htmlContent"></p><p v-html="htmlContent"></p><!--  <div v-for="item in arr">{{item}}</div>--><div v-for="(item, key, index) in obj">{{item, key, index}}</div><div v-show="false">heihei</div>
<!--  数据绑定--><div v-bind:title="title">这是内容</div><div :title="title">这是内容</div><button v-on:click="output">按钮</button><button @click="output">按钮</button>
<!--  属性指令-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',htmlContent: '<h1>我是h1</h1>',arr:['a', 'b', 'c'],obj:{name:'张三',age:18},falg:  true,}},methods: {output() {console.log('按钮被点击了');return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});
</script>
</html>

v-model

这是input输入框独有的，实现数据双向绑定

  <input type="text" v-model="inputValue"><div>{{inputValue}}</div>

2.6修饰符

v-model.trim

<input type="text" v-model.trim="inputValue">
<div>{{inputValue}}</div>

这是用来清除输入框两侧的空格

同样这样的修饰符还有很多 vue 中，有关于键盘事件的等等

查看全文

http://www.lryc.cn/news/586641.html

算法学习笔记：18.拉斯维加斯算法 ——从原理到实战，涵盖 LeetCode 与考研 408 例题

一扇门铃，万向感应——用 eventfd 实现零延迟通信

14.使用GoogleNet/Inception网络进行Fashion-Mnist分类

4. 观察者模式

Java行为型模式---观察者模式

Typecho分类导航栏开发指南：从基础到高级实现

低代码引擎核心技术：OneCode常用动作事件速查手册及注解驱动开发详解

Pytorch实现感知器并实现分类动画

深入理解观察者模式：构建松耦合的交互系统

为什么玩游戏用UDP，看网页用TCP？

【C++详解】STL-priority_queue使用与模拟实现，仿函数详解

信息收集实战

【读书笔记】《C++ Software Design》第九章：The Decorator Design Pattern

设计模式：软件开发的高效解决方案(单例、工厂、适配器、代理)

基于无人机 RTK 和 yolov8 的目标定位算法

一文认识并学会c++模板(初阶)

AI 助力编程：Cursor Vibe Coding 场景实战演示

基于 Redisson 实现分布式系统下的接口限流

牛客网50题

【C/C++】编译期计算能力概述

[Python] -实用技巧篇1-用一行Python代码搞定日常任务

蓝牙调试抓包工具--nRF Connect移动端使用详细总结

生成式对抗网络（GAN）模型原理概述