vue重修001

文章目录

版权声明
一 Vue初识
- 1. 构建用户界面
- 2. 渐进式
- - Vue的两种开发方式：
- 3.框架
二创建Vue实例
三插值表达式 {{}}
四响应式特性
- 1. 响应式
- 2.如何访问和修改 data中的数据（响应式演示）
五 Vue开发者工具安装
六 Vue中的常用指令
七内容渲染指令
八条件渲染指令
九事件绑定指令
十属性绑定指令
十一小案例-波仔的学习之旅
十二列表渲染指令
十三小案例-小黑的书架
十四 v-for中的key
十五双向绑定指令
十六综合案例-小黑记事本

版权声明

本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明，所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用，并非商业用途。
我在整理学习笔记的过程中尽力确保准确性，但无法保证内容的完整性和时效性。本博客的内容可能会随着时间的推移而过时或需要更新。
若您是黑马程序员或相关权利人，如有任何侵犯版权的地方，请您及时联系我，我将立即予以删除或进行必要的修改。
对于其他读者，请在阅读本博客内容时保持遵守相关法律法规和道德准则，谨慎参考，并自行承担因此产生的风险和责任。本博客中的部分观点和意见仅代表我个人，不代表黑马程序员的立场。

一 Vue初识

Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架
Vue2官网：https://v2.cn.vuejs.org/

1. 构建用户界面

基于数据渲染出用户可以看到的界面

2. 渐进式

渐进式——循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：

Vue核心包开发

场景：局部模块改造
Vue核心包&Vue插件&工程化

场景：整站开发

3.框架

框架：就是一套完整的解决方案
栗子
- 如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。
- 提到框架，不得不提一下库。库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

下图是库和框架的对比。
在这里插入图片描述

框架的特点：有一套必须让开发者遵守的规则或者约束

学框架就是学习这些规则官网

二创建Vue实例

Vue框架可以基于数据帮助我们渲染出用户界面，那应该怎么做呢？

在这里插入图片描述

比如就上面这个数据，基于提供好的msg 怎么渲染后右侧可展示的数据呢？

核心步骤（4步）：

准备容器
引包（官网） — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项，渲染数据
1. el:指定挂载点
2. data提供数据

<body>
    <div id="app">
      <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
      <h1>{{ msg }}</h1>
      <a href="#">{{ count }}</a>
    </div>
	<!--必须使用双标签引入vue.js文件 这里使用在线文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
	
    <script>
      // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
      const app = new Vue({
        // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
        el: '#app',
        // 通过 data 提供数据
        data: {
          msg: 'Hello 传智播客',
          count: 666
        }
      })
    </script>
</body>

三插值表达式 {{}}

插值表达式是一种Vue的模板语法，可以用插值表达式渲染出Vue提供的数据

在这里插入图片描述

作用：利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

四响应式特性

1. 响应式

简单理解就是数据变，视图对应变。

2.如何访问和修改 data中的数据（响应式演示）

data中的数据, 最终会被添加到实例上

① 访问数据： “实例.属性名”

② 修改数据： “实例.属性名”= “值”

在这里插入图片描述

聚焦于数据 → 数据驱动视图使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

五 Vue开发者工具安装

通过谷歌应用商店安装（国外网站）
极简插件下载（推荐） https://chrome.zzzmh.cn/index

安装步骤：

在这里插入图片描述

安装之后可以F12后看到多一个Vue的调试面板

在这里插入图片描述

六 Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。

作用：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识。（不练就废的那种哦??）

七内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

v-text（类似innerText）
- 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容
v-html（类似 innerHTML）
- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

<!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>

    <div id="app">
      <h2>个人信息</h2>
      <!--// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可-->
      <p v-text="uname">姓名：</p>
      <p v-html="intro">简介：</p>
    </div>

    <script src="./vue.js"></script>
      <script>
        const app = new Vue({
          el:'#app',
          data:{
            uname:'张三',
            intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
          }
        })
      </script>

</body>
</html>

在这里插入图片描述

八条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-show
1. 作用：控制元素显示隐藏
2. 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
3. 原理：切换 display:none 控制显示隐藏
4. 场景：频繁切换显示隐藏的场景
v-if
1. 作用：控制元素显示隐藏（条件渲染）
2. 语法： v-if= “表达式” 表达式值 true显示， false 隐藏
3. 原理：基于条件判断，是否创建或移除元素节点
4. 场景：要么显示，要么隐藏，不频繁切换的场景
示例代码：

<!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>
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  </style>
</head>
<body>

  <div id="app">
    <div class="box" v-show="flag">我是v-show控制的盒子</div>
    <div class="box" v-if="flag">我是v-if控制的盒子</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      }
    })
  </script>

</body>
</html>

在这里插入图片描述

v-else 和 v-else-if
1. 作用：辅助v-if进行判断渲染
2. 语法：v-else v-else-if=“表达式”
3. 需要紧接着v-if使用

示例代码：

<!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>

  <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>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: 1,
        score: 95
      }
    })
  </script>

</body>
</html>

在这里插入图片描述

九事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

<button v-on:事件名=“内联语句”>按钮
<button v-on:事件名=“处理函数”>按钮
<button v-on:事件名=“处理函数(实参)”>按钮
v-on: 简写为 @

内联语句

<!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>
  <div id="app">
    <h1>使用内联语句</h1>
    <button @click="count--" >-</button>
    <span >{{count}}</span>
    <button @click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

事件处理函数

注意：
- 事件处理函数应该写到一个跟data同级的配置项（methods）中
- methods中的函数内部的this都指向Vue实例

<!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>
  <div id="app">
    <button @click="fn()">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods:{
        fn () {
          // this都指向当前实例
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
如果传递了参数，则实参 $event 表示事件对象，固定用法。

在这里插入图片描述

 <!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>
  <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>
</head>
<body>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="buy($event,5)">可乐5元</button>
      <button @click="buy($event,10)">咖啡10元</button>
    </div>
    <p>银行卡余额：{{money}}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 1000
      },
      methods: {
        buy(event,price){
          console.log("事件触发了！", event);
          this.money-=price;
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

十属性绑定指令

**作用：**动态设置html的标签属性比如：src、url、title
语法：**v-bind:**属性名=“表达式”
**v-bind:**可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

<img v-bind:src="url" />
<img :src="url" /> （v-bind可以省略）

<!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>
  <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })

  </script>
</body>
</html>

在这里插入图片描述

十一小案例-波仔的学习之旅

需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

数组存储图片路径 [‘url1’,‘url2’,‘url3’，…]
准备下标index 去数组中取图片地址。
通过v-bind给src绑定当前的图片地址
点击上一页下一页只需要修改下标的值即可
当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

<!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>
  <div id="app">
    <button v-show="index >0" @click="index--" class="button">上一页</button>
    <div>
      <img :src="list[index]" >
    </div>
    <button v-show="index < list.length - 1" @click="index++" class="button">下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        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',
        ]
      }
    })
  </script>
</body>
<style>
  .button {
    margin-left: 100px;
    background-color: #5EB69C;
    border-radius: 5px;
  }
</style>
</html>

在这里插入图片描述

十二列表渲染指令

v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

例子

<!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>

  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <li v-for="(item,index) in list">
        {{index+1}}--{{item}}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨']
      }
    })
  </script>
</body>
</html>

十三小案例-小黑的书架

需求：

1.根据左侧数据渲染出右侧列表（v-for）

2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）

在这里插入图片描述

代码：

<!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>
  <div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="(item,index) in booksList" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <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) {
          // 通过id进行删除数组中的对应项 → filter(不会改变原数组)
          // filter: 根据条件，保留满足条件的对应项，得到一个新数组。
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>
</html>

十四 v-for中的key

语法： key=“唯一值”

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

**原因：**Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

十五双向绑定指令

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

**语法：**v-model=“变量”

**需求：**使用双向绑定实现以下需求

点击登录按钮获取表单中的内容
点击重置按钮清空表单中的内容

<!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>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
      background: linear-gradient(45deg, #00bcd4, #ff4081, #fdd835, #4caf50);
    }

    .container {
      text-align: center;
      padding: 2rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-image: linear-gradient(135deg, #ff9a8b, #fad0c4);
    }


    .input-field {
      display: flex;
      align-items: center;
      margin-bottom: 1.5rem;
      text-align: left;
    }

    .input-field label {
      margin-right: 1rem;
    }

    .input-field input {
      padding: 0.5rem;
      border: none;
      border-radius: 5px;
      border: 2px solid #007bff;
      transition: border-color 0.2s ease;
    }

    .input-field input:focus {
      outline: none;
      border-color: #ff4081;
    }

    .button-group {
      display: flex;
      justify-content: center;
      margin-top: 1.5rem;
    }

    .button-group button {
      padding: 1rem 1.5rem;
      margin: 0.5rem;
      color: white;
      background-color: #007bff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      height: 5rem;
      width: 7rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .button-group button span {
      font-size: 1.2rem;
      line-height: 1;
      display: block;
    }
  </style>
</head>

<body>

<div id="app" class="container">
  <div class="input-field">
    <label for="username">Username:</label>
    <input v-model="username" type="text" id="username">
  </div>
  <div class="input-field">
    <label for="password">Password:</label>
    <input v-model="password" type="password" id="password">
  </div>
  <div class="button-group">
    <button @click="login"><span>Log In</span></button>
    <button @click="reset"><span>Reset</span></button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<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>
</html>

在这里插入图片描述

十六综合案例-小黑记事本

功能需求：

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

<!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" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input placeholder="请输入任务" class="new-todo" v-model="todoName"/>
    <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">{{index+1}}.</span>
          <label>{{item.name}}</label>
          <button @click="del(item.id)" class="destroy"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show="list.length>0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
    <!-- 清空 -->
    <button  @click="clear" class="clear-completed">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      todoName: '',
      list: [
        { id: 1, name: '跑步一公里' },
        { id: 2, name: '跳绳200个' },
        { id: 3, name: '游泳100米' },
      ]
    },
    methods:{
      del(id){
        this.list=this.list.filter(item=>item.id!==id)
      },
      add(){
        if(this.todoName.trim()===''){
          alert("请输入任务名称")
          return
        }
        this.list.unshift({
          id: +new Date(),
          name: this.todoName
        })
        this.todoName=''
      },
      clear() {
        this.list=[]
      }
    }
  })

</script>
</body>
</html>

在这里插入图片描述文章来源地址https://uudwc.com/A/jryp8

vue重修001

文章目录

版权声明

一 Vue初识

1. 构建用户界面

2. 渐进式

Vue的两种开发方式：

3.框架

二 创建Vue实例

三 插值表达式 {{}}

四 响应式特性

1. 响应式

2.如何访问 和 修改 data中的数据（响应式演示）

五 Vue开发者工具安装

六 Vue中的常用指令

七 内容渲染指令

八 条件渲染指令

九 事件绑定指令

十 属性绑定指令

十一 小案例-波仔的学习之旅

十二 列表渲染指令

十三 小案例-小黑的书架

十四 v-for中的key

十五 双向绑定指令

十六 综合案例-小黑记事本

二创建Vue实例

三插值表达式 {{}}

四响应式特性

2.如何访问和修改 data中的数据（响应式演示）

七内容渲染指令

八条件渲染指令

九事件绑定指令

十属性绑定指令

十一小案例-波仔的学习之旅

十二列表渲染指令

十三小案例-小黑的书架

十五双向绑定指令

十六综合案例-小黑记事本