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

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

news 2025/7/14 14:55:57

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.xdnf.cn/news/1117693.html

相关文章：

  • Agent篇
  • [Linux入门 ] RAID存储技术概述
  • 面向对象设计模式详解
  • 基于 STM32H743VIT6 的边缘 AI 实践：猫咪叫声分类 CNN 网络部署实战（已验证）中一些bug总结
  • OSPF 基础实验
  • 项目合作复盘：如何把项目经验转化为可复用资产
  • pthread_mutex_unlock函数的概念和用法
  • [办公及工程版浏览器]_Google Chrome 138.0.7204.101全屏启动插件
  • 专业PPT图片提取工具，操作简单
  • 欧拉系统安装UKUI桌面环境
  • spring--xml注入时bean的property属性
  • CentOS 7 升级系统内核级库 glibc 2.40 完整教程
  • 前四天综合总结
  • 事务失效场景@Transactional
  • Vue单文件组件与脚手架工程化开发
  • [特殊字符]使用 Nginx 将 HTTP 重定向到 HTTPS
  • dll文件缺失解决方法
  • SegFix: Model-Agnostic Boundary Refinementfor for Segmentation
  • Linux713 SAMBA；磁盘管理：手动挂载，开机自动挂载，自动挂载
  • 五次方程无根式解的群论证明详解
  • 大模型-量化技术
  • 【设计模式】命令模式 （动作(Action)模式或事务(Transaction)模式）宏命令
  • 【Linux内核模块】模块加载函数--从启动到运行的幕后推手
  • （S4）Efficiently Modeling Long Sequences with Structured State Spaces论文精读（逐段解析）
  • C语言---自定义类型(上)(结构体类型)
  • 20250713-`Seaborn.pairplot` 的使用注意事项
  • 信号量机制,互斥的避免自旋锁的实现方法（操作系统）
  • 应用层协议和JSON的使用
  • 飞算AI使用体验-一种基于项目工程思维的AI-Code思路
  • DVWA | Weak Session IDs 弱会话标识符