【VUE学习】Vue基础学习
vue学习笔记
-
声明式渲染
<script setup> // 声明式渲染 就是先声明一下在哪个位置需要什么数据 // 导出的意思 export default{ data() { return{ num:0 } }， methods: { // 这里可以定义一些方法这样就可以有操作 // this就是指向 当前的一个实例 这里就是说是上面的那个num this.num } } </script> <template> <div> <!--就好像在这里声明了一个空格说 我要"num"这个数据--> <p>{{num}}</p> </div> </template> -
在main.js文件中的操作
// 这些就是一些配置文件，就是提前定义然后被引用 // 从vue中引入createApp import { createApp } from 'vue' import './style.css' // 从App.vue 中引入 App 这里需要注意， // 因为去App.vue找不到App 其实代指的是App.vue 整个文件都被命名了 import App from './App.vue' // 因为之前引入了 然后创建app createApp(App).mount('#app') -
模板语法
<!-- 这里其实官网讲得很好 --> <!-- 数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值： Mustache 翻译为胡子，大括号确实像胡子 --> <span>Message: {{ msg }}</span> <!-- 通过使用 v-once 指令，你也能执行一次性地插值， 当数据改变时，插值处的内容不会更新。 但请留心这会影响到该节点上的其它数据绑定： --> <span v-once>这个将不会改变: {{ msg }}</span> <!-- v-bind 修改属性 --> <script setup> // 声明式渲染 就是先声明一下在哪个位置需要什么数据 // 导出的意思 export default{ data() { return{ num:0, id:"d1", url:"url" }; }, methods: { // 这里可以定义一些方法这样就可以有操作 // this就是指向 当前的一个实例 这里就是说是上面的那个num // this.num }, } </script> <template> <!-- 可以动态地显示 --> <div v-bind:id="id"> <!-- 这样就可以动态地显示图片 --> <!-- 可以显示一些自定义的东西 比如说根据用户拼接出来一个什么东西 --> <img v-bind:src=“url”> <!-- v-bind 语法糖 --> <img :src=“url”> <!-- v-on:click 语法糖表达形式 @click --> <!-- 注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。 <a v-bind:[attributeName]="url"> ... </a> --> </div> </template> <!-- 建议读官方文档 --> -
data()和methods
data是用来初始化数据的
methods 里面写一些函数，方法。
防抖功能 顾名思义就是有一些只使用一次的方法 防止你误触发的特殊定义
节流也差不多就是为了让你尽可能的少写代码 -
计算和监听
模板内表达式就是说可以直接在标签里面进行简单运算，
如果步骤很简单 例如 data+1 这样的逻辑并不复杂的可以直接在标签里面表示=<span>{{ author.books.length > 0 ? ‘Yes’ : ‘No’ }}</span>=
<div id="computed-basics"> <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span> </div> <script> Vue.createApp({ data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, // 在组件中 methods: { // 每次调用都会重复计算 calculateBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } }， computed: { // 计算属性的 getter 只要依赖值不变就不会重新计算 能够提高计算性能 // 每一个计算属性都有getter 和setter 更改调用属性的时候调用set方法 // get 在调用属性的时候自动执行 publishedBooksMessage() { // `this` 指向 vm 实例 return this.author.books.length > 0 ? 'Yes' : 'No' } } }).mount('#computed-basics') // 计算属性将基于它们的响应依赖关系缓存 </script>监听
<script> // watch 监听，就是用这个方法来监听后台事件 export default { data() { return { message: "hello world", age: 0, }; }, methods: { }, watch: { message: { // 初始化的时候调用函数 immediate: true } //监听数据的变化 异步操作 // 监听对象属性变化就使用深度监听 // deep: true 表示开始深度监听 并且是向下遍历的 } } </script> <template> <div> </div> </template> -
Class 和 style
动态地切换class
<!-- 我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class： --> <div :class="{ active: isActive }"></div>style
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <!-- 官方文档讲解很详细 --> <script> data() { return { styleObject: { color: 'red', fontSize: '13px' } } } </script> -
条件渲染
-
列表渲染
把数组映射为一组元素，
<!-- 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 --> <div> <ul id="array-rendering"> <li v-for="item in items"> {{ item.message }} </li> </ul> </div> <script> Vue.createApp({ data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } }).mount('#array-rendering') </script> <!-- 加一个key的值 --> -
数组更新检测
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
- push() 给数组中末尾添加元素
- pop() 删除数组最末尾的元素
- shift() 删除数组的第一位
- unshift() 从数组的收尾添加元素
- splice() 删除元素 插入元素 替换元素
- sort() 排序
- reverse() 翻转
-
事件处理
监听事件 点击事件
多事件处理<!-- 这两个 one() 和 two() 将执行按钮点击事件 --> <button @click="one($event), two($event)"> Submit </button> <script> // ... methods: { one(event) { // 第一个事件处理器逻辑... }, two(event) { // 第二个事件处理器逻辑... } } </script>条件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止单击事件继续冒泡 --> <a @click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form @submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a @click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form @submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div @click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div @click.self="doThat">...</div>还有很多 自己看吧
-
表单输入绑定 v-model
绑定数据 双向绑定
- .lazy 本来双向绑定是实时的 但是为了节省性能可以迟一点显示
- .number 用户的输入转为数据类型
- .trim 自动过滤用户输入的首尾空白字符
-
组件化开发！！！
就是提高复用
我们编辑一个组建 然后import到主要的页面上 vue3 setup就不需要引入
**组件都有自己的数据** 不能调用其他组件的数据
在父组件 应用子组件 每次应用都像是new了一个新的对象
`Prop` 向子组件传递数据 所有的 `Prop`都使得其父子 `Prop` 之间形成了一个单向下行绑定：父级 `Prop` 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
子传父 使用**监听子组件事件** 现在子组件中定义 然后`$emit`方法来传值
```html
<!-- 可以传递动态值或者静态值 -->
<!-- 父组件访问子组件 $refs -->
<!-- 子组件访问父组件 $parent -->
<!-- 子组件访问根组件 $root -->
```
-
插槽
<!-- 这个定义在子组件 --> <button class="btn-primary"> <slot></slot> </button> <!-- 渲染 父组件 --> <button class="btn-primary"> Add todo </button> -
生命周期
-
组合式api
将同一个逻辑关注点的代码收集在一起
<script> // src/components/UserRepositories.vue import { toRefs } from 'vue' import useUserRepositories from '@/composables/useUserRepositories' import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch' import useRepositoryFilters from '@/composables/useRepositoryFilters' export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { user: { type: String, required: true } }, setup(props) { const { user } = toRefs(props) const { repositories, getUserRepositories } = useUserRepositories(user) const { searchQuery, repositoriesMatchingSearchQuery } = useRepositoryNameSearch(repositories) const { filters, updateFilters, filteredRepositories } = useRepositoryFilters(repositoriesMatchingSearchQuery) return { // 因为我们并不关心未经过滤的仓库 // 我们可以在 `repositories` 名称下暴露过滤后的结果 repositories: filteredRepositories, getUserRepositories, searchQuery, filters, updateFilters } } } </script> -
router
改变url但是不会进行一个整体的刷新
未完待续
1392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
