Vue2-1

Vue快速上手

什么是Vue

概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面的渐进式 框架

Vue2官网：

1.什么是构建用户界面

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

2.什么是渐进式

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

Vue的两种开发方式：

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

3.什么是框架

所谓框架：就是一套完整的解决方案

举个栗子

如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库。

库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

下图是库和框架的对比。

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

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

创建Vue实例

核心步骤（4步）：

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

插值表达式

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

  插值表达式：Vue的一种模板语法
  作用：利用 表达式 进行插值渲染
  语法：{{ 表达式 }}

  注意点：
    1. 使用的数据要存在
    2. 支持的是表达式，不是语句  if  for
    3. 不能在标签属性中使用 `{{ }}`

响应式

什么是响应式呢？数据改变，视图自动更新使用Vue开发→专注于业务核心逻辑即可
如何访问或修改数据呢？ data中的数据，最终会被添加到实例上访问数据："实例.属性名修改数据："实例.属性名"="值”

开发者工具

Vue指令

Vue会根据不同的【指令】，针对标签实现不同的【功能】。

指令：带有V-前缀的特殊标签属性

v-html

html

<body>

  <div id="app">
    <div v-html="msg"></div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          <h3>学前端~来黑马！</h3>
        `
      }
    })

  </script>

</body>

v-show v-if

v-show

v-show底层原理：切换 css 的 display: none 来控制显示隐藏

v-if

v-if 底层原理：根据判断条件控制元素的创建和移除（条件渲染）

v-elsev-else-if

v-on

v-bind

案例

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">
    <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 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>
</html>

v-for

v-for 的key

v-model

作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
v-model 可以让数据和视图，形成双向数据绑定
1. 数据变化，视图自动更新
2. 视图变化，数据自动更新
可以快速[获取]或[设置]表单元素的内容

Vue2-1 ​

Vue快速上手 ​

什么是Vue ​

1.什么是构建用户界面 ​

2.什么是渐进式 ​

Vue的两种开发方式： ​

3.什么是框架 ​

创建Vue实例 ​

插值表达式 ​

响应式 ​

开发者工具 ​

Vue指令 ​

v-html ​

v-show v-if ​

v-show ​

v-if ​

v-elsev-else-if ​

v-on ​

v-bind ​

案例 ​

v-for ​

v-for 的key ​

v-model ​