MeowRain

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script setup lang="ts"> import { reactive, toRaw } from 'vue' let obj = reactive({ name: 'meowrain', like: 'jk' }) let change = () => { console.log(obj) console.log(toRaw(obj)) //解除响应式 } </script> <template> <div> <button @click="change">change</button> <p>obj-{{ obj }}</p> </div> </template> <style></style>

Vue toRef和toRefs妙用 当我们对reactive对象进行解构的时候，解构出来的数据是基本类型，不再具备响应式，没办法更改视图中的 按下按钮后，什么也没变 我们使用toRefs，就能把里面的数据一个个转换为响应式对象返回，再被解构，所有属性依然拥有响应式，还能修改 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <script setup lang="ts"> import { reactive, toRef, toRefs } from 'vue' let obj = reactive({ name: 'meowrain', like: 'jk' }) let {name,like} = toRefs(obj); let change = () => { name.value = "meows"; like.value = "luolita" console.log(name,like); } </script> <template> <div> <button @click="change">change</button> <p>obj-{{ obj }}</p> <p>Name-{{ name }}</p> <p>Like-{{ like }}</p> </div> </template> <style></style> 按下按钮，可以发现内容改变了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script setup lang="ts"> import { ref } from 'vue' const dom = ref<HTMLDivElement>() function change() { console.log(dom.value?.innerText) } </script> <template> <div> <button @click="change">change</button> <div ref="dom">Hello Meowrain</div> </div> </template> <style></style> 在元素上添加ref="变量名",script中写const dom = ref<HTMLDivElement>()，因为采用了setup语法糖，如果直接写在script标签中，得到的结果就是undefined,只有在函数中才能调用. 问题：vue3中reactive对象赋值，不能响应式变化 在使用vue3中，使用reactive创建的对象或者数组进行赋值时，可以正常赋值，但是不会触发响应式变化。 例子： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script setup lang="ts"> import { ref,reactive } from 'vue' let list = reactive<string[]>([]); let obj = reactive({}); function add(){ setTimeout(()=>{ obj = { name:'meowrain', age:20 } console.

声明响应式状态 ref()​ 在组合式 API 中，推荐使用 ref() 函数来声明响应式状态： 1 2 3 import { ref } from 'vue' const count = ref(0) ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回： 1 2 3 4 5 6 7 const count = ref(0) console.log(count) // { value: 0 } console.log(count.value) // 0 count.value++ console.log(count.value) // 1 要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们： 1 2 3 4 5 6 7 8 9 10 11 12 13 import { ref } from 'vue' export default { // `setup` 是一个特殊的钩子，专门用于组合式 API。 setup() { const count = ref(0) // 将 ref 暴露给模板 return { count } } } 注意，在模板中使用 ref 时，我们不需要附加 .

模板语法 文本插值 最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)： 1 <span>Message: {{ msg }}</span> 例子： 1 2 3 4 5 6 7 8 9 10 11 12 13 App.vue <script setup> const msg = 10; </script> <template> <div> <p>HelloWorld</p> <br> <p>{{ msg }}</p> </div> </template> <style scoped> </style> 原始 HTML 双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令： 1 2 <p>Using text interpolation: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> 例子： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script setup> const rawHtml = `<span style="color: red">This should be red.

创建一个 Vue 应用 & 了解vue 1 npm create vue@latest 默认目录结构 vscode环境安装 第一个项目 删除无用文件，重新改下App.vue和router/index.js里面的内容 了解main.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app') 每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例： 根组件 我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。 挂载应用 应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

Javascript 面向对象(OOP) 语法 1 2 3 4 5 class 类名 { constructor(){ } } 举例: 1 2 3 4 5 6 7 8 9 10 11 //Person类专门用来创建人的对象 class Person { constructor(name,age,hooby){ this.name = name; this.age = age; this.hooby = hooby; } } //调用构造函数创建对象创建对象 const xiaoming = new Person("xiaoming",18,'programming'); console.log(xiaoming) instanceOf用法 可以用来检查一个对象是否是由某个类创建,如果某个对象是由某个类创建,那么我们称这个对象是这个类的实例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //Person类专门用来创建人的对象 class Person { constructor(name,age,hooby){ this.

Java面向对象(高级) 面型对象高级 面型对象中级 面型对象初级 类变量/类方法 类变量/类方法-博客园 类变量快速入门 介绍 类变量（又叫静态变量）是该类的所有对象共享的变量，任何一个该类的对象去访问它时，取到的都是相同的值，同样任何一个该类的对象去修改它时，修改的也是同一个变量。 定义类变量：访问修饰符 static 数据类型 变量名; 静态变量是类加载的时候，就创建了,所以我们没有创建对象实例 定义一个变量 count ,是一个类变量(静态变量) static 静态 该变量最大的特点就是会被Child 类的所有的对象实例共享 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 package cn.meowrain.classVariable; public class var01 { public static void main(String[] args) { Child child01 = new Child("mike"); Child child02 = new Child("john"); child01.count++; child02.count++; System.out.println("共有" + Child.count + "个小朋友参加了游戏"); } } class Child { private String name; public static int count = 0; public Child(String name){ this.

Java面向对象基础（中级） Consolas, ‘Courier New’, monospace 包 包的三大作用 1.区分相同名字的类 2.当类很多的时候，可以很好地管理类 3.控制访问范围 包的基本语法 1 2 1.package 关键字 2. com.xxxx 表示包名 包的本质分析 包的本质就是创建不同的文件夹和目录来保存类文件 包的命名 只能包含数字，下划线，小圆点，但不能用数字开头，也不能是关键字和保留字 命名规范： com.xxxx.usr 用户模块 com.xxxx.utils 工具模块 域名反着写，最后加上模块名 常用的包 引入包 语法：import 包名.类名 案例： 1 2 3 4 5 6 7 8 9 10 11 package cn.meowrain.Object_.package_; import java.util.Scanner; public class package_01 { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int a = sc.nextInt(); System.out.println(a); } } 访问修饰符 封装 封装介绍 封装就是把抽象出的数据[属性]和对数据的操作**[方法]封装在一起，数据被保护在内部，程序的其它部分只有通过被授权的操作[方法]**，才能对数据进行操作

Java面向对象基础(初级) 对面向对象和面向过程的理解 谈谈你对面向过程和面向对象的理解_智十七°的博客-CSDN博客_面向对象和面向过程的理解 面向对象的三大特征 封装 (Encapsulation) 继承 (Inheritance) 多态 (Polymorphism) 初识对象和类 初次使用对象和类 如下，在下面这个代码中，我创建了一个猫类，然后利用猫类创建了两个猫对象，一个赋值给cat01，一个赋值给cat02 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 package cn.meowrain.Object_; public class relean_01 { public static void main(String[] args) { //创建两猫对象 Cat cat01 = new Cat(); cat01.name = "小花"; cat01.age = 1; cat01.color = "花色"; Cat cat02 = new Cat(); cat02.