前言 Java后端技术点 StringUtils常用API 学习时笔记(Linux) 学习时笔记(Git) 学习时笔记(Docker) 学习时笔记(Vue2+3) 1.快速上手+插值表达式+指令上 2.指令下+计算属性+监听器 3.Vue 核心技术与实战面试宝典学习时笔记(JavaScript) 学习时笔记(JavaWeb) 学习时笔记(Java) 学习时笔记(Python)

1.Vue 快速上手

概述
- Vue 是一个用于构建用户界面（基于数据动态渲染页面）的渐进式框架（循环渐进的学习）
- 优点：大大提高开发效率
- 缺点：需要理解记忆规则 -> 官网

创建 vue 实例，初始化渲染

准备容器
引入包
创建 Vue 实例
指定配置项 -> 渲染数据

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<body>
    <div id="app">
        <!--渲染的逻辑代码-->

    </div>
</body>
<script>
    const app = new Vue({
        // 通过 el 配置器，指定 Vue 管理的盒子
        el:'#app',
        // data 提供谁
        data:{
            message:'Hello Vue'
        }
    })
</script>

插值表达式

是一种 Vue 的模板语法
- 作用：利用表达式进行插值，渲染到页面当中（是可以被求值的代码，JS引擎会将其计算出一个结果）
- 语法：
- 注意点：
  - 使用的数据必须存在
  - 支持的是表达式，而不是语句
  - 不能在标签属性中使用插值
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<body>

  <div id="app">
    <h1></h1>
  </div>

</body>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      name: 'haonan',
      data: 18,
    }
  })
</script>
```
响应式特性

数据改变，视图会自动更新

聚焦于数据 -> 数据驱动视图（就是使用 Vue 开发，只关注业务的核心逻辑，根据业务修改数据即可）
开发者工具：插件调试 Vue 引用
- 通过谷歌应用商店安装
- 极简插件：下载 -> 开发者模式 -> 拖拽安装 -> 插件详情允许访问文件
Https://chrome.zzzmh.cn/index
- 打开 Vue 运行的页面，调试工具中 Vue 栏，可以查看修改数据进行调试

2.Vue 指令

概述

Vue 会根据不同的指令，针对标签实现不同的功能
指令：带有 v- 前缀的特殊表亲属性

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<body>
  <div id="app">
    <div v-html="message"></div>
  </div>
</body>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello1'
    }
  })
</script>

v-show
- 作用：控制元素显示隐藏
- 语法： v-show = "表达式"【表达式值 true 显示，false 隐藏】
- 原理：切换 display: none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if = "表达式" 【表达式值 true 显示，false 隐藏】
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<body>
    <div id="app">
        <div v-show="flag">v-show 控制的盒子</div>
        <div v-if="flag">v-if 控制的盒子</div>
    </div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            flag:false
        }
    })
</script>

v-else、v-else-if

作用：辅助 v-if 进行判断渲染
语法： v-else v-else-if = "表达式"
注意：必须紧挨着 v-if 来使用

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<body>
  <div id="app">
    <p v-if="gender === 1">性别：男</p>
    <p v-else>性别：女</p>
    <hr>
    <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score >= 70">成绩评定B：奖励周末打游戏</p>
    <p v-else-if="score >= 60">成绩评定C：奖励零食</p>
    <p v-else>成绩评定D：奖励一大比兜</p>
  </div>
</body>
<script>
  const app = new Vue({
    el: '#app',
    data:{
      gender: 1,
      score: 80
    }
  })
</script>

v-on

作用：注册事件 = 添加监听 + 提供处理逻辑
语法：v-on:事件名 = "内联语句" || v-on:事件名 = "methods中的函数名"
简写：@事件名 = "fn"

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<body>
    <div id="app">
        <button v-on:click="count++">+</button>
        <span></span>
        <!-- 简写-->
        <button @click="count--">-</button>
    </div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            count: 100
        }
    })
</script>

v-on 传递参数

<body>
<div id="app">
    <div class="box">
        <h3>小黑自动售货机</h3>
        <button @click="buy(5)">可乐5元</button>
        <button @click="buy(10)">咖啡10元</button>
    </div>
    <p>银行卡余额：元</p>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            money: 100
        },
        methods: {
            buy(price) {
                this.money -= price
            }
        }
    })
</script>

v-bind

作用：动态的设置 html 标签属性【src、url、title】
语法：v-bind:属性名 = "表达式"
简写：:属性名 = "表达式"

示例

<script src="./vue.js"></script>
<body>
  <div id="app">
    <button v-show="index > 0" @click="index--">上一页</button>
    <div>
      <img :src="list[index]" alt="">
    </div>
    <button v-show="index < list.length - 1" @click="index++">下一页</button>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ],
        index: 0
      },
    })
  </script>
</body>

v-for

作用：基于数据循环，多次渲染整个元素
语法：v-for = "(item,index) in 数组" || v-for = "item in 数组"

<script src="./vue.js"></script>
<body>
  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <li v-for="(item,index) in list" :key="item.id"> -- </li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨']
      }
    })
  </script>
</body>

案例：

<div id="app">
    <h3>小黑的书架</h3>
    <ul>
        <li v-for="item in booksList">
            <span></span>
            <span></span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            booksList: [
                {id: 1, name: '《红楼梦》', author: '曹雪芹'},
                {id: 2, name: '《西游记》', author: '吴承恩'},
                {id: 3, name: '《水浒传》', author: '施耐庵'},
                {id: 4, name: '《三国演义》', author: '罗贯中'}
            ]
        },
        methods: {
            del(id) {
                this.booksList = this.booksList.filter(item => item.id != id)
            }
        }
    })
</script>
</body>

V-for 中的 key
- 语法： key = "唯一标识"
- 作用：给列表项添加唯一表示，便于 Vue 进行列表项的正确排序复用

v-for 的默认行为会尝试原地修改元素（就地复用）

v-model

作用：给表单与阿奴使用，双向绑定数据
语法：v-model = "变量"

<script src="./vue.js"></script>
<body>
<div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
        },
        methods: {
            login() {
                console.log(this.username, this.password)
            },
            reset() {
                this.username = ""
                this.password = ""
            }
        }
    })
</script>
</body>

3.综合案例

功能需求

列表渲染
删除功能
添加功能
底部统计和清空

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input placeholder="请输入任务" class="new-todo" v-model="content"/>
    <button class="add" @click="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list" :key="item.id">
        <div class="view">
          <span class="index">NaN.</span> <label></label>
          <button class="destroy" @click="del(item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show="list.length > 0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong>  </strong></span>
    <!-- 清空 -->
    <button class="clear-completed" @click="clear">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script>

  const app = new Vue({
    el: '#app',
    data: {
      list: [
        {id: 1, name: "起床"},
        {id: 2, name: "上班"},
        {id: 3, name: "午睡"},
      ],
      content: ""
    },
    methods: {
      del(id){
        this.list = this.list.filter(item => item.id != id)
      },
      add(){
        if(this.content.trim() === ''){
          alert("未输入要添加的内容")
        }
        this.list.push({id: this.list.length + 1,name: this.content})
        this.content = ""
      },
      clear(){
        this.list = []
      }
    }
  })
</script>
</body>

马浩楠的技术博客

1.Vue 快速上手

2.Vue 指令

3.综合案例

results matching ""

No results matching ""