2024年没有Java基础直接学vue

大家好，我是讯享网，很高兴认识大家。

VUE 概述

本文意在快速上手vue，内部细节一概不管，主打能用会用，能出活。

引入 VUE

可以把vue理解成一个别人写的一串代码，可以直接下载引入，也可以通过工程化,npm引入。

讯享网

具体参考“如何创建一个vue项目”

快速入门

直接引入

讯享网

总结：

想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；

root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法；

root 容器里的代码被称为【Vue模板】；

Vue 实例和容器是一一对应的；

真实开发中只有一个Vue实例，并且会配合着组件一起使用；

{{ xxx }} 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性；

一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js 表达式 和 js 代码(语句)

js 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

a

a+b

f()

x === y ? ‘a’ : ‘b’

js 代码(语句)

if(){}

for(){}

js表达式是js代码的子集，它属于特殊的js代码

模板语法

Vue 的模板语法分为插值语法和指令语法，就是把 DOM 数据和实例数据联系起来

插值语法：

作用：用于解析标签体内容

指令语法：

作用：用于解析标签（解析标签属性、解析标签体内容、绑定事件……）

讯享网

总结：

Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

⭐重点⭐

其实我一直在想，有没有什么办法可以就是说，三言两语解决基础的内容，让人快速上手，我想了想这样不OK，就拿这个模板语法来说，如果不知道getelementbyid，你就不知道VUE的数据DOM分离，你也就不理解它是什么，为什么，怎么样。所以我以后文章方向还是要把基础打扎实。

数据绑定

总结：

Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

数据劫持

一般用不到

事件处理

事件处理需要用到指令，同时还需要搭配一起使用

1.通过点击事件修改h1中的值

2.事件修饰

：阻止事件的默认行为，相当于（常用）
：阻止事件冒泡，相当于（常用）
：事件只触发一次（常用）
：开启事件的捕获模式
：只有event.target是当前操作元素时，才触发事件（可用来阻止事件冒泡）
：事件的默认行为立即执行，无需等待事件回调再执行
：vue中如果你想在某个组件的根元素上绑定事件，需要使用native修饰符示例：

计算属性

计算属性是什么？
计算属性是Vue对插值表达式的一种优化，通过关键字将一个属性进行计算，然后再赋值给Vue对象，让Vue对象直接使用进行引用

为什么要使用计算属性？
在使用插值表达式进行取值时，有时候我们想要对表达式进行各种各样的操作（使用链式编程），可能会导致中的值十分复杂，虽然不会报错，但是会严重影响代码的可读性！这就需要使用计算属性来解决这种问题了。

方式一：直接使用插件表达式实现

备注：这里的例子过于简单，其实直接使用插件表达式也是没毛病的，但如果在实际开发中遇到需要在插件表达式中进行大量函数调用时，建议使用计算属性

方式二：使用methods进行实现

方式三：使用计算属性实现

备注：计算属性底层也是使用数据劫持实现的，需要注意的是计算属性属于Vue对象（可以直接通过Vue调用），但不属于_data

知识拓展

methods实现和计算属性实现的比较：使用计算属性实现性能更高，因为计算属性使用了缓存技术，当同一时间内调用同一个计算属性，且这段时间内该计算不发生该改变，不需要执行get方法，而是直接去缓存中取数据，避免了重复计算；而methods就需要重复调用方法

总结

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

侦听器

什么是监视属性？
也称侦听属性，是指使用对于属性进行监控，类似于Java中的监听器

监视属性的作用？
通过检测属性的改变，触发相应的事件

动态绑定样式

意义一般

条件渲染

常用

循环

后记

还有很多，但是要写一个基础的，这就够了，后面我会更新具体的文章