-VUE--优快云博客

官方网站：https://cn.vuejs.org/

一、概述

1.1、特点

渐进式框架：Vue 是渐进式的，意味着你可以根据项目的需求逐步采用 Vue 的不同功能。你可以从一个简单的组件开始，逐渐引入路由、状态管理等功能，而不必一开始就采用整个 Vue 生态系统。这种灵活性使得 Vue 可以方便地集成到现有的项目中。

响应式数据绑定：Vue 采用了响应式系统，当数据发生变化时，与之绑定的 DOM 元素会自动更新。通过简单的语法，开发者可以将数据绑定到 DOM 节点上，实现数据与视图的同步。

组件化开发：Vue 鼓励使用组件化的方式来构建应用。组件是 Vue 应用中可复用的、独立的代码块，每个组件都有自己的模板、逻辑和样式。组件化使得代码的可维护性和可复用性大大提高。例如，一个按钮组件可以在多个地方重复使用。

1.2、应用场景

单页面应用（SPA）：由于 Vue Router 和 Vue 的轻量级特性，非常适合开发单页面应用。单页面应用在用户体验上更加流畅，避免了页面的刷新，常见的如企业官网、电商平台的前台页面等。

移动应用：结合 Vue Native 或 Weex 等技术，Vue 可以用于开发跨平台的移动应用，实现一次开发，多平台部署。

数据可视化：Vue 可以与各种数据可视化库（如 ECharts、D3.js 等）结合使用，用于构建交互式的数据可视化界面，如报表系统、监控系统等。

二、基本用法

2.1、差值表达式

基本语法及使用

Vue 差值表达式使用双大括号 {{ }} 包裹要显示的数据

{{message}}

引入我们所需要使用的工具

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

<div id="app">
        <h1>差值表达式</h1>
        <lable>欢迎语：</lable><lable>{{message}}</lable><br/>
        <lable>姓名：</lable><lable>{{person.name}}</lable><br/>
        <lable>年龄：</lable><lable>{{person.age}}</lable><br/>
        <lable>性别：</lable>{{person.gender==1?'男':'女'}}<br/>
        <lable>欢迎语大写：</lable>{{message.toUpperCase()}}<br/>
        <lable>{{number1}} / {{number2}} = </lable>{{number1/number2}}<br/>
    </div>
    

    <script>
        //获得vue工具库
        const {createApp} = Vue
        //创建vue数据结构
        createApp({
            data(){//处理跟数据相关的
                return {//返回数据
                    message:'Hello Vue',//字符串
                    person:{//对象
                        name:'张三',
                        age:18,
                        gender:1
                    },
                    number1:10,//数字
                    number2:5
                }
            }
        }).mount('#app')//将vue处理过程绑定到页面中div元素上
    </script>

运行效果

2.2、强制数据绑定

在 Vue 里，有时候需要强制更新数据绑定，以确保视图能及时响应数据的变化。

在 Vue 中，v-bind 指令用于动态地绑定一个或多个 HTML 属性、组件的 props 、类名（class）属性、样式（style）属性、布尔属性、。

<div id="app">
        <h1>{{title}}</h1>
        <p>
            <lable>用户名称：</lable><input type="text" v-bind:value="username">
            <label>{{username_info}}</label>
        </p>
        <p>
            <lable>用户密码：</lable><input type="text" :value="password">
            <label>{{password_info}}</label>
        </p>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return {
                    title:'强制数据绑定,可以将数据绑定至元素的属性上',
                    username:'admin',
                    password:'123123',
                    password_info:'请输入密码',
                    username_info:'请输入用户名'
                }
            }
        }).mount("#app")
    </script>

运行结果

2.3、事件绑定

Vue 使用 v-on 指令来绑定事件，它有缩写形式

<div id="app">
        <h1>{{title}}</h1>
        <p>
            <lable>用户名称：</lable><input type="text" v-bind:value="username">
            <lable>{{username_info}}</lable>
        </p>
        <p>
            <lable>用户密码：</lable><input type="text" :value="password">
        </p>
        <p>
            <button type="button" v-on:click="fillAdmin">使用ADMIN用户</button>
            <button type="button" @click="fillGuest">使用GUEST用户</button>
            <button type="button" @click="fillXiaopaopao('xiaopaopao')">使用Xiaopaopao用户</button>
        </p>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){//与数据相关的
                return {
                    title:'强制数据绑定,可以将数据绑定至元素的属性上',
                    username:'wahaha',
                    password:'123123',
                    username_info:'请输入用户名'
                }
            },
            methods:{//自定义函数
                fillAdmin:function(){
                    this.username = 'admin'
                    this.password = '111111'
                },
                fillGuest(){
                    this.username = 'guest'
                    this.password = '000000'
                },
                fillXiaopaopao:function(name){
                    this.username = name
                    this.password = name
                }
            }
        }).mount("#app")
    </script>

当你点击按钮时两个输入框中的值随之发生改变

2.4、默认事件形参

在 JavaScript 中，当处理 DOM 事件时，事件处理函数通常会接收一个事件对象作为参数。这个事件对象包含了与事件相关的各种信息，如鼠标位置、键盘按键状态等。有时候，我们可能希望为事件处理函数的参数提供默认值，以便在没有传递实际参数时也能正常工作。

<div id="app">
        <button type="button" @click="getText">按钮</button>
        <button type="button" @click="getText2($event,'Tom')">按钮2-向函数中传递数据</button>
        <form action="http://www.163.com" method="post">
            <button type="submit" @click="go1">跳转到网易-阻止跳转行为</button>
            <button type="submit" @click.prevent="go2">跳转到网易-阻止跳转行为</button>
        </form>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{}
            },
            methods:{
                getText:function(event){
                    //默认情况下会提供形参，用于接收元素的数据
                    alert(event.target.innerHTML)
                },
                getText2:function(e,name){
                    alert(name+"点击了"+e.target.innerHTML)
                },
                go1(e){
                    //阻止跳转行为
                    e.preventDefault()
                },
                go2(){}
            }
        }).mount("#app")
    </script>

2.5、停止事件冒泡行为

<div id="app">
        <div style="width: 300px;height: 300px; background-color: aqua;" @click="showAqua">
            <div style="width: 150px;height: 150px;background-color: green;" @click.stop="showGreen"></div>
        </div>
    </div>
    
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{}
            },
            methods:{
                showAqua(){
                    alert('aqua')
                },
                // showGreen(event){
                //     alert('greeen')
                //     event.stopPropagation()
                // }
                showGreen(event){
                    alert('greeen')
                }
            }
        }).mount("#app")
    </script>

当你点击绿色方块，提示框就会有“green”的提示，点击蓝色方块就会有“aqua”的提示

2.6、键盘监听

在 Vue 中，事件监听可以使用多种修饰符来改变事件的默认行为，使事件处理更加灵活和便捷。

事件捕获修饰符.capture，阻止事件冒泡修饰符.stop，阻止默认行为修饰符.prevent，按键修饰符.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right 等，鼠标按钮修饰符.left、.right、.middle，一次性事件修饰符.once，自调用修饰符.self

<div id="app">
        <input type="text" value="" @keyup="test1">
        <input type="text" value="" @keyup.enter="test2">
    </div>
    
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{}
            },
            methods:{
                test1(event){
                    if(event.keyCode == 13){
                        alert("你按了回车键")
                    }
                },
                test2(){
                    alert("你按了回车键")
                }
            }
        }).mount("#app")
    </script>

2.7、双向数据绑定

Vue.js 提供了便捷的双向数据绑定语法 v-model。

在 Vue 实例中定义了 message 作为数据模型。

使用 v-model 指令将输入框和 message 进行双向绑定，输入框内容改变时 message 会自动更新，message 改变时输入框内容也会更新。

<div id="app">
        <h1>双向数据绑定的演示</h1>
        <p>
            用户名称：<input type="text" v-model="user.username">
        </p>
        <p>
            用户密码：<input type="password" v-model="user.password">
        </p>
        <p>
            性别：
            <input type="radio"  name="gender" value="man" v-model="user.gender">男
            <input type="radio"  name="gender" value="woman" v-model="user.gender">女
        </p>
        <p>
            爱好：
            <input type="checkbox"  name="hobbys" value="sport" v-model="user.hobbys">运动
            <input type="checkbox"  name="hobbys" value="read" v-model="user.hobbys">读书
        </p>
        <p>
            学历：
            <select v-model="user.education">
                <option value="专科">专科</option>
                <option value="本科">本科</option>
                <option value="研究生">研究生</option>
            </select>
        </p>
        <p>
            用户描述：<textarea ></textarea>
        </p>
        <p>
            <button type="button" @click="show">显示绑定数据</button>
        </p>
    </div>
    
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    user:{
                        username:'张三',
                        password:'123123',
                        gender:'man',
                        hobbys:['sport','read'],
                        education:'本科'
                    }
                }
            },
            methods:{
               show(){
                alert(JSON.stringify(this.user))
                this.user.username = 'guest'
                this.user.password = 'guest'
                this.user.gender = 'woman'
               }
            }
        }).mount("#app")
    </script>

2.8、绑定非控件元素的文本与HTML

在 Vue.js 中，可以使用 {{}} 语法绑定文本，使用 v-html 指令绑定 HTML 内容。

<div id="app">
        <p v-text="link1"></p>
        <p v-html="link2"></p>
    </div>
    
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    link1:'<a href="http://www.163.com">网易</a>',
                    link2:'<a href="http://www.163.com">网易</a>'
                }
            },
            methods:{
                
            }
        }).mount("#app")
    </script>

2.9、class与style绑定

Vue.js 提供了便捷的语法来实现 class 和 style 绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class与style绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .btn1 {
            width: 100px;
            height: 30px;
            font-size: 16px;
            color: #999;
        }
        .btn2 {
            background-color: #efefef;
            border-left: solid 1px #ccc;
            border-top: solid 1px #ccc;
            border-right: solid 2px #666;
            border-bottom: solid 2px #666;
        }
    </style>
</head>
<body>
    <div id="app">
        <button type="button" :class="className1">按钮1</button>
        <button type="button" :class="{btn1:btn1_boolean,btn2:btn2_boolean}">按钮2</button>
        <button type="button" :class="[className1,className2]">按钮3</button>
        <button type="button" :class="btn1_boolean?'btn1':'btn2'">按钮4</button>

        <button type="button" :style="style1">按钮1</button>
        <button type="button" :style="{width:btn_width,height:btn_height}">按钮2</button>
        <button type="button" :style="[style1,style2]">按钮3</button>
        <button type="button" :style="{backgroundColor:style2.backgroundColor}">按钮4</button>
    </div>
    
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    className1:'btn1',
                    btn1_boolean:true,
                    btn2_boolean:true,
                    className2:'btn2',
                    style1:{
                        width:'100px',
                        height:'30px',
                        fontSize:'16px',
                        color:'#999'
                    },
                    btn_width:'100px',
                    btn_height:'30px',
                    btn_fontSize:'16px',
                    btn_color:'#999',
                    style2:{
                        backgroundColor:'blue'
                    }
                }
            },
            methods:{
                
            }
        }).mount("#app")
    </script>
</body>
</html>