前端框架Vue学习

Januea

已于 2023-02-27 15:58:16 修改

阅读量424

点赞数

文章标签： vue.js 前端框架 webpack

于 2022-01-10 10:36:54 首次发布

本文链接：https://blog.csdn.net/Januea/article/details/122404964

版权

学习网址：

Vue.js 安装 | 菜鸟教程

介绍 — Vue.js

Webpack 入门教程 | 菜鸟教程

使用npm包管理器创建Vue项目

# 全局安装 vue-cli

npm install -g @vue/cli-init

# 创建一个基于 webpack 模板的新项目

vue init webpack my-project

# 这里需要进行一些配置，默认回车即可

? Project name my-project
? Project description (A Vue.js project) in 17.819s
? Project name my-project
? Project description A Vue.js project
? Author balabala
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue-cli · Generated "my-project".

Running eslint --fix to comply with chosen preset rules...
# ========================

> my-project@1.0.0 lint D:\Vue项目\my-project\my-project
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

# Project initialization finished!
# ========================

To get started:

cd my-project
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

使用命令vue ui创建项目（这个得Vue3.0版本以上）

vue ui

第一个Vue程序

1.导入开发版本的Vue.js

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

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

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

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

<div id="app">
        {{message}}
    </div>

运行：

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

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

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

可以设置其他的dom元素？可以使用其他的双标签，不能使用HTML和BODY

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

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

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

一、内容绑定，时间绑定

v-text：设置标签的文本值；默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容；内部支持写表达式。

<div id="app">
        <p v-text="message+'!'"></p>
        <p>上海{{message}}</p>
    </div>

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

v-html：设置元素的innerHTML；内容中有html结构会被解析为标签；

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

解析文本使用v-text，需要解析html结构使用v-html

v-on基础：为元素绑定事件；事件名不需要写on；指令可以简写为@；绑定的方法定义在methods属性中；方法内部通过this关键字可以访问定义在data中的数据

<body>
    <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 @click="changeFood">{{message}}</div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "西红柿炒鸡蛋"
            },
            methods: {
                doIt: function () {
                    alert("做IT");
                },
                changeFood: function () {
                    this.message += '很好吃';
                }
            }
        })
    </script>
</body>

小案例：

计数器，设计一个计数器，当鼠标点击右键时增加1，点击右键时减1，初始值0，最小值是0

<body>
    <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: 0
            },
            methods: {
                add: function () {
                    this.num++;
                },
                sub: function () {
                    if (this.num > 0)
                        this.num--;
                }
            }
        })
    </script>
</body>

小结：

创建Vue示例时：el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this关键字获取data中的数据
v-text指令的作用的：设置元素的文本值，简写为{{}}
v-html指令的作用是：设置元素的innerHTML

二、显示切换，属性绑定

v-show指令的作用是：根据表达式的真假，切换元素的显示与隐藏

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

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

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

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

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="button" value="切换状态" @click="changeShow">
        <input type="button" value="增加年龄" @click="addAge">
        <br>
        <img v-show="isShow" src="ss.gif" height="300px">
        <img v-show="age>=17" src="ss.gif" height="200px">

    </div>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:16
            },
            methods:{
                changeShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        });
    </script>
</body>

v-if：根据表达式的真假，切换元素的显示和隐藏

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

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

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

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <!-- <button  value="按钮切换">按钮切换</button> -->
        <input type="button" value="按钮切换" @click="toggle">
        <p v-if="temp>20">我吃饭了</p>
        <p v-if="isShow">if修饰显示</p>
        <p v-show="isShow">show修饰显示</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temp: 21
            },
            methods: {
                toggle: function () {
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>

v-bind指令的作用是：设置元素的属性（比如：src，title，class）

v-bind:属性名=表达式

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

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

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

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <img v-bind:src="src" alt="">
        <img v-bind:src="src" alt="" :title="imgTitle">
        <p v-bind:class="isActive?'active':''">abaaba</p>
        <p :class="{active:isActive}">我努力</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                src: "ss.gif",
                imgTitle: "图片",
                isActive: true
            },
            methods: {

            }
        });
    </script>
</body>

小案例：

切换图片

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="button" v-show="index!=0" @click="prev" value="上一张">
        <input type="button" v-show="index <imgArr.length-1" @click="next" value="下一张">
        <br>
        <img :src="imgArr[index]" alt="">

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr: [
                    "./images/Snipaste_2022-01-12_11-09-05.png",
                    "./images/Snipaste_2022-01-12_11-09-19.png",
                    "./images/Snipaste_2022-01-12_11-09-27.png",
                    "./images/Snipaste_2022-01-12_11-09-34.png",
                    "./images/Snipaste_2022-01-12_11-09-40.png"
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        });
        console.log(imgArr);
    </script>
</body>

三、列表循环，表单元素绑定

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

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

语法是（item,index）in 数据

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

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

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <div v-for="(item,index) in arr">
            {{item}} {{index}}
        </div>
        <div v-for="(item,index) in people">
            {{item.name}}{{item.age}}
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: [1, 2, 3, 4, 5],
                people: [
                    { name: "rose", age: 18 },
                    { name: "lisa", age: 19 },
                ]
            },
            methods: {

            }
        });
    </script>
</body>

v-on补充：传递自定义参数，事件修饰符

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

定义方法时需要定义形参来接受传入的参数

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

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

事件修饰符有多种

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <div @click="fn(3,4)" class="c1"></div>
        <input type="text" @keyup.enter="f1()" class="c2">{{msg}}
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: 12
            },
            methods: {
                fn: function (a, b) {
                    console.log(a + b);
                },
                f1: function () {
                    this.msg++;
                    console.log(this.msg);
                }
            }
        });
    </script>
</body>

v-model：获取和设置表单元素的值（双向数据绑定）

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

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

绑定的数据<- ->表单元素的值

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="button" @click="setM()" value="设置值">
        <input type="button" v-model="message" @keyup.enter="getM()">
        <div>{{message}}</div>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "欢迎哦"
            },
            methods: {
                setM: function () {
                    this.message = "艾克阿达"
                },
                getM: function () {
                    alert(this.message)
                }
            }
        });
    </script>
</body>