文章目录

前言
一
- 1.1 vue介绍
- 1.2 mvc概念
- 1.3 创建一个应用实例
- 1.4 模板
- 1.5 vue常用指令 directive

前言

提示：仅供学习参考，方便复习和复盘一些知识点，欢迎大佬指正

本文记录一下鄙人从0开始学习Vue3，穿插Vue2的一些知识点（笔记）
vue官网中文版：https://cn.vuejs.org/
欢迎大佬指正留言，相互学习

一

1.1 vue介绍

https://cn.vuejs.org/ 官方文档 --> 熟读框架文档
vue 是一个渐进式的构建用户界面的 mvvm 的 js 框架

渐进式：

所有功能都会设计到插件上（中间件）
程序会设计一个拔插式 api 用于使用中间件或者插件

mvvm

m 表示数据
v 表示视图
m 数据改变，视图会自动刷新，通过 vm 控制 vm（vue实例）
注意：
- 开发框架，无论是vue，react还是小程序，都是数据驱动视图，转换开发思路：要一切以数据为主，尽量不要去操作dom

声明式：

直接告知结果，运行过程由框架自己完成

1.2 mvc概念

设计应用程序的一个概念
m：model – 处理数据的方法
c：controller – 控制 – 核心业务代码
views：视图（前端网页）

1.3 创建一个应用实例

代码如下（示例）：

// createApp 创建应用实例的方法（固定写法）
const { createApp } = Vue;
// 创建应用实例传入参数对象 config
const app = createApp({/* data函数返回参数就是存储当前实例中的数据，也就是 mvvm 中 m注意：data返回对象属性 挂载到 app这个对象下*/data() {return {msg: '这是vue'}},/* 存储实例上的方法的这里面方法是直接挂载到实例上*/methods: {fn(){this.msg = '修改的值';}}
})
// 将应用程实例渲染到视图上
// #app标签内部受app控制 里面的数据就可以控制 #app内部标签
app.mount('#app')

1.4 模板

模版插值

{ { } }
用于输出实例上的数据（只支持简单的字符输出）

注意：

js环境（代码遵循js语法）
变量只会去实例上查找
内部只支持表达式

关于全局变量vue定义了一个白名单（白名单内部的变量才可以在模板中使用）

```
Infinity,undefined,NaN,isFinite,isNaN
```

parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent

Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl

```
require
```

总结：

全局变量中变量要么是一个值或者方法，调用后返回一个值

表达式：

任何结果是一个值，代码就是表达式
比如：
- 各种运算 ==> 1+2 / 2>3
- 具体值
- 变量
- 三目、短路、函数

1.5 vue常用指令 directive

指令：就是数据和标签状态的中间层，将标签的某种状态用过指令绑定到某个数据上，数据改变这个状态自动更新

语法：

```
<标签 v-指令名='值'><标签>
```
注意：引号中式js环境，环境同{ { } }环境是一致的

指令:

v-text：不重要，数据渲染到标签文本内容中（可用模板插值写）
v-html：渲染富文本
v-show：将元素显示和隐藏，和布尔值进行绑定，值为true显示，false时隐藏
v-bind：普通属性，将任意一个普通属性变成动态属性，属性还是原来的功能，属性值可以和任意数据进行绑定，可以是任意属性，包括自定义属性
- ```
<img v-bind:src="">
```
- 简写是 ==> :属性
- ```
<img :src="url" alt="" width="300">
<div :aa="a">11</div>

```

v-model 指令：将表单控件的值与实例上的数据进行双向绑定

 <div id="app"><!-- 输入框：密码框文本框 --><input type="text" v-model="msg">{{ msg }}<!-- 单选框 -->性别：<input type="radio" value="男" id="male" v-model="gender"><input type="radio" value="女" id="female" v-model="gender">{{ gender }}<hr><!-- 多选框 -->爱好：<input type="checkbox" value="篮球" id="lanqiu" v-model="hobbies"><input type="checkbox" value="足球" id="zuqiu" v-model="hobbies"><input type="checkbox" value="皮球" id="piqiu" v-model="hobbies">{{ hobbies }}<!-- 将复选框checked属性和布尔值进行绑定 -->同意以上条款<input type="checkbox" v-model="agree" />{{agree?'同意':'不同意'}}</div>

 const app = Vue.createApp({data() {return {msg: '初始值',gender: '女',hobbies: ['足球'],agree: true}}})app.mount('#app')

表单修饰符：用于修饰 v-model 指令
- .lazy：表单绑定变量的值，值变化即可触发（一般是change事件触发）
- .trim：自动去除绑定的 value 的开头结尾的空白格
- .number：自动将value的值过滤成number（解析规则同parseFloat）

v-on 指令：绑定vue的合成事件
- 合成事件：vue结合原生事件合成的vue事件
- 语法：v-on:普通事件
- 注意：
  - 事件触发时机和普通事件是一致的
  - v-on:click
  - v-on:mouseover
- 简写：@事件
- ```
   <button v-on:click="事件函数">按钮</button>
```

合成事件功能

行内直接修改实例上的数据
注意：不推荐使用，会造成视图和js业务混乱，不利于代码维护
绑定事件函数：vue合成的事件函数会去实例上查找

绑定事件函数不加括号

<button v-on:click="switchBox">{{isShow?'隐藏':'显示'}}
</button>

```
{methods: {switchBox(){}}
}
```

绑定事件函数加括号

使用场景：事件触发，需要传递参数时

<button v-on:click="switchBox('这是传递的值')">按钮
</button>

methods: {switchBox(msg){this.msg = msg;}}

vue合成事件对象

不加括号绑定：第一个参数就是事件对象

```
<button @click="fn">按钮</button>
```

   {methods: {fn(e) {// e.stopPropagation() e.preventDefault() e.target}}}

加括号绑定：此时实例方法不再是事件函数，相当于事件触发时，这个方法调用

解决方案：vue定义了全局变量 $event 保存该事件触发时的事件对象，通过实参传入即可

<button @click="fn(5, $event)">按钮</button>

 {methods: {fn(n, e) {// e.stopPropagation() e.preventDefault() e.target}}}

vue事件修饰符：用于修饰 v-on 指令

.stop 取消冒泡
.prevent 阻止默认事件
.capture 捕获阶段触发
.self 元素事件，只能由自己触发，后代无法冒泡触发
.once 绑定事件只触发一次

零基础学习Vue3（保姆级教学）相关推荐

python教学视频k_GitHub - y000k/codeparkshare: Python初学者（零基础学习Python、Python入门）书籍、视频、资料、社区推荐...
PythonShare Python初学者(零基础学习Python.Python入门)书籍.视频.资料.社区推荐本文主要针对零基础想学习Python者.本文本文由@史江歌(shijiangg ...
java教学入门零基础学习网站,22年最新
零基础自学JAVA,我首推这个网站只要你有一颗敢于学习的心,当然工欲善其事必先利其器,有了便利的工具,当然做什么都事半功倍.当下程序员就是高收入的代名词之一,说到编程,不得不提一下国外这个网站http ...
【量化回测必看！】Backtrader保姆级教学+免费行情源 SMA策略
前言想开始量化学习不知道如何入手?市面上的学习资料太多不知道该怎么看? 博主将从零基础讲解回测框架,一步步完成量化数据源的搭建,让你10天内成为量化高手博主同时将视频课程内容在B站更新,可以关注& ...
Java EE系列（九）——Java EE连接Mysql数据库（JDBC保姆级教学）
最近几天,peter xiao所在的项目小组也逐渐开始进行做最后的Java web课程大作业了,我们组所做的是运动会报名服务系统,其中涉及到很多数据的增删查改,所以需要依靠Mysql数据库来解决这些问 ...
【GIS人必学】零基础学习ArcGIS Python脚本开发训练营来了
Python作为一种高级程序设计语言,凭借其简洁.易读及可扩展性日渐成为程序设计领域备受推崇的语言.ArcGIS软件由于其面向地理问题的科学理念,不断创新的技术方法,已在国内外市场占据了主导地位.Py ...
「保姆级教学」入门级java程序——薪资转换器
往期「保姆级教学」目录「保姆级教学」iOS下JDK环境配置文章目录往期「保姆级教学」目录前言第二日任务 1.java基础语法 2.掌握java基本输入输出 3.掌握java基本数据类型和变量 ...
java基础知识点_零基础学习Java语言，各个阶段需要掌握的知识点
随社会的脚步的不断发展,Java技术在不断的与时俱进,这也是Java一直长盛不衰的原因之一.Java技术的学习,永远没有早晚之分,技不压身,对于21世纪的我们80后,90后,甚至00后,尤其适用! 那 ...
零基础学习java必须要了解的学习路线
Java开发目前热火朝天,但是有传言说Java将被取代,当然那只是传言.今天小编来谈谈零基础学习Java必须了解的学习路线. 第一阶段:HTML+CSS 静态布局开始有人肯能会说我是做后端的,前端的 ...
simulink仿真及代码生成技术入门到精通_Simulink仿真零基础入门到精通实用教学教程自学全套...
Simulink仿真零基础入门到精通实用教学教程自学全套,以教程文字为主,毕业论文和报告均可以借鉴. Simulink是电气工程必学的模型仿真专业工具软件,非常的实用.小编在全网中搜索都没有找到非常 ...

零基础学习Vue3（保姆级教学）

文章目录

前言

一

1.1 vue介绍

1.2 mvc概念

1.3 创建一个应用实例

1.4 模板

1.5 vue常用指令 directive

零基础学习Vue3（保姆级教学）相关推荐

最新文章

热门文章