Vue-QuickStarted_ 字节宝

`说明`

代码语言：javascript复制

hexo 中的语法不允许出现两个'}' 连着的情况， 所以代码中的两个 '}' 引用符号全部改为了']]'

vue2.x 技术快速上手

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

构建用户界面：基于数据动态渲染页面
渐进式：循序渐进的学习
框架：按照约定的规则进行开发

两种开发方式：

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

创建一个vue实例

核心四部：

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

vue响应式特性：

什么是响应式？

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

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

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

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

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

vue指令 v-XXX

概念：指令（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）

内容表达式(v-html、v-text)：

代码语言：javascript复制

<body>
  <h1>Vue指令----v-html </h1>
  <p>
  - 使用语法：`<p v-html="intro">hello</p>`，意思是将 intro 值渲染到 p 标签中<br>
  - 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容 <br>
  - 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：
  </p>
  <h1>v-text </h1>
  <p>语法和之前的一样</p>
  <p>类似 innerText，使用该语法，会覆盖 p 标签原有内容</p>

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



  
  <script src="../vue快速上手/vue.js"></script>
  <script>
    //
    const app = new Vue({
      el: '#app',
      data: {
        msg: `<a href="https://wclspace.xyz">Rayce blog</a>`
      }

    })
    
  </script>
</body>

条件渲染指令（v-show、v-if、v-else、v-else-if）

v-if

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

代码语言：javascript复制

<div id="app">
  <div v-show="flag" class="box">我是v-show控制的盒子</div>
  <div v-if="flag" class="box">我是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: false
    }
  })
</script>

对于多条件判断的，可以使用 v-else / v-else if="表达式", 需要紧接着 v-if使用

v-show

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

事件绑定指令（v-on）

作用：注册事件 = 添加监听提供处理逻辑 使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

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

内联语句

代码语言：javascript复制

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count ]]</span>
    <button v-on: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>

事件处理函数

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

代码语言：javascript复制

<div id="app">
    <button>切换显示隐藏</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
      }
    })
  </script>

给事件处理函数传参

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

代码语言：javascript复制

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

<div id="app">
   <div class="box">
     <h3>小黑自动售货机</h3>
     <button>可乐5元</button>
     <button>咖啡10元</button>
     <button>牛奶8元</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: 100
     }
   })
 </script>

属性绑定指令(v-bind)

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

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

则可以这样设置属性值：

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

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- v-bind的两种使用方式  -->
    <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',
        // 使用v-bind 需要提供相关的内容
        msg: 'hello'
      }
    })
  </script>
  
</body>
</html>

列表渲染指令（v-for）

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

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

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

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

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    //遍历对象
    <div id="app">
      <ul>    
        <li v-for="(item, index) in list">{{ item ]] -- {{ index ]]</li>
      </ul>
    </div>


  </div>
  value:对象中的值
  key:对象中的键
  index:遍历索引从0开始

  //遍历数字
  item从1 开始
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    
    const app1 = new Vue({
      el: '#app',
      data: {
        list: ['new','new1','new2']
        // value: 10  
      }
    })
  </script>
</body>
</html>

指令补充

指令修饰符

所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码

按键修饰符

@keyup.enter —>当点击enter键的时候才触发

代码演示：

代码语言：javascript复制

<div id="app">
  <h3>@keyup.enter  →  监听键盘回车事件</h3>
  <input v-model="username" type="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: ''
    },
    methods: {
      
    }
  })
</script>

v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

 <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click href="http://www.baidu.com">阻止默认行为</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          console.log('老被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          console.log('小被点击了')
        }
      }
    })
  </script>
  
</body>
</html>

v-bind对于样式操作的增强

对于控制样式的增强- class

Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制

语法：

代码语言：javascript复制

<div> :class = "对象/数组">这是一个div</div>
<!--
当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类 
	-->
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
<!--
	数组： 数组中所有的类都会被添加到盒子上， 本质就是一个list列表
-->
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

案例：

当我们点击哪个tab页签时，哪个tab页签就高亮

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>
  <!--  实现
    1. 基于v-for 实现动态列表的渲染
    2. 准备下标高亮的activeIndex
    3. 基于下标，动态的实现控制class类名
   -->

<div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="item.id" @click="activeIndex=index">
        <a v-bind:class="{active: index === activeIndex ? true : false }">{{ item.name ]]</a>
      </li>
      <!-- <li><a class="active" href="#">京东秒杀</a></li> -->
      <!-- <li><a href="#">每日特价</a></li> -->
      <!-- <li><a href="#">品类秒杀</a></ldd -->
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 2,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      } 
    })
  </script>
  
</body>
</html>

v-bind对有样式控制的增强-操作style

语法：

代码语言：javascript复制

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

案例：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
 </style>
 <div id="app">
  <!-- 注意， style在这里不能写含有 - 的属性， 需要改为 '' 包括 或着使用驼峰转换 -->
    <div class="box" :style="{width: '400px', height: '200px', backgroundColor: 'red' }"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
  
</body>
</html>

案例：进度条渲染

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 1s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>

<div id="app">
    <div class="progress">
      <div class="inner" :style="{width: percent   '%'}">
        <span>{{percent ]]%</span>
      </div>
    </div>
    <!-- 注册点击时间， 然后将其中的值赋值给percent -->
    <button @click="percent =25">设置25%</button>
    <button @click="percent =50">设置50%</button>
    <button @click="percent =75">设置75%</button>
    <button @click="percent =100">设置100%</button>
  </div>

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

v-model应用与其他表单元素

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

代码语言：javascript复制

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

案例：

关于其他的表单、复选框、单选框的使用

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
 <div id="app">
    <h3>学习网</h3>
    姓名：
      <input type="text"> 
      <br><br>
    是否单：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>
    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input v-model="gender" type="radio" name="gender" value="1">男
      <input v-model="gender" type="radio" name="gender" value="0">女
      <br><br>
    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">成都</option>
        <option value="4">南京</option>
      </select>
      <br><br>
    自我描述：
      <textarea v-model="desc"></textarea> 
    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: true,
        gender: '0',
        cityId: '3',
        desc: 'time and on '


      }
    })
  </script>
  
</body>
</html>

Computed计算属性

基础语法

概念:

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用

语法渲染对象事件数据

0 人点赞