Vue 前端开发

Vue介绍

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

官网:https://v3.cn.vuejs.org/

Vue 优点

响应式的数据绑定:当数据发生改变,视图可以自动更新,不用关心DOM操作,而专心数据操作

可组合的视图组件:把视图按照功能切分成若干基本单元,可维护、可重用、可测试等

使用Vue的四种方式:

  1. 在HTML中以CDN包形式导入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2 下载js文件保存至本地再导入

<script src="/存储路径/vue.global.js"></script>

3使用npm安装 4使用官方VueCli脚手架构建项目(不建议新手直接用)

使用参考文档https://cn.vuejs.org/guide/quick-start.html

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ message }} <!--引用变量-->
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    message: "hello Vue"  //变量名和对应值
                }
            }
        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ counter }} <!--引用变量-->
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    counter: 0  //变量名和对应值
                }
            },
            // 打开页面执行的函数
            mounted() {
                setInterval(()=> { //周期性执行递加
                    this.counter++
                },1000)
            }
        };
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

模板语法

Vue.js使用了基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层组件实例的数据。所有VUE,js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

数据绑定的常见形式就是使用"双大括号"语法在HTML中插入文本:

<span>Message:{{msg}}</span>

{{msg}}将被替代对应组件实例中msg属性的值。无论何时,绑定的组件实例上msg属性发生改变,插值处内容都会更新

常用指令

指令是指V-前缀的特殊属性,它的作用是当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM

v-text

v-text的效果与{{}}的效果一样,将数据填充到标签中,但是没有闪烁问题!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <p v-text="msg"></p>
        <p>{{ msg }}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "Hello Vue"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

v-html

在某些情况下,从服务端请求的数据本身就是一个HTML代码,如果使用{{}}会将将数据解析为普通文本而非HTML代码,为输出真正的HTML,就需要使用v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ msg }}<br>
        <span v-html="msg"></span>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "<span style='color: red'>Hello Vue!</span>"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-bind

用于动态绑定一个或者多个属性值,或者向另一个组件传递props值

应用场景:图片地址src、超链接herf、动态绑定一些类、样式等

v-bind 指令接受一个参数,以冒号分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <a v-bind:href="url">百度</a>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    url: "https://www.baidu.com"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-bind: 绑定Class

操作元素标签的class和style属性是数据绑定的一个常见需求

例如希望动态切换class,为div显示不同背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
    <style>
        .test {
            width: 200px;
            height: 200px;
            background: grey;
        }
        .active {
            background: orange;
        }
    </style>
</head>
<body>
    <div id="hello-vue">
        <div v-bind:class="{active: isActive}" class="test"> <!--active这个class存在与否取决于数据属性isActive-->
        </div>
        <button type="button" @click="btn">增加样式</button>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    isActive: false  //变量名和对应值
                }
            },
            methods: {
                btn() {
                    // this.isActive = True;
                    // 实现动态切换
                    if (this.isActive) {
                        this.isActive = false
                    } else {
                        this.isActive = true
                    }
                    
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-bind 绑定style

v-bind:style语法非常像css,但其实是一个JavaScript对象。css属性名可以用驼峰式或短横线分隔(kebab-case,记得用引号括起来)命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
    <style>
        .test {
            width: 200px;
            height: 200px;
            background: grey;
        }
    </style>
</head>
<body>
    <div id="hello-vue">
        <div v-bind:style="styleObject" class="test">
            Hello Vue!
        </div>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    styleObject: {
                        background: 'orange',  //变量名和对应值
                        fontSize: '24'
                    }
                }
            }
        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-on

在前端开发中,经常监听用户发生的事件,例如点击、拖拽、键盘事件等,这个时候就需要使用v-on

v-on: 冒号后面是even参数,例如click、change

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <p>点击次数: {{ counter }}</p>
        <button type="button" v-on:click="counter++">按钮</button>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    counter: 0  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

指令缩写

Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:

v-bind缩写

 <!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

常用指令之流程控制

v-if

判断一个元素是否显示

通过seen值的真假来插入/移除元素。

<div id="hello-vue">
        <p v-if="seen">现在你能看到我</p>
        <p v-else>看不到</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     seen: true
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

多分支

 <div id="hello-vue">
        <div v-if="type === 1">
            方式1
        </div>
        <div v-if="type === 2">
            方式2
        </div>
        <div v-else="type === 3">
            方式3
        </div>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     type: 2
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');
    </script>
v-show

与v-if不同的式,v-show的元素始终会被渲染并保留在DOM中,所以v-show只是简单的切换元素display CSS属性

<div id="hello-vue">
        <p v-if="seen">现在你能看到我</p>
        <p v-else>看不到</p>
        <p v-show="seen">看不到了</p>

    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     seen: false,

                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-for

基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法,

其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

// 循环数组
 <div id="hello-vue">
        <ul>
            <li v-for="(c,j) in myArray">
                {{ i }}-{{ c }}
            </li>
        </ul>

    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     myArray: [
                         '主机',
                         '键盘',
                         '鼠标'
                     ]

                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

v-for维护状态:

当Vue正在更新使用v-for渲染的元素列表时,它默认使用"就地更新"的策略。如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并确保他们只在每个索引正确渲染。

为了给Vue一个提示,以便他能跟踪每个节点的身份,从而重用和重新排序现有的元素,你需要为每项提供一个唯一的key属性

<div id="hello-vue">
        <ul>
            <li v-for="(v,k) in myArray" :key="k">
                {{ k }}-{{ v }}
            </li>
        </ul>
    </div>
    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     myArray: {
                         host: '主机',
                         displayer: '键盘',
                         keyboard: '鼠标'
                     }
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-for 选择列表

获取用户选择并赋值另一个变量再实时展示:

 <div id="hello-vue">
        <select @change="selectComputer($event)">
            <option value="None">未选择</option>
            <option v-for="row in computer" :key="row.id" :value="row.id">
                {{ row.name }}
            </option>
        </select>
        <p>当前选择主机ID: {{ selectComputerId }}</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     computer: [
                         {id:1 , name: '联想'},
                         {id:2 , name: '惠普'},
                         {id:3 , name: '华为'}
                     ],
                    selectComputerId: ""
                 }
             },
             methods: {
                 selectComputer(event){
                     console.log(event) //获取该事件的事件对象
                     this.selectComputerId = event.target.value; //获取事件的值
                     if (this.selectComputerId == "None") {
                         this.selectComputerId = "未选择!"
                     }
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-model

双向数据绑定:当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会同步变化

v-model提供表单输入绑定,可以在<input>、<textarea>及<select>元素创建双向数据绑定

v-model指令其实是一个语法糖,背后本质上包含v-bind和v-on两个操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "Hello Vue!"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
单选
<div id="hello-vue">
        <input type="radio" name="go"  value="go" v-model="msg">go<br>
        <input type="radio" name="python" value="python" v-model="msg">python
        <p>选择: {{msg}}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "" //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>
select多选框
<div id="hello-vue">
        <select v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="Go" >GO</option>
            <option value="Pytho" >Python</option>
            <option value="Php" >Php</option>
        </select>
        <p>选择: {{selected}}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    selected: "" //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>
登录示例

获取用户输入用户名和密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <h1>欢迎登陆管理后台</h1>
        <from action="#">
            用户名: <input type="text" v-model="form.username"><br>
            密码: <input type="text" v-model="form.password"><br>
            <button @click="login">登录</button>
        </from>
        <p style="color: red" v-if="notice">用户名或者密码不能为空</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    form: {
                        username: '',
                        password: ''
                    },
                    notice: false
                }
            },
            methods: {
                login() {
                    if (this.form.username == '' || this.form.password == '') {
                        this.notice = true;
                    } else {
                        this.notice = false;
                        console.log(this.form) //获取输入用户名和密码提交服务端

                    }
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

常用指令总结

Vue 常用属性

数据属性

组件data选项是一个函数。Vue会在创建新组件实例的过程中调用此函数,它应该返回一个对象,然后Vue会通过响应系统将其包裹起来,并以$data的形式存储起来在组件实例中。为了方便起见,该对象的任何顶级属性,也会直接通过组件实例暴露

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        {{msg}}
    </div>

    <script>
         const HelloVue = {
            // 定义数据区域
             data() {
                 return {
                     msg: 'Hello Vue!'
                 }
             },
             // 定义函数(方法)区域
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

         console.log(vm.$data.msg)
         console.log(vm.msg)

         vm.msg = 'hello python!'
         console.log(vm.msg)
    </script>
</body>
</html>
方法

在methods选项中定义的方法与data选项中的数据一样,可以在组件的模板中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        {{msg}}
        <p>{{count}}</p>
        <button @click="jia" type="button">递增</button>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     msg: 'Hello Vue!',
                     count: 1
                 }
             },
             // 定义函数(方法)区域
             methods: {
                 jia(){
                     this.count++
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

         console.log(vm.$data.msg)
         console.log(vm.msg)

         vm.msg = 'hello python!'
         console.log(vm.msg)
    </script>
</body>
</html>
计算属性

根据所依赖的数据动态显示新的计算结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        <p>总分: {{sum}}</p> <!--双大括号js基本支持表达式-->
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     math: 60,
                     english: 70

                 }
             },
             // 定义计算属性(缓存)
             computed: {
                 sum: function() {
                     return this.math + this.english
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>
</body>
</html>
监听属性

是一个观察动作,监听data数 据变化后触发对应函数,函数有newValue(变化之后 结果)和oldValue(变化之前结果)两个参数。 当需要在数据变化时执行异步或开销较大的操作时, 这个方式是最有用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        <p>{{count}}</p>
        <button @click="jia" type="button">递增</button>
        <p>监听新值: {{newValue}}, 旧值: {{oldValue}}</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     count: 0,
                     newValue: '',
                     oldValue: '',

                 }
             },
             // 定义函数(方法)区域
             methods: {
                 jia(){
                     this.count++
                 }
             },
             // 定义监听属性(数据发生变化)
             watch: {
                 // 函数名称要与数据属性名称保持一致
                 count(newValue,oldValue){
                     console.log(newValue,oldValue)
                     this.newValue = newValue
                     this.oldValue = oldValue
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>
</body>
</html>

实例生命周期钩子

生命周期是指Vue实例从创建到销毁的过程。就是Vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、卸载等一系列过程,在vue生命周期中提供了一系列的生命周期如下图

Vue Cli脚手架

Vue Cli是什么?

是一个基于Vue.js进行快速开发的完整系统提供:

1 通过@vue/cli实现的交互式的项目脚手架。

2 通过@vue/cli + @vue/cli-service-global实现的零配置原型开发。

3 一个运行时依赖(@vue/cli-service),该依赖:

可升级;

基于webpack构建,并带有合理的默认配置;

可以通过项目内的配置文件进行配置;

可以通过插件进行扩展。

4 一个丰富的官方插件集合,集成了前端生态中最好的工具。

5 一套完全图形化的创建和管理vue.js项目中的用户界面

为什么要使用Vue脚手架?

如果使用Vue开发整个前端项目,自建Vue项目结构及配置比较复杂,例如各种js文件引入、打包上线等,因此为了提高开发效率,官方开发了VueCli脚手架快捷搭建开发环境。

了解NPM

Npm(Node Package Manager),存放javaScript代码共享中心,是目前最大的JavaScript仓库。类似linux yum仓库。

使用Npm

安装Node.js,默认内置npm,下载地址http://nodejs.cn/download/

下载后配置淘宝npm国内仓库:

npm config set registry https://registry.npm.taobao.org --global npm config get registry

常用命令列表

脚手架使用

使用步骤:

1 安装: npm install -g @vue/cli

2 检查版本: vue -V

3 创建项目: vue create 项目名

4 运行项目,访问

项目目录介绍

Vue组件

介绍

Vue组件是一段独立的,能代表页面某一个部分的代码片段,拥有自己的独立数据、JavaScript脚本、以及CSS样式。

组件时可复用的Vue实例,在开发过程中可以经常把重复的功能,封装为组件,达到快捷快发的目的

使用组件的优点:

1 提高开发效率

2 方便重复使用

3 易于管理维护

文件格式

Vue单文件组件(又名*.vue文件,缩写为SFC)是一种特殊的文件格式,它允许讲Vue组件的模板,逻辑与样式封装在单个文件中。

Vue SFC是经典的HTML 、CSS与javaScript三个经典组合的自然延伸。每个*.vue文件由三种类型的顶层代码块组成:

<template>: 部分定义了组件的模板。

<script>: 部分是一个标准的JavaScript模板。它应该导出一个vue组件定义作为其默认导出。

<style>: 部分定义了与此组件关联的CSS。

<template>
    <p class="greeting">{{ greeting }}</p>
</template>

<script>
    export default {
        data() {
            return {
                greeting: "hello world"
            }
        }
    }
</script>

<style>
    .greeting {
        color: red;
        font-weight: bold;
    }
</style>
使用

使用流程:

1、在src/components目录里开发一个组件文件(首字母大写)

2、在父组件里引用子组件import xxx from xxx

3、在默认导出里注册组件

4、在template模板使用组件

注册

使用模板时,这些组件必须先注册以便Vue能够识别。注册又分为两种方式:

全局注册:声明一次,在任何Vue文件模板中使用,一般使用该组件的地方多时使用。

局部注册:在使用组件的Vue中声明和使用,一般只需要解耦代码时使用

全局注册在src/main.js文件中

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Test from './components/Test.vue' //导入组件

const app = createApp(app)
app.use(router).mount("#app");
app.component('Test',Test) //注册组件

全局注册后,在任意意.vue文件里可使用该组件

如在views/home.vue中引用

局部注册:

例如在HomeView.vue中导入一个Test组件

1 先写一个Test组件 在components/Test.vue

<template>
  <div class="test">

  </div>
</template>

<script>
export default {
  name: "Test"

}
</script>

<style scoped>
    .test {
      width: 200px;
      height: 200px;
      background: orange;
    }
</style>

2 在Homeview中导入

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
  <Test></Test> //引用组件
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Test from "@/components/Test"; //导入组件

export default {
  name: "HomeView",
  components: {
    HelloWorld,
    Test,  //注册组件
  },
};
</script>
传参

可以从组件用法中可以看出,组件间的使用关系像是一种嵌套关系,在这个关系中,经常涉及相互传数据的需求,即父组件传子组件,子组件传父组件。

父、子组件的关系可以总结为:prop向下传递,事件向上传递

父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息

父传子:在默认页面中,也用到了父传子,在父组件Home.vue中给引用 的组件传入一个静态的值,子组件通过props属性接收,并在模板中使用

子传父:

  • 1
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值