欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【笔记】Vue快速入门

程序员文章站 2022-06-06 19:27:50
...

Vue

一、Vue基础

1.简介

  • vue是一套构建用户界面的渐进式框架。
  • 只关注视图层， 采用自底向上增量开发的设计。
  • 目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

特点：

①JavaScript框架

②简化DOM操作

③响应式数据驱动

2.第一个Vue程序

  • 导入开发版本的Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 创建Vue实例对象，设置el属性和data属性
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好呀！"
        }
    })
</script>
  • 使用简洁的模板语法把数据渲染到页面上
<div id="app">
    {{message}}
</div>

3.el:挂载点

1）Vue实例的作用范围

  • el命中的元素内部及其内部的后代元素

2）是否可以使用其他选择器

  • 可以。但开发时建议使用id选择器，因为一般约定id选择器是唯一的，而类选择器和标签选择器都可以命中多个元素，会造成语义的不清晰，所以建议使用id选择器。

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

  • 可以使用其他的双标签，但不能使用HTML和BODY

4.data:数据对象

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

二、本地应用

  • 用Vue开发网页效果

1.Vue指令

1）内容绑定，事件绑定

（1）v-text
  • 设置标签的文本值(textContent)
  • 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
  • 内部支持写表达式
<div id="app">
    <h2 v-text="message"></h2>
</div>
（2）v-html
  • 设置标签的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么，只会解析为文本
  • 解析文本使用v-text，需要解析html结构使用v-html
<div id="app">
    <h2 v-text="content"></h2>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            content:"<a href='#'>啦啦啦</a>"
        }
    })
</script>
（3）v-on
  • 为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中数据
<div id="app">
    <input type="button" value="v-on" v-on:click="doIt">
    <h2 @click="changeFood">{{food}}</h2>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            food:"番茄炒蛋"
        },
        methods:{
            doIt:function(){
                alert("doIt");
            },
            changeFood:function(){
                this.food+="真好吃！"
            }
        }
    })
</script>
（4）计数器应用

①data中定义数据：num

②methods中添加两个方法：add（递增），sub（递减）

③使用v-text将num设置给span标签

④使用v-on将add，sub分别绑定给+，-按钮

⑤累加的逻辑：小于10累加，否则警告

⑥递减的逻辑：大于0递减，否则警告

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span v-text="num"></span>
        <button @click="add">+</button>
    </div>

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

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert("已达最大值！");
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("已达最小值！");
                    }
                }
            }
        })
    </script>
</body>
  • 总结：
    • 创建Vue实例时，el(挂载点),data(数据),methods(方法)
    • v-on指令的作用是绑定事件，简写为@
    • 方法中通过this,关键字获取data中的数据
    • v-text指令的作用是：设置元素的文本值，简写为{{}}
    • v-html指令的作用是：设置元素的innerHTML

2）显示切换，属性绑定

（1）v-show
  • 根据表达式的真假，切换元素的显示和隐藏
  • 原理是修改元素的display，实现显示隐藏
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，为false元素隐藏
  • 数据改变之后，对应元素的显示状态会同步更新
<div id="app">
    <img v-show="true",src="./img/home.jpg" alt="">
</div>
（2）v-if
  • 根据表达值的真假，切换元素的显示和隐藏(操纵dom元素)
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  • 频繁的切换用v-show，反之使用v-if，前者的切换消耗小
<div id="app">
    <p v-if="false">123</p>
</div>
（3）v-bind
  • 设置元素的属性(比如src,title,class)
  • 完整写法为 v-bind:属性名
  • 简写可直接省略v-bind，只保留 :属性名
  • 需要动态的增删class建议使用对象的方式
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc" alt="" :title="imgTitle" :class="{active:isActive}">
</div>
（4）图片切换应用

①定义图片数组

②添加图片索引

③绑定src属性

④图片切换逻辑

⑤显示状态切换

<body>
    <div id="app">
        <div>
            <button style="font-size: 28px;" v-show="index!=0" @click="prev"> < </button>
            <img :src="imgArr[index]" alt=""/>
            <button style="font-size: 28px;" v-show="index<imgArr.length-1" @click="next"> > </button>
        </div>
    </div>

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

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgArr:[
                    "./images/1.jpg",
                    "./images/2.jpg",
                    "./images/0.jpg",
                    "./images/3.jpg",
                    "./images/4.jpg"
                ],
                index:0
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>
</body>
  • 总结：
    • 列表数据使用数组保存
    • v-bind指令可以设置元素属性，比如src
    • v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

3）列表循环，表单元素绑定

（1）v-for
  • 根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是(item,index) in 数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            {{index+1}} 学习科目：{{item}}
        </li>
    </ul>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            arr:["JavaEE","Python","计算机网络","操作系统"]
        }
    })
</script>
（2）v-on补充
  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件的后面跟上 .修饰符可以对事件进行限制
  • .enter 可以限制触发的按键为回车
  • 事件修饰符有多种，详细参考
<div id="app">
    <input type="button" value="点击" @click="doIt(111,'冲鸭')">
    <input type="text" @keyup.enter="sayHi">
</div>

<script>
    var app=new Vue({
        el:"#app",
        methods:{
            doIt:function(p1,p2){
                console.log(p1);
                console.log(p2);
            },
            sayHi:function(){
                alert("加油！");
            }
        }
    })
</script>
（3）v-model
  • 获取和设置表单元素的值（双向数据绑定）
  • 绑定的数据会和表单元素值相关联
  • 绑定的数据←→表单元素的值
<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"谢拉机"
        }
        methods:{
            getM:function(){
				alert(this.message)
            },
            setM:function(){
                this.message="谢飞机"
            }
        }
    })
</script>
（4）小黑记事本应用

a.新增

①生成列表结构(v-for 数组)

②获取用户输入(v-model)

③回车，新增数据

b.删除

①点击删除指定内容(v-on splice 索引)

c.统计

①统计数据的个数

d.清空

①点击清除所有信息(v-on)

e.隐藏

①没有数据时，隐藏元素(v-show v-if)

<body>
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
            class="new-todo">
        </header>

        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <il class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{index+1}}</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)">×</button>
                    </div>
                </il>
            </ul>
        </section>

        <!-- 统计和清空 --> 
        <footer class="footer">
            <span class="todo-count" v-show="list.length!=0">
                <strong>{{list.length}}items left</strong>
            </span>
            <button class="clear-completed" v-show="list.length!=0" @click="clear">Clear</button>
        </footer>
    </section>
        


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

    <script>
        var app=new Vue({
            el:"#todoapp",
            data:{
                list:["qw","qw","qw"],
                inputValue:""
            },
            methods:{
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            },
        })
    </script>
</body>
  • 总结：
    • 列表结构可以通过v-for指令结合数据生成
    • v-on结合事件修饰符可以对事件进行限制，比如 .enter
    • v-on在绑定事件时可以传递自定义参数
    • 通过v-model可以快速的设置和获取表单元素的值
    • 基于数据的开发方式

三、网络应用

  • Vue结合网络数据开发应用

1.axios 文档传送门

  • 功能强大的网络请求库
  • axios必须先导入才可以使用
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取响应内容，或错误信息
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        /*
            接口1：随机笑话
            请求地址：https://autumnfish.cn/api/joke/list
            请求方法：get
            请求参数：num（笑话条数，数字）
            相应内容：随机笑话
         */
        document.querySelector(".get").onclick=function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }

        /*
            接口2：用户注册
            请求地址：https://autumnfish.cn/api/user/reg
            请求方法：post
            请求参数：username（用户名，字符串）
            相应内容：注册成功或失败
         */
        document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"谢拉机"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
    </script>
</body>

2.axios+vue

  • axios回调函数中的this已经改变，无法访问到data中数据
  • 把this保存起来，回调函数中直接使用保存的this即可
  • 和本地应用最大区别就是改变了数据来源
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>

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

    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        /*
            接口：随机笑话
            请求地址：https://autumnfish.cn/api/joke
            请求方法：get
            请求参数：无
            相应内容：随机笑话
         */
        
         var app= new Vue({
             el:"#app",
             data:{
                 joke:"一个笑话"
             },
             methods:{
                getJoke:function(){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        console.log(response.data);

                        that.joke=response.data;
                    },function(err){})
                }

             }
         })
    </script>
</body>

3.天气预报应用

  • 天气接口请求地址：http://wthrcdn.etouch.cn/weather_mini

（1）回车查询

①按下回车(v-on .enter)

②查询数据(axios接口 v-model)

③渲染数据(v-for 数组 that)

（2）点击查询

①点击城市(v-on 自定义参数)

②查询数据(this.方法())

③渲染数据(this.方法())

<body>
    <div id="app">
        <div>
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather"
                placeholder="请输入查询的天气"/>
                <button>搜索</button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                <a href="javascript:;" @click="changeCity('广州')">广州</a>
                <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
            </div>
        </div>
        <ul>
            <li v-for="item in weatherList">
                <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
                <div class="info_temp"><b>{{item.low}}</b>~<b>{{item.high}}</b></div>
                <div class="info_fate"><span>{{item.date}}</span></div>
            </li>
        </ul>
    </div>



    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/main.js"></script>
</body>

/*
    请求地址：http://wthrcdn.etouch.cn/weather_mini
    请求方法：get
    请求参数：city（城市名）
    响应内容：天气信息
 */

 var app=new Vue({
     el:"#app",
     data:{
         city:'',
         weatherList:[]
     },
     methods:{
         searchWeather:function(){
             //保存this
             var that=this;
             //调用接口
             axios.get('http://wthrcdn.etouch.cn/weather_mini?city='
             +this.city)
             .then(function(response){
                 that.weatherList=response.data.data.forecast;
             })
             .catch(function(err){})
         },
         changeCity:function(city){
             this.city=city;
             this.searchWeather();
         }
     }
 })
  • 总结：
    • 应用的逻辑代码建议和页面分离，使用单独的js文件编写
    • axios回调函数中this指向改变了，需要额外的保存一份
    • 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
    • 自定义参数可以让代码的复用性更高
    • methods中定义的方法内部，可以通过this关键字点出其他的方法

学习视频

相关标签： 前端 vue html js

上一篇： 渲染函数

下一篇： Vuex的使用及封装

推荐阅读