Vue 基础

基础

• 使用的是在线Vue地址

<!-- 开发环境版本(vue)，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`

---

• Vue框架

Vue 是一套渐进式的前端框架，我们开发时只需要维护好数据，不需要自己区操作 dom（建议使用时要遵循 Vue 的使用规则）

实现页面的响应式，数据发生改变就会重新渲染页面（使用到数据的 dom 元素）

Vue1 官方文档

---

• 使用 Vue

1. 创建 Vue 容器 html 、用于挂载 Vue 实例

   • 一个根元素（容器）对于着一个 Vue 实例 （注意）
   • 被挂载的元素 #app、里面的所有后代元素都可以直接访问 Vue 实例里的成员
   • 可以使用 {{ 插值表达式 }} 、一对双大括号 {{}}，获取数据

       <div id="app">
           <!-- 模板语法（插值表达式）-->
           {{message}}
       </div>
   

2. 创建 Vue 实例

   • 一般来说，一个页面只需要一个 Vue 实例对象就够了
   • new Vue(配置对象) 构造 Vue 实例，并传入配置对象
   • el 指定挂载的元素、值为选择器 (CSS Selector)或 html element
   • data 响应式数据，数据发生变化会重新渲染 --> 使用到数据的 dom

       var app = new Vue({
           el: "#app",
           data: {
               message: "Hello Vue!"
           }
       })
   

• el 作用范围

  • el 选中的元素及其内部的所有后代元素

  • 设置挂载的 dom 元素

    • 除了 html、body 的任何元素
    • 建议使用 div
    • 不支持 body 和 html 或 单标签

• data {} 数据对象

  • Vue 实例中用到的数据定义在 data 对象中
  • data 中可以写复杂的数据
  • 渲染复杂类型的数据时，遵守 js 语法即可

• methods {} 方法对象

  • 自定义的方法都会配置在这个对象里

---

本地应用、Vue指令

1. v-text

   • 设置 元素的 textContent 值，都是以字符串去解析

   • 在 元素 属性里添加 v-text 属性

   <div id="app" v-text="name"></div>
   

2. v-html

   • 设置 元素的 innerHTML 值，解析 html 标签字符串，会覆盖所有的内容

   • 在 元素 属性里添加 v-html 属性

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

3. v-on

   • 事件绑定

   • 绑定元素触发的事件，如：onclick、onload、等

   <!-- 默认写法 v-on:-->
   <input v-on:click="fn" type="button" value="v-on指令 默认">
   
   <!-- 简写@ -->
   <input @click="fn" type="button" value="v-on指令 简写">
   
   <!-- 双击事件 -->
   <input @dblclick="fn" type="button" value="v-on属性 双击" >
   

   • Vue 自定义的方法写在 methods 配置对象里

    var app = new Vue({
           methods: {
               fn: function (e)
               {
                   alert("胡桃火元素啊");
               }
           }
       })
   

4. v-show

   • 显示和隐藏元素

   • 原理：就是操作元素的 display 属性（none）（操作频繁建议使用）

   • 控制的值时布尔值、js 表达式返回布尔值

    <div id="app" v-show="true"></div>
   

5. v-if

   • 也是显示和隐藏元素

   • 原理是：直接操作 dom 元素，删除、添加（操作不频繁使用）

   • 控制的值时布尔值、js 表达式返回布尔值

   <div id="app" v-if="false"></div>
   

6. v-bind

   • 为元素绑定、设置属性

   • 完整写法 v-bind:<属性名> = <js 表达式返回的值>

   • 简写 :<属性名> = <js 表达式返回的值>

    <!-- 完整写法 v-bind:属性名 -->
    <img v-bind:src="mySrc" alt="png" width="300px">
   
    <!-- 简写 :属性名-->
    <h1 :title="title"></h1>
   

7. v-for

   • 根据数据，循环生成列表结构，响应式

   • 根据数据的个数，拷贝多个元素（包含后代及子元素）

   • 语法根 js 里的 forEach 差不过

   • 也可以遍历对象里的每一个属性

   • 比哪里遍历出来的，参数可以直接使用插值语法获取

   • for item in arrays 或 for (item,index) in arrays

     • item 遍历的数据 （可获取的每一项）-> {{可使用插值语法使用}}
     • index 索引

   <!-- 循环生成多个 li 元素 -->
   <li v-for="(item,index) in array">{{item}}</li>
   

8. v-on. 拓展

   1. 函数参数

      • 直接，写成函数调用的方式

      • 绑定函数 不传参：默认携带一个 Event 事件实参，在 回调函数fn 的第一个形参

      • 绑定函数 传参：使用 fn($event,...params)、如果要保留 Event 事件实参，请使用 #event 占位，后面的是实参。也可不使用

    <!-- 传入实参 -->
    <input type="button" value="doIt" v-on:click="fn('火元素',19)">
   
    <!-- 保留 EVent 实参 -->
    <input type="button" value="doIt" v-on:click="fn($event,'火元素',19)">
   

   2. 事件修饰符

      • 限定条件 、 这里使用事件： 按键抬起事时 keyup

      • 添加修饰符使用点 .

      • 按键抬起时是 enter 键才会触发、限制的按键

      • 没有限制的，默认是任意键

      • 详细修饰符 Vue1 Document https://v1-cn.vuejs.org/api/#v-on

    <!-- 事件修饰符 enter -->
    <input type="text" @keyup.enter="sayHi">
   
    <!-- 只能触发一次 -->
    <input type="text" v-once:click="sayHi">
   

9. v-model

   • 数据双向绑定

   • 需要跟表单元素一起使用、form、input、等 表单元素（因为绑定的是 value 属性）

   • 绑定后，两边的数据都会同步更新、任意边数据发送变化都会更新

    <!-- 输入框 -->
    <input type="text" v-model="data" placeholder="请输入新的数据" />
   
    <!-- 数据对象 -->
    <script>
       let app = new Vue({
           el: "#app",
           data: {
              data:"hello"
           },
       });
   </script>
   

---

计数器案例

引入 Vue

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

级别步骤

• 创建 Vue 实例：el（挂载点），data（数据），methods（方法）
• v-on 指令绑定事件，简写为@
• 方法通过 this，获取 data 中的数据

---

1. 创建 html 结构

   • 设置容器 id = app

   • 按钮绑定点击事件 click

   • 插值语法获取数 {{num}}

<div id="app">
    <div class="input-num">
        <button @click="sub">-</button>
        <span>
            {{num}}
        </span>
        <button @click="add">+</button>
    </div>
</div>

2. 创建 Vue 实例

// new Vue 实例
var app = new Vue({
    // 挂载容器

    el: "#app",

    // 数据对象
    data: {
        num: 1
    },

    // 方法配置
    methods: {
        add: function ()
        {
            console.log("add++");
            if (this.num >= 10)
            {
                alert("已经是最大值了");
                return;
            }
            this.num++;
        },
        sub: function ()
        {
            console.log("sub--");
            if (this.num <= 0)
            {
                alert("已经是最小值了");
                return;
            }
            this.num--;
        }
    }
});
    

3. 完成效果图

---

CSS 样式

<style>
    #app {
        width: 480px;
        height: 100px;
        margin: 200px auto;
    }
    .input-num {
        margin-top: 20px;
        height: 100%;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 4px black;
    }
    .input-num button {
        width: 150px;
        height: 100%;
        font-size: 40px;
        color: gray;
        cursor: pointer;
        border: none;
        outline: none;
    }
    .input-num span {
        height: 100%;
        font-size: 40px;
        flex: 1;
        text-align: center;
        line-height: 100px;
    }
</style>

---

图片切换案例

引入 Vue

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

级别步骤

• 列表数据使用数组保存
• v-bind 指向设置元素属性，比如 src
• v-show 和 v-if 都可以切换元素的显示，频繁切换使用 v-show

---

1. 创建 html 结构

   • 绑定 img 的 src 属性
   • 按钮绑定点击事件 click，添加 v-show 指令，最后一张图隐藏按钮

<div id="mask">
    <div class="center">
        <!-- 图片 -->
        <img :src="imgArr[index]" alt="1" />
        <!-- 左箭头 -->
        <a href=" javascript:void(0)" class="left" @click="prev" v-show="index != 0">
            <img src="../../image/switch/prev.png" alt="1" />
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right" @click="next" v-show="index < imgArr.length - 1">
            <img src="../../image/switch/next.png" alt="2" />
        </a>
        <img alt="">
    </div>
</div>

2. 创建 Vue 实例

   • 修改 index 的值，切换图片的路径（数据修改了，页面就会重写渲染）

// 创建 vue 对象
var app = new Vue({
    el: "#mask",
    data: {
        // 图片路径
        imgArr: [
            "../../image/switch/00.jpg",
            "../../image/switch/01.jpg",
            "../../image/switch/02.jpg",
            "../../image/switch/03.jpg",
            "../../image/switch/04.jpg",
            "../../image/switch/05.jpg",
            "../../image/switch/06.jpg",
            "../../image/switch/07.jpg",
            "../../image/switch/08.jpg",
            "../../image/switch/09.jpg",
            "../../image/switch/10.jpg",
        ],
        // 数组索引
        index: 0
    },
    // 函数
    methods: {
        // 上一张
        prev: function ()
        {
            this.index--;
        },
        // 下一张
        next: function ()
        {
            this.index++;
        }
    }
})
    

3. 完成效果图

---

CSS 代码

* {
  margin: 0;
  padding: 0;
}

html,
body,
#mask {
  width: 100%;
  height: 100%;
}

#mask {
  background-color: #c9c9c9;
  position: relative;
}

#mask .center {
  position: absolute;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}
#mask .center .title {
  position: absolute;
  display: flex;
  align-items: center;
  height: 56px;
  top: -61px;
  left: 0;
  padding: 5px;
  padding-left: 10px;
  padding-bottom: 0;
  color: rgba(175, 47, 47, 0.8);
  font-size: 26px;
  font-weight: normal;
  background-color: white;
  padding-right: 50px;
  z-index: 2;
}
#mask .center .title img {
  height: 40px;
  margin-right: 10px;
}

#mask .center .title::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 65px solid;
  border-color: transparent transparent white;
  top: -65px;
  right: -65px;
  z-index: 1;
}

#mask .center > img {
  display: block;
  width: 700px;
  height: 458px;
}

#mask .center a {
  text-decoration: none;
  width: 45px;
  height: 100px;
  position: absolute;
  top: 179px;
  vertical-align: middle;
  opacity: 0.5;
}
#mask .center a :hover {
  opacity: 0.8;
}

#mask .center .left {
  left: 15px;
  text-align: left;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#mask .center .right {
  right: 15px;
  text-align: right;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}