MeowRain

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script setup lang="ts"> import {watch,ref} from 'vue' let source = ref(''); let length = ref(0); watch(source,(newVal,oldVal)=>{ console.log(oldVal+"发生变化\n"); console.log("新值为："+newVal); length.value = source.value.length; }) </script> <template> <input type="text" v-model="source" /> <span>{{ length }}</span> </template> <style></style> 也可以监听一个值，当发生变化时候进行异步请求，刷新数据 watch监听属性

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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 <script setup lang="ts"> import { ref, computed, reactive } from 'vue' type Data = { name: string price: number num: number } const data = reactive<Data[]>([ { name: 'banana', price: 12, num: 20 }, { name: 'apple', price: 20, num: 100 }, { name: 'orange', price: 10, num: 200 }, { name: 'watermelon', price: 40, num: 20 } ]) const del = (index: number) => { data.

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.