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

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

news 2025/7/14 12:17:24

vue2

文章目录

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 中，有关于键盘事件的等等

专栏文章：

1.vue2入门（1）vue核心语法详解复习笔记
2.vue笔记2 组件通信props $emit 组件插槽 slot 使用详细解释

http://www.dtcms.com/a/278049.html

相关文章：

  • 【开源项目】网络诊断告别命令行！NetSonar：开源多协议网络诊断利器
  • 1.1.1+1.1.3 操作系统的概念、功能
  • c++无锁队列moodycamel::ConcurrentQueue测试结果
  • 在高并发场景下，仅依赖数据库机制（如行锁、版本控制）无法完全避免数据异常的问题
  • Sping AI Alibaba
  • 第11章 AB实验评估指标体系
  • Soul方程式：Z世代背景下兴趣社交平台的商业模式解析
  • Java行业前景如何？零基础又该如何去学Java？
  • 深入理解 RocketMQ：生产者详解
  • 并行并发丨C++ 协程、现场池 学习笔记
  • 闲庭信步使用图像验证平台加速FPGA的开发：第十三课——图像浮雕效果的FPGA实现
  • 语言模型常用的激活函数（Sigmoid ，GeLU ，SwiGLU，GLU，SiLU，Swish）
  • 算法-汽水瓶兑换
  • Spring AI 项目实战（十七）：Spring Boot + AI + 通义千问星辰航空智能机票预订系统（附完整源码）
  • 【webrtc】gcc当前可用码率3：x264响应码率改变
  • 系规备考论文：论IT服务部署实施方法
  • 西藏氆氇新生：牦牛绒混搭液态金属的先锋尝试
  • 分布式锁踩坑记：当“防重“变成了“重复“
  • JAVA并发——什么是Java的原子性、可见性和有序性
  • Redis缓存设计与性能优化指南
  • 使用Starrocks替换Clickhouse的理由
  • C++封装、多态、继承
  • 在 Ubuntu 下安装 MySQL 数据库
  • 从文本中 “提取” 商业洞察“DatawhaleAI夏令营”
  • 电路分析基础（02）-电阻电路的等效变换
  • Matlab批量转换1km降水数据为tiff格式
  • 【LeetCode100】--- 5.盛水最多的容器【复习回顾】
  • ssm学习笔记day05
  • QT 多线程 管理串口
  • 《[系统底层攻坚] 张冬〈大话存储终极版〉精读计划启动——存储架构原理深度拆解之旅》-系统性学习笔记（适合小白与IT工作人员）