15分钟上手vue

亮星晨
154 阅读8分钟

VUE 概述

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

引入 VUE

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

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

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

快速入门

直接引入

<!DOCTYPE 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>初识Vue</title>
    <!-- 引入开发版Vue 提前下载好的 -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- Step0: 创建容器 -->
    <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>

总结：

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

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

  • js 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

    • a
    • a+b
    • f()
    • x === y ? ‘a’ : ‘b’

  • js 代码(语句)

    • if(){}
    • for(){}

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

模板语法

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

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

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

<div id="root">
    <h1>hello,{{name}}</h1>
</div>
<!-- 引入开发板版Vue.js -->
<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">点击跳转至百度1</a>
    <!-- 简写方式（不是所有的指令都能简写） -->
    <a :href="url">点击跳转至百度2</a>
</div>
<!-- 引入开发板版Vue.js -->
<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分离，你也就不理解它是什么，为什么，怎么样。所以我以后文章方向还是要把基础打扎实。

数据绑定

<!DOCTYPE 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>
    <!-- 引入Vue.js -->
    <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">
        <!--
			v:model的简写形式：
			<input type="text" v-model="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中的值

<!DOCTYPE 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>事件处理1</title>
    <!-- 引入Vue -->
    <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); //<button>点我更换名字</button>
                    vm.name = "李四";
                }
            }
        });
    </script>
</body>

</html>

2.事件修饰

  • prevent：阻止事件的默认行为，相当于 event.preventDefault() （常用）
  • stop ：阻止事件冒泡 ，相当于event.stopPropagation() （常用）
  • once：事件只触发一次 （常用）
  • capture：开启事件的捕获模式
  • self：只有event.target是当前操作元素时，才触发事件（可用来阻止事件冒泡）
  • passive：事件的默认行为立即执行，无需等待事件回调再执行
  • native：vue中如果你想在某个组件的根元素上绑定事件，需要使用native修饰符示例：

计算属性

  • 计算属性是什么？

    计算属性是Vue对插值表达式的一种优化，通过computed关键字将一个属性进行计算，然后再赋值给Vue对象，让Vue对象直接使用{{}}进行引用

  • 为什么要使用计算属性？

    在使用插值表达式进行取值时，有时候我们想要对表达式进行各种各样的操作（使用链式编程），可能会导致{{}}中的值十分复杂，虽然不会报错，但是会严重影响代码的可读性！这就需要使用计算属性来解决这种问题了。

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

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

<!DOCTYPE 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>计算属性1</title>
    <!-- 引入开发版Vue -->
    <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>
        <!-- slice函数截取firstName前三个字符 -->
        全名:<span>{{firstName.slice(0,3)}}-{{secondName}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
        	firstName:'张',
        	secondName:'三'
        }
    })
</script>
</html>

方式二：使用methods进行实现

<!DOCTYPE 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>计算属性2</title>
    <!-- 引入开发版Vue -->
    <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

<!DOCTYPE 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>计算属性3</title>
    <!-- 引入开发版Vue -->
    <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>

知识拓展

  • methods实现和计算属性实现的比较：使用计算属性实现性能更高，因为计算属性使用了缓存技术，当同一时间内调用同一个计算属性，且这段时间内该计算不发生该改变，不需要执行get方法，而是直接去缓存中取数据，避免了重复计算；而methods就需要重复调用方法

总结

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

侦听器watch

  • 什么是监视属性？

    也称侦听属性，是指使用watch对于属性进行监控，类似于Java中的监听器

  • 监视属性的作用？

    通过检测属性的改变，触发相应的事件

<!DOCTYPE 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>监视属性2</title>
    <!-- 引入开发版Vue -->
    <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">1</div>
    <div v-else-if="m==2">2</div>
    <!-- 后面无法生效，当n变成3时还会报错 -->
    <div>@</div>
    <div v-else="n==3">3</div>

循环

  <div id="app">
        <ul>
            <!-- 遍历数组(这里的in可以用of代替) -->
            <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>
            <!-- 遍历JSON对象 -->
            <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>

后记

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

参考资料：blog.csdn.net/qq_66345100…

avatar
文章
阅读
粉丝