Vue.js快速入门

大家好我是Boger

已于 2023-01-02 01:47:52 修改

阅读量887

点赞数 1

分类专栏： Vue.js学习笔记文章标签： vue.js javascript

于 2022-01-08 23:44:03 首次发布

本文链接：https://blog.csdn.net/QQ1149646297/article/details/122388448

版权

Vue.js学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下为本人观看黑马程序员Vue框架学习视频所做的笔记

视频连接：01.课程介绍_哔哩哔哩_bilibili

Vue基础

第一个Vue程序

导入开发版本的Vue.js

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

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

<div id="app">
    {{message}}
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

上述代码将会使用简介的模板语法把数据渲染到页面上

el挂载点

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

Vue实例的作用范围：Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器，但是建议使用ID选择器

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

data数据对象

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

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

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

data数据对象的定义：

var app = new Vue({
    el: "#app",
    data: {
        message: "Hello Vue!",
        school: {
            name: "黑马程序员",
            mobile: "400-618-9090"
        },
        campus: ["北京校区", "上海校区", "广州校区"]
    }
})

在body中的调用：

<div id="app">
    {{message}}
    <h2>{{school.name}} {{school.mobile}}</h2>
    <ul>
        <li>{{campus[0]}}</li>
        <li>{{campus[1]}}</li>
    </ul>
</div>

本地应用

内容绑定和事件绑定

v-text

v-text指令的作用：设置标签的内容(textContent)

使用v-text的默认写法和使用差值表达式{{}}的区别在于：使用默认写法会直接将标签中的内容全部替换，而使用{{}}则是替换指定内容

例：

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

生成页面结果：

字符串拼接：

使用v-text和{{}}都可以直接进行字符串拼接

例：将上诉代码中前部分代码修改为以下

    <div id="app">
        <h2 v-text="message + '!'">深圳部门</h2>
        <h2>{{message + '!'}}部门</h2>
    </div>

生成页面结果：

v-html

v-html指令的作用是：设置元素的innerHTML

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

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

例：

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='http://www.itheima.com'>黑马程序员</a>"
            }
        })
    </script>

渲染结果：

v-on

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

事件名不需要写on

指令可以简写为@

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

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

例：

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function () {
                    alert("Do It");
                }
            },
        })
    </script>

在Vue中，不需要考虑如何修改Dom元素，重点应该是放在如何修改数据上，因为数据修改后会同步更新。需要通过this来拿到数据。

例：

    <div id="app">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "西兰花炒蛋"
            },
            methods: {
                changeFood: function () {
                    this.food += "好好吃！"
                }
            },
        })
    </script>

计数器

本代码是使用前边所学知识所做的一个计数器功能

步骤：

创建Vue示例时：el挂载点、data数据、methods方法

v-on指令的作用是绑定事件，简写为@

方法中通过this关键字获取data中的数据

v-text指令的作用是设置元素的文本值，简写为{{}}

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

示例代码：

    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    //console.log('add')
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("最大了！");
                    }
                },
                sub: function () {
                    //console.log('sub')
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("最小了！");
                    }
                }
            },
        })
    </script>

显示切换和属性绑定

v-show

v-show指令的作用是根据布尔值为真或假切换元素的显示状态

原理是修改元素的display实现显示或隐藏

指令后的内容最终会被解析为布尔值

值为true时元素显示，值为false时元素隐藏

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

    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="img.jpg" alt="">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

v-if

v-if指令的作用是根据表达式的布尔值切换元素的显示状态

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

表达式的值为true时元素存在于dom树中，为false时元素从dom树中移除（v-show是通过修改元素style中的display来切换元素的显示状态）

频繁的切换使用v-show，反之如果是不频繁的切换则使用v-if（因为v-show的切换性能消耗更小）

    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">黑马程序员 v-if修饰</p>
        <p v-show="isShow">黑马程序员 v-show修饰</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

v-bind

v-bind指令的作用是为元素绑定属性

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

简写可以直接省略v-bind，只保留 :属性名

需要动态的增删class可以使用三目表达式，也可以使用对象的方法。建议使用对象的方法。

    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <!-- 使用三目表达式法进行增删class -->
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <!-- 使用对象的方法进行增删class -->
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "http://www.itheima.com/images/logo.png",
                imgTitle: "黑马程序员",
                isActive: false
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>

列表循环和表单元素绑定

v-for

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

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

语法是( item,index ) in 数据

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

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

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

v-on

语法修饰符文档传送门: API — Vue.js

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

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

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

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

事件修饰符有多种

    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1, p2) {
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () {
                    alert("吃了没");
                }
            }
        })
    </script>

v-model

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据←→表单元素的值

    <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "黑马程序员"
            }
        })
    </script>

网络应用

axios的基本使用

axios文档传送门： GitHub - axios/axios: Promise based HTTP client for the browser and node.js

axios是一个JavaScript中基于ajax的网络请求库

axios必须先导入再使用

使用get或post方法即可发送对应的请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容，或错误信息

get请求的写法：

axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})

post请求的写法：

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

其中then之后的第一个函数是请求成功后执行的函数，第二个函数是请求失败后执行的函数

       <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <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=3")
            //错误的请求示例（list后面加了数字）：
            axios.get("https://autumnfish.cn/api/joke/list1234?num=3").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: "Bogerman" }).then(function (response) {
                console.log(response);
            }, function (err) {
                console.log(err);
            })
        }
    </script>

axios配合vue

axios回调函数中的this已经改变，无法访问到data中的数据

因此我们需要把this保存起来，回调函数中直接使用保存的this即可

    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <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;//因为下面函数内的this会变，所以我们需要提前声明that来代表我们要用的this
                    axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                        //console.log(this.joke);
                        console.log(response.data);
                        that.joke = response.data;
                    }, function (err) {
                        console.log(err);
                    })
                },
            }
        })
    </script>

大家好我是Boger

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js快速入门

以下为本人观看黑马程序员Vue框架学习视频所做的笔记Vue基础第一个Vue程序导入开发版本的Vue.js<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>创建Vue实例对象，设置el属性和data属性<div id="app"> {{message}}</div>
复制链接

扫一扫