Vue快速入门

课程介绍

  • 学前须知

image1

  • 开发工具

image2

  • 课程安排

image-20230312213318199.png

总结：

image-20230312213349672.png

1.Vue基础

1.1 什么是 Vue？

​ Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

image-20230312213552817.png

文档传送门:https://cn.vuejs.org/

1.2 第一个vue程序

image-20230312213626396.png

1.导入开发版本的vue.js；

  • 直接用 < script> 引入
  • 直接下载并用 < script> 标签引入，Vue 会被注册为一个全局变量。

直接访问开发环境，https://cdn.jsdelivr.net/npm/vue/dist/vue.js，保存里面的源码重命名，复制到项目路径里，直接引用<script src="js/vue.js"></script>

  • 使用CDN方法
  • NPM

建议开发时使用开发环境版本，发布时使用生产环境版本。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.创建Vue实例对象，设置el属性和data属性

3.使用简洁的模板语法把数据渲染到页面上

image-20230312213939699.png

第一个Vue程序代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="V-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:" Hello Vue! "
            }
        })
    </script>
</body>
</html>

1.3 el:挂载点

el是用来设置Vue实例挂载（管理）的元素

1.vue的作用范围

在el命中的元素内部可以被渲染,Vue会管理el选项命中的元素及其内部的后代元素

测试样例：

<body>
    {{message}} <!--不会被渲染-->
    <div id="app">
        {{message}}
        <span>{{message}}</span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"Hello Vue！"
        }
    })
</script>
</body>

2.是否可以选用其他的选择器

可以，但建议使用id选择器

3.是否可以设置其他的dom元素

可以使用其他的双标签，不能设置在HTML和BODY标签中

1.4 data:数据对象

1.Vue中用到的数据定义在data中

2.data中可以写复杂类型的数据

3.渲染复杂类型数据时，遵循js的语法即可

image-20230312214756155.png

测试样例：

<body>
    <div id="app">
        {{message}}
       <h2> {{school.name}} {{school.mobile}}</h2>
       <ul>
           <li>
               {{campus[0]}}
           </li>
           <li>
            {{campus[1]}}
        </li>
       </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            //添加data数据对象
            data:{
                message:"黑马程序员！",
                //对象
                school:{
                    //属性
                    name:"黑马程序员",
                    mobile:"1234567890"
                },
                //数组
                campus:["北京校区","深圳校区"]
            }
            
    // ES6 语法
    data() {
      return {
        name: '尤雨溪',
        message: 'Hello Vue'
      }
    }
        })
    </script>
</body>

2.本地应用

2.1 介绍

1.通过Vue实现常见的网页效果

2.学习Vue指令，以案例巩固知识点

3.Vue指令指的是，以v-开头的一组特殊语法

image-20230312215116809.png

image-20230312215144882.png

2.2 v-text

1.v-text指令的作用：设置标签的内容（textContent）

image-20230312215326865.png

2.默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。（如本例中”深圳的显示”）

{{ }} 中可以插入JavaScript 表达式, 不支持其它语句

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

3.内部支持写表达式（如字符串拼接）

测试样例

<body>
    <div id="app">
        <h2 v-text="message+'!'">深圳</h2>
        <h2>{{message+'!'}}深圳</h2>
        <h2 v-text="info">深圳</h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                message:"黑马程序员",
                info:"前端与移动教研部"
             }
         })
     </script>
</body>

2.3 v-html

1.v-html指令的作用是:设置元素的innerHTML

2.内容中有html结构会被解析为标签

3.v-text指令无论内容是什么,只会解析为文本

4.解析文本使用v-text,需要解析html结构使用v-html

image-20230312215538122.png

测试样例：

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               content:"<a href='https://mp.csdn.net/console/home'>黑马</a>"  
             }
         })
     </script>
</body>

2.4 v-on

1.v-on指令的作用是:为元素绑定事件

2.事件名不需要写on

3.指令可以简写为@

4.绑定的方法定义在methods属性中

5.方法内部通过this关键字可以访问定义在data中数据

image-20230312215852123.png

测试样例：

<body>
    <!-- 2.html结构 -->
    <div id="app">
       <input type="button" value="v-on单击" v-on:click="doIt">
       <input type="button" value="v-on双击" v-on:dblclick="doIt">
       <input type="button" value="v-on简写" @click="doIt"> 
       <input type="button" value="v-on双击" @dblclick="doIt">
       <h2 @click="changeFood">{{food}}</h2>
    </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 food:"西兰花炒蛋"
             },
            methods:{
                doIt:function(){
                    alert("执行v-on");
                },
                changeFood:function(){
                    console.log(this.food);
                    this.food+="好吃！"
                },
                
                //ES6
                add() {
                if (this.count >= 5) {
                    this.disabled = true;
                } else {
                    this.count++
                }
            }
            
         })
     </script>
</body>

2.5 计数器

思路：

image-20230307211000816.png

  1. data中定义数据:比如num
  2. methods中添加两个方法:比如add(递增),sub(递减)
  3. 使用v-text将num设置给span标签
  4. 使用v-on将add,sub分别绑定给+,按钮
  5. 累加的逻辑:小于10累加,否则提示6.
  6. 递减的逻辑:大于0递减否则提示

实现：

<body>
       <!-- 2.html结构 -->
    <div id="app">
       <!-- 计数器功能区 -->
       <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
       </div>
    </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 编码 -->
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               num:1
             },
             methods:{
                 add:function(){
                    //  console.log("add");
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert("超过10啦");
                    }
                 },
                 sub:function(){
                    //  console.log("sub");
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("到底啦");
                    }
                 }
             }
         })
     </script>
</body>

2.6 v-show

  1. show指令的作用：根据真假切换元素的显示状态

  2. 原理是修改元素的display属性,实现显示或隐藏

  3. 指令后面的内容,最终都会解析为布尔值

  4. 值为true元素显示，值为false元素隐藏

  5. 数据改变之后，对应元素的显示状态会同步更新

image-20230312220556915.png

测试样例：

<div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="../image1.jpg" alt="">
        <img v-show="age>=18" src="../image2.jpg" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:16
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
</script>

2.7 v-if/else

1.v-if指令的作用是:根据表达式的真假切换元素的显示状态

2.本质是通过操纵dom元素来切换显示状态

3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除

4.频繁的切换v-show,反之使用v-if,前者的切换消耗小

image-20230312220858430.png

测试样例：

<div id="app">
        <p v-if="true">我是一个p标签</p>
        <p v-if="isShow">我是一个p标签</p>
        <p v-if="temperature > 35">我是一个p标签</p>

</div>
<script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:false
                temperature:40
            }
        })
</script>
  • v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
  • v-else-if 元素必须紧跟在带 v-if 或者 v-else-if 的元素之后，否则它将不会被识别。
<标签 v-if="布尔表达式"></标签>

<标签 v-if="布尔表达式"></标签>
<标签 v-else></标签>

<标签 v-if="布尔表达式1"></标签>
<标签 v-else-if="布尔表达式2"></标签>
<标签 v-else-if="布尔表达式3"></标签>
...
<标签 v-else></标签>

测试样例：

<div id="app">
    <div v-if="age>18">成年人</div>
    <hr>
    <div v-if="age<18">未成年</div>
    <div v-else>成年人</div>
  
    <hr>
    <div v-if="age<18">未成年</div>
    <div v-else-if="age<40">有位青年</div>
    <div v-else-if="age<60">步入中年</div>
    <div v-else>进入老年</div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            age: 65
        }
    })
</script>

2.8 v-bind

1.v-bind指令的作用是:为元素绑定属性(比如:src,title,class)

2.完整写法是v-bind:属性名

3.简写的话可以直接省略v-bind,只保留:属性名

4.需要动态的增删class建议使用对象的方式

image-20230312221236934.png

测试样例：

<body>
     <div id="app">
         <img v-bind:src="imgSrc">
         <img v-bind:src="imgSrc" v-bind:title="imgTitle">
         <img v-bind:class="{active:isActive}">
     </div>
	 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
	 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 imgSrc:"图片地址",
                 imgTitle:"黑马程序员",
                 isActive:false
             }
         })
     </script>
</body>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 2px solid red;
        }
    </style>
</head>
<body>
      <!-- 2.html结构 -->
      <!--:class="{active:isActive}"：active是否生效取决于isActive的值 -->
      <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" :title="imgTitle+'显示'" :class="isActive?'active':''" @click="toggleActive">
        <img :src="imgSrc" :title="imgTitle+'显示'" :class="{active:isActive}" @click="toggleActive">
    </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               imgSrc:"../img/tupian.jpg",
               imgTitle:"图片",
               isActive:false
             },
             methods:{
                 toggleActive:function(){
                     this.isActive=!this.isActive;
                 }
             }
         })
     </script>
</body>
</html>

2.9 图片切换

image-20230312221709963.png

image-20230312221804577.png

1.列表数据使用数组保存

2.v-bind指令可以设置元素属性,比如src

3.v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <link rel="stylesheet" href="../css/index.css" />
    <style>
        .active{
            border:6px solid green;
        }
    </style>
</head>
<body>
      <!-- 2.html结构 -->
      <div id="mask">
          <img :src="imgArr[index]" alt="头像">
          <br>
          
          <span class="prev" v-show="index!=0" @click="prev"></span>
          <span class="next"  v-show="index<imgArr.length-1" @click="next"></span>
      </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#mask",
             data:{
               imgArr:[
                   "../img/image1.jpg",
                   "../img/image2.jpg",
                   "../img/image3.jpg",
                   "../img/image4.jpg",
                   "../img/image5.jpg",
               ],
               index:0,
             },
             methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
             }
         })
     </script>
</body>
</html>

2.10 v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名.

expression 支持的类型： number、 string 、array 等。

<div id="app">
    <span v-for="num in 10">{{num}}</span> <br>
    <span v-for="num in 10" v-text="num"></span>
    <hr>
    <span v-for="str in 'abcdef' ">{{str}} - </span>
    <hr>
    <ul>
        <li v-for="name in arr" v-text="name"></li>
    </ul>
    <hr>

    <table>
        <tr>
            <th>用户名</th>
            <th>邮箱</th>
        </tr>

        <tr v-for="user in userList">
            <td>{{user.username}}</td>
            <td>{{user.email}}</td>
        </tr>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                arr: ['Java', 'C++', 'PHP'],
                userList: [{
                    username: 'jack',
                    email: 'jack@126.com'
                },{
                    username: "rose",
                    email: "rose@126.com"
                }]
            }
        }
    })
</script>

你也可以用 of 替代 in 作为分隔符

<div v-for="item of items"></div>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，建议为每项提供一个唯一 key.不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

image-20230317210008969

image-20230312222232795.png

1.v-for指令的作用是:根据数据生成列表结构

2.数组经常和v-for结合使用

3.语法是( item,index ) in 数据

4.item和index可以结合其他指令一起使用

5.数组长度的更新会同步到页面上，是响应式的

测试样例：

  <!-- 2.html结构 -->      
    <div id="app">
        <input type="button" value="添加数据"  @click="add">
        <input type="button" value="移除数据"  @click="remove">
       <ul>
           <li v-for="(it,index) in arr">{{index+1}}黑马程序员校区：{{it}}</li>
       </ul>
       <h2 v-for="it in vegetables" v-bind:title="it.name">{{it.name}}</h2>
    </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
               arr:["北京","上海","深圳"],
               vegetables:[
                   {name:"西兰花炒蛋"},
                   {name:"蛋炒西兰花"}
               ]
             },
             methods:{
                 add:function(){
                     this.vegetables.push({name:"西红柿炒鸡蛋"});
                     console.log("西兰花炒蛋");
                 },
                 remove:function(){
                     this.vegetables.shift(); //shift方法移除最前面的一条数据
                 }
             }
         })
     </script>

2.11 v-on补充

1.事件绑定的方法写成函数调用的形式，可以传入自定义参数

2.定义方法时需要定义形参来接收传入的实参

3.事件的后面跟上.修饰符可以对事件进行限制

image-20230317205158601

4.enter可以限制触发的按键为回车

5.事件修饰符有多种,具体查看文档：https://cn.vuejs.org/v2/api/#v-on

image-20230313114508103.png

测试样例：


  <!-- 2.html结构 -->
    <div id="app">
       <input type="button" value="点击" @click="doIt(666,'a')">
       <input type="text" @keyup.enter="sayHi">

    </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             methods:{
              doIt:function(p1,p2){
                  console.log("做it");
                  console.log(p1,p2);
              },
              sayHi:function(){
                  alert("吃了没");
              }
             }
         })
     </script>

2.12 v-model

1.v-model：获取和设置表单元素的值(双向数据绑定)
2.v-model指令的作用是便捷的设置和获取表单元素的值
3.绑定的数据会和表单元素值相关联
4.绑定的数据←→表单元素的值

image-20230313114916869.png

  • v-model 指令在表单 、

posted @ 2023-03-14 00:29  白衣卿巷  阅读(226)  评论(0)    收藏  举报