vue是什么

vue是一个用于构建用户界面的渐进式框架

1. 构建用户界面：基于数据动态渲染界面
2. 渐进式：循序渐进地学习
3. 框架：一套完整的项目解决方案，提升开发效率（理解记忆规则） 规则-->官网

创建vue实例

创建vue实例，初始化渲染 核心4步：

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

<div id="app">
  {{ msg }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      msg:'Hello word'
    }
  })
</script>

通过 el 配置选择器，指定 Vue 管理的是哪个盒子

还可以

插值表达式

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

1. 作用：利用表达式进行插值，渲染到页面中
   表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2. 语法：{{ 表达式 }}
3. 注意点

还可以

vue 响应式特性

响应式：数据变化，视图自动更新

如何访问 or 修改？ data 中的数据最终会被添加到实例上

1. 访问数据："实例.属性名"
2. 修改数据："实例.属性名"="新值"

使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

指令初识 和 v-html

Vue 指令

Vue 会根据不同的指令，针对标签实现不同的功能
指令：带有 v-前缀的特殊属性，不同属性对应不同的功能 <div v-html="str"></div>

v-html 作用：设置元素的 innerHTML ，可以解析动态解析标签
语法：v-html="表达式"

<div id="app">
  <div v-html="msg"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      msg:`
        <a href="http://www.itheima.com">
          黑马程序员
        </a>
      `
    }
  })
</script>

指令 v-show 和 v-if

v-show ：

1. 作用：控制元素显示隐藏
2. 语法：v-show = "表达式" 表达式值为 true 显示， false 隐藏
3. 原理：切换 css 的 display: none 来控制显示隐藏
4. 场景：频繁切换显示隐藏的场景

v-if ：

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

指令 v-else 和 v-else-if

1. 作用：辅助 v-if 进行判断渲染
2. 语法：v-else v-else-if="表达式"
3. 注意：需要紧挨着 v-if 一起使用

<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 >= 80">成绩评定：B</p>
  <p v-else-if="score >= 70">成绩评定：C</p>
  <p v-else-if="score >= 60">成绩评定：D</p>
  <p v-else="score < 60">成绩评定：F</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      gender:2,
      score:85
    }
  })
</script>

指令 v-on

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

v-on:可以整体替换为 @

v-on-01-语法1-内联语句

<div id="app">
  <button v-on:click="count--">-</button>
  <span>{{ count }}</span>
  <button @click="count++">+</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      count:100
    }
  })
</script>

v-on-02-语法2-methods处理函数

让提供的所有methods中的函数，this都指向当前实例

<div id="app">
  <button @click="fn">切换显示隐藏</button>
  <h1 v-show="isShow">哈哈哈</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      isShow:true
    },
    methods:{
      fn(){
        app.isShow = !app.isShow
        //this.isShow = !this.isShow
      }
    }
  })
</script>

v-on-调用传参

<div id="app">
  <div>
    <h3>自动售卖机</h3>
    <button @click="buy(5)">可乐5元</button>
    <button @click="buy(8)">牛奶8元</button>
    <button @click="buy(10)">咖啡10元</button>
  </div>
  <p>余额：{{ money }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      money:100
    },
    methods:{
      buy(price){
        this.money -= price
      }
    }
  })
</script>

指令 v-bind

1. 作用：动态地设置 html 的标签属性 —> src url title ...
2. 语法：v-bind:属性名="表达式"
3. 简写：：属性名="表达式"

<div id="app">
  <img v-bind:src="imgUrl" :title="msg" alt="">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      imgUrl:'./imgs/01.png',
      msg:"hello"
    }
  })
</script>

案例——波仔的学习之旅

<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.7.10/dist/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      index:0,
      list:[
        './imgs/1-0.gif',
        './imgs/1-1.gif',
        './imgs/1-2.gif',
        './imgs/1-3.gif',
        './imgs/1-4.gif',
        './imgs/1-5.gif',
      ]
    }
  })
</script>