Vue学习日记1

最新推荐文章于 2024-07-19 10:30:06 发布

heowhenfo3heyt03rh

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量1.3k

点赞数 42

分类专栏：黑马Vue学习日记文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/LFhsmd/article/details/137354774

版权

黑马Vue学习日记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

视频地址

Vue是什么

Vue是一个用于构建用户页面的渐进式框架：学一点用一点

声明式渲染，组件系统，客户端路由VueRouter，大规模状态管理Vuex，构建工具Webpack/Vite

简介 | Vue.js (vuejs.org)

快速上手

"el"制定挂载点
"data"提供数据

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
     <!-- 
        创建Vue实例，初始化渲染
        1.准备容器（Vue所管理的范围）
        2.引包（开发版本包/生产版本包）官网
        3.创建实例
        4.添加配置项=>完成渲染
      -->   
    <div id="app">
        {{msg}}
    </div>
    <!-- 引入开发版本包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //一旦引入核心包，在全局环境，就有了Vue构造函数
        const app=new Vue({
            //通过el配置器，制定Vue管理的是哪个盒子
            el:'#app',
            //通过data提供数据
            data:{
                msg:'Hello'
            }
        })
    </script>
    </body>
</html>

插值表达式{{}}
- 作用：利用表达式进行插值
- 使用的数据必须存在data，支持的是表达式而非语句，不能在属性标签中使用{{}}插值
数据的响应式处理：数据一旦变化，视图自动更新
- 访问数据：实例.属性名；修改数据：实例.属性名=新值

Vue开发者工具

下载6.5.0 Vue.js devtools，打开网站扩展的开发者模式安装，详细信息中设置允许访问文件网址
打开Vue运行的页面，点击root查看测试

Vue指令

指令：带有v-前缀的特殊标签属性
- <div v-html="str"></div>
  - 插值表达式并不具备解析标签的能力
API 参考 | Vue.js (vuejs.org)
- 内置内容，指令

v-show/v-if

都是控制显示true和隐藏false
v-show（简单的显示隐藏）：其实是加上了css样式来控制
- 适合频繁切换显示隐藏
v-if（条件渲染）：根据判断条件控制元素的创建和移除
- 适合不频繁切换的场景

v-else/v-else-if

作用：辅助v-if进行判断渲染

v-on

作用：注册事件=添加监听+提供处理逻辑
语法：
- v-on：事件名="内联语句"
  - ```
  <button v-on:click="count++">+</button>
```
- "v-on:"可以替换为"@"
- v-on：事件名="methods中的函数名"
  - ```
  <button @click="fn">-</button>
  //fn()是methods中的方法
```
- data中的数据，不能在js代码中直接使用（内联语句可以直接用），可以使用this来使用（不用考虑名称变化的问题）

v-on调用传参

```
<button @click="fn()">-</button>
```
- 可以在括号中传参

v-bind

动态设置html的标签属性
v-bind:属性="表达式"
v-bind:属性="表达式"可以省略为:属性="表达式"

v-for

基于数据进行循环，可以多次渲染整个元素
语法：v-for="(item,index) in 数组"
- v-for="item in 数组"
图书馆案例：filter()不会改变原数组，需要赋值
v-for......:key="item.id"
- 给当前列表项加唯一标识，便于正确排序复用
- 不加key就会原地修改元素
- key的值只能是字符串/数字，必须具有唯一性