Vue入门基础语法概要

北风toto

已于 2024-03-28 17:27:24 修改

阅读量595

点赞数 16

分类专栏：次要的个人笔记 # Vue 文章标签： vue.js 前端 javascript

于 2024-01-31 09:38:19 首次发布

本文链接：https://blog.csdn.net/m0_46085118/article/details/127318342

版权

次要的个人笔记同时被 2 个专栏收录

67 篇文章 9 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue框架的基础语法，包括组件结构、数据绑定、CSS样式、事件处理、父子组件通信方法、路由参数传递和自定义指令。还涉及Vue中this的指向规则以及实例应用，适合初学者和进阶者参考。

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

一、Vue框架基础语法

el：挂载点
data：数据对象
常用内置指令，代码Demo演示和讲解
- v-text：纯文本
- v-html：解析html
- v-bind：（可替换为：），设置元素的属性
- v-model：获取和设置表单元素的值，双向绑定
- v-on：（可替换为@）为元素绑定事件，可以增加事件修饰符
- v-show：切换元素的显示形态
- v-if：判定条件，操作dom，切换元素的显示很隐藏
- v-else：如果为false, 当前标签才会输出到页面
- v-for：遍历数组/对象
- v-cloak：防止闪烁, 与css配合: [v-cloak] { display: none }

vue文件构成

一般由html，css，js组成，一个.vue文件即为一个组件。
组件的定义：实现应用中局部功能代码和资源的集合
虚拟dom，内存中的一个数据
配置对象，配置对象的key是不能随便改的
data，写法（对象式，函数式）
- 当为组件时，必须要使用函数式，不然容器报错。
- 箭头函数this为windows，不要写箭头函数
MVVM模型
- M：模型（model）：对应data的数据
- V：视图（view）：视图，也就是能直接用眼睛看见的网页页面
- VM：视图模型（viewmodel）：vue实例对象。
- ViewModel-（监听）——>Model（数据）
- ViewModel-（数据绑定）——>View（视图）
main.js为vue脚手架程序的入口程序
vue文件空格与tab键不能混用
写个vue.config.js修改vue隐藏配置文件中的属性

二、脚手架执行流程

执行npm run serve
找到main.js
- 引入vue，引入App.vue（它是所有容器的父组件）

三、vue组件

data函数式写法 data（）{ return{ msg: ‘测试信息’ } }
props属性传递参数
mixins属性引用js配置
- 全局写到main.js中
scoped 使样式范围为本组件
- lang=“less” 样式语言使用less
mounted（）生命周期方法
Vue生命周期详解
vue的mouted和created在使用时的区别

四、css样式写法

内部样式写法

div{
 color:red; /*内部样式写法*/
}

外部样式写法

<link rel="stylesheet" href="css文件路径"> <!--外部样式写法-->

通用选择器
- *{…}
- 修饰页面所有元素;效率低,尽量少用
```
*{
color: red;
}
```
元素选择器
- 元素名称{…}
- 定义元素名称所对应的一类元素.
```
	div{
	color: red;
	 }
```
类选择器
- .类名{…}
- 类名定义不能保函数字和特殊字符.
```
.any{
color: red;
}
```
id选择器
- #id值{…}
群组选择器
- 作用:定义一组选择器的公共样式
- 多个选择器之间用逗号分隔.
后代选择器
- 选择器1 选择器2 选择器3{…}
伪类选择器
- 同一个标签，根据用户的某种状态不同，有不同的样式；这就叫做“伪类”
- 伪类用 “:” 英文冒号来表示
- :hover (徘徊)鼠标放到链接上时的样式

五、Vue常用事件

@keyup.enter：输入框回车触发

六、Vue的父子组件通信(十种)

Vue的父子组件通信(十种)
父传子用：props
子传父用：$emit

七、vue路由传参的三种方式

【vue】vue路由传参的三种方式

八、Vue自定义指令

其他

Vue中this指向问题

在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）
this找属性或者方法，在当前没找到，将顺着原型寻找
VueComponent.prototype.proto==Vue.prototype，让组件实例对象可以访问到Vue原型上的属性、方法

实例以及解释，随便写写

var list = document.getElementById(‘list’);
mixins:[hunhe] 引用hunhe.js配置文件
npm view webpack versions 查看webpack版本
npm i less-loader@7 安装less-loader7版本
npm uninstall less-loader 卸载
npm install less@3.12.2 less-loader@4.1.0 --save-dev
beforeCreate() 生命周期函数，创建之前
Vue.prototype.$bus = this 安装全局事件总线
this.$bus.$emit 提交数据
this.$bus.$on 收数据
this.$bus.$off 解绑数据
Vue.config.productionTip = false，阻止 vue 在启动时生成生产提示。

ajax获取数据，放入方法参数response中

axios.get("https://autumnfish.cn/api/joke/list?num=6")
           .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })