15分钟上手vue_老汪软件技巧-棋牌游戏开发

作者：老汪软件技巧
发表时间：2024-10-07 00:02
浏览量：

VUE 概述

本文意在快速上手vue，内部细节一概不管，主打能用会用，能出活。

引入 VUE

可以把vue理解成一个别人写的一串代码，可以直接下载引入，也可以通过工程化,npm引入。

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16">script>

具体参考“如何创建一个vue项目”

快速入门

直接引入

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vuetitle>
    
    <script src="./js/vue.js">script>
head>
<body>
    
    <div id="root">
        <h1>Hello,{{name}}!h1>
    div>
    <script>
        //Step1: 设置Vue全局配置，并创建Vue对象
        new Vue({
            //vStep1: 让容器和Vue建立联系。
            // 使用el指定当前Vue示例为哪个容器服务，值通常是CSS选择器字符串
            el: '#root',
            
            // Step2: 进行数据绑定。
            data: {
                name: 'Vue'
            }
        });
    script>
body>
html>

总结：

想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法；root 容器里的代码被称为【Vue模板】；Vue 实例和容器是一一对应的；真实开发中只有一个Vue实例，并且会配合着组件一起使用；{{ xxx }} 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性；一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js 表达式和 js 代码(语句)

js 代码(语句)

js表达式是js代码的子集，它属于特殊的js代码

模板语法

Vue 的模板语法分为插值语法和指令语法，就是把 DOM 数据和实例数据联系起来

插值语法：{{JS表达式}}

作用：用于解析标签体内容

<div id="root">
    <h1>hello,{{name}}h1>
div>

<script src="./js/vue.js">script>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'Vue'
        }
    });
script>

指令语法：v-xxx:

作用：用于解析标签（解析标签属性、解析标签体内容、绑定事件……）

<div id="root">
    <a v-bind:href="url">点击跳转至百度1a>
    
    <a :href="url">点击跳转至百度2a>
div>

<script src="./js/vue.js">script>
<script>
    new Vue({
        el: '#root',
        data: {
            url: 'http://www.baidu.com'
        }
    });
script>

总结：

Vue模板语法有2大类：1.插值语法：功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。2.指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

⭐重点⭐

其实我一直在想，有没有什么办法可以就是说，三言两语解决基础的内容，让人快速上手，我想了想这样不OK，就拿这个模板语法来说，如果不知道getelementbyid，你就不知道VUE的数据DOM分离，你也就不理解它是什么，为什么，怎么样。所以我以后文章方向还是要把基础打扎实。

数据绑定

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定title>
    
    <script src="./xxxxxx/vue.js">script>
head>
<body>
    <div id="root">
        单向绑定数据: <input type="text" v-bind:value="value1"> <br> 
        双向绑定数据: <input type="text" v-model:value="value2">
        
    div>
    <script>
        new Vue({
            el: '#root',
            data: {
                value1: '单向数据绑定',
                value2: '双向数据绑定'
            }
        });
    script>
body>
html>

总结：

Vue中有2种数据绑定的方式：1.单向绑定(v-bind)：数据只能从data流向页面。2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注：1.双向绑定一般都应用在表单类元素上（如：input、select等）2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

数据劫持

一般用不到

事件处理

事件处理需要用到v-on指令，同时还需要搭配methos一起使用

1.通过点击事件修改h1中的值

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理1title>
    
    <script src="./js/vue.js">script>
head>
<div id="root">
    <h1>{{name}}h1>
    <button v-on:click="changeName()">点我更换名字button>
div>
<body>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三'
            },
            methods: {
                changeName(e) {
                    console.log(this); //此处的this代表vm
                    console.log(e.target); //
                    vm.name = "李四";
                }
            }
        });
    script>
body>
html>

2.事件修饰计算属性

方式一：直接使用插件表达式实现

备注：这里的例子过于简单，其实直接使用插件表达式也是没毛病的，但如果在实际开发中遇到需要在插件表达式中进行大量函数调用时，建议使用计算属性

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性1title>
    
    <script src="./js/vue.js">script>
head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstName"> <br>
        名: <input type="text" v-model="secondName"> <br>
        
        全名:<span>{{firstName.slice(0,3)}}-{{secondName}}span>
    div>
body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
        	firstName:'张',
        	secondName:'三'
        }
    })
script>
html>

方式二：使用methods进行实现

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性2title>
    
    <script src="./js/vue.js">script>
head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstName"> <br> 
        名: <input type="text" v-model="secondName"> <br>
        
        全名:<span>{{fullName()}}span>
    div>
body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            secondName: '三'
        },
        methods: {
            //当firstName或secondName发生改变时，fullName函数就会被调用
            fullName() {
                return this.firstName.slice(0, 3) + '-' + this.secondName;
            }
        }
    })
script>
html>

方式三：使用计算属性实现

备注：计算属性底层也是使用数据劫持实现的，需要注意的是计算属性属于Vue对象（可以直接通过Vue调用），但不属于_data

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性3title>
    
    <script src="./js/vue.js">script>
head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstName"> <br> 
        名: <input type="text" v-model="secondName"> <br> 
        全名:<span>{{fullName}}span>
    div>
body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            secondName: '三'
        },
        computed: {
            fullName: {
                //get的调用时机:1）初次调用，get被调用 2）所依赖的data数据发生改变时get被调用（不改变就直接使用缓存） 
                get() { 
                    // console.log(this);//此处的this是Vue
                    return this.firstName + '-' + this.secondName;
                },
                //set方法，用于对fullName这个计算属性进行修改 
                set(value) {
                    console.log("set方法被调用了");
                    const arr = value.split("-");
                    this.firstName = arr[0];
                    this.secondName = arr[1];
                }
            }
        }
    });
script>
html>

知识拓展

总结

计算属性：1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。5.备注：1.计算属性最终会出现在vm上，直接读取使用即可。2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

侦听器watch

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性2title>
    
    <script src="./js/vue.js">script>
head>
<body>
    <div id="root">
        <h2>天气很{{info}}h2>
        <button @click="changeWeather()">切换天气button>
    div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '热' : '冷';
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                }
            },
            //方式一：
              watch: {
                 isHot: {
                     // 程序初识时就执行handler
                     //（换句话说，就是当我们加上这个属性，保存后就执行handler函数）
                     immediate: true,
                     //当isHot属性发生改变时，handler函数就被调用
                     handler(newValue, oldValue) {
                         console.log(
                             'isHot未修改前:' + oldValue + ';' + 'isHot修改后:' + newValue
                         );
                     }
                 }
             } 
        });
        //方式二：（方式一中的isHot其实也是需要加引号的，只是简写了）
        vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {
                console.log('isHot未修改前:' + oldValue + ';' + 'isHot修改后:' + newValue);
            }
        });
    script>
body>
html>

动态绑定样式

意义一般

条件渲染

常用

    <div v-if="n==1">1div>
    <div v-else-if="m==2">2div>
    
    <div>@div>
    <div v-else="n==3">3div>

循环

  <div id="app">
        <ul>
            
            <li v-for="p in persons" :key="p.id">
                {{p.name}}-{{p.age}}
            li>
            
            <li v-for="(p,index) in persons" :key="index">
                {{p}}-{{index}}
            li>
            
            <li v-for="(val,key) in student" :key="key">
                {{val}}-{{key}}
            li>
            
            <li v-for="(number,index) in 3" :key="index">
                {{number}}-{{index}}
            li>
            
            <li v-for="(str,index) in strs" :key="index">
                {{str}}-{{index}}
            li>
        ul>
    div>
body>
<script>
    new Vue({
        el: '#app',
        data: {
            persons: [{
                id: '1',
                name: '张三',
                age: 18
            }, {
                id: '2',
                name: '李四',
                age: 19
            }, {
                id: '3',
                name: '王五',
                age: 20
            }],
            student: {
                name: '张三',
                age: 18,
                gender: '男'
            },
            strs: 'abc'
        }
    });
script>

后记

还有很多，但是要写一个基础的，这就够了，后面我会更新具体的文章

参考资料：/qq_66345100…

上一条查看详情 +自研API接口管理工具APIFirst1.0版本介绍

下一条查看详情 +鸿蒙应用示例：ArkTS中设置颜色透明度与颜色渐变方案探讨