Vue基础学习

搬砖v小工

已于 2023-02-17 21:55:53 修改

阅读量63

点赞数

分类专栏：前端文章标签： vue.js 学习 javascript

于 2023-02-17 00:04:47 首次发布

本文链接：https://blog.csdn.net/van2917/article/details/129075665

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue基础学习

MVC

M:model

V:view

C: controller

MVVM

MVVM把前端的视图层分为了三部M(Model)、VM(ViewModel)、V(View)

M：数据

VM：M和V之间的调度者

V：页面html结构

V通过VM获取M的数据

V通过VM向M保存数据

数据的双向绑定是由VM提供的

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>Document</title>
    <!-- 导入vue的包-->
    
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 将来new的vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
        <!-- v-cloak能够解决 插值表达式闪烁问题 -->
        <p v-cloak>7hert{{msg}}</p>
        
        <h5 v-text='msg'>7hert</h5>
         <!-- 默认v-text是没有闪烁问题的 -->
         <!-- v-text会覆盖元素中原本的内容 但是插值表达式只会替换自己的这个占位符，不会把这个元素的内容清空-->
        <div v-html="html"></div>
        <input type="button" value="按钮" :title="mytitle" v-on:click="show">
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        // 2.创建一个vue的实例
        // 当我们导入包之后，在浏览器的内存中，就多了一个vue构造函数
        var vm = new Vue({
            el: '#app', // 表示，当前我们new的这个vue实例要控制页面上的哪个区域
            data: {
                msg: 'vue基础',
                html: '<h2>htmlh2标签</h2>',
                mytitle: '自sdasd 定义'
            },
            methods: {
                show: function(){
                    alert('dasd')
                }
            }
        });    
    </script>
</body>
</html>

v-cloak 可以解决插值表达式闪烁问题（当网络不稳定时，插值表达式可能出现闪烁问题，数据没有加载成功导致）

v-text 默认是没有闪烁问题，会覆盖元素中原本的内容但是插值表达式只会替换自己的这个占位符，不会把这个元素的内容清空

v-html 能加载html表达式

v-bind 属性绑定机制缩写 :

v-on 事件绑定机制缩写 @

事件修饰符

· .stop 阻止冒泡

· .prevent 阻止默认事件

· .capture 添加事件侦听器时使用事件捕捉模式

· .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

· .one 事件只触发一次

<!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>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: darkcyan;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 使用.stop阻止冒泡-->
        <div class="inner" @click="div1Handler">
            <input type="button" value="ss" @click.stop="btnHandler">
        </div>
        <!-- .prevent阻止默认行为-->
        <a href="http://www.baidu.com" @click.prevent="link">去百度 </a>
        <!-- .capture 添加事件侦听器时使用事件捕捉模式-->
        <!-- <div class="inner" @click.captrue="div1Handler">
            <input type="button" value="ss" @click="btnHandler">
        </div>-->

        <!-- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调-->
        <!-- <div class="inner" @click.self="div1Handler">
            <input type="button" value="ss" @click="btnHandler">
        </div>-->
        <!-- .one 事件只触发一次-->
        <a href="http://www.baidu.com" @click.prevent.once ="link">去百度 </a>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                div1Handler() {
                    console.log('div1Handler');
                },
                btnHandler() {
                    console.log('btnHandler');
                },
                link() {
                    console.log('去百度')
                }
            }
        })
    </script>
</body>

</html>

v-model双向绑定

v-model可以实现表单元素和Model中数据的双向数据绑定

但只能运用在表单元素中

 <h2>{{msg}}</h2>
 <input type="text" v-model="msg">

v-for、v-if、v-show

<!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>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>


<body>
    <div id="app">
        <p v-for="(item, i) in nums">{{i}}---{{item}}</p>
        <p v-for="(item, i) in list">{{i}}---{{item.name}}---{{item.age}}</p>


        <input type="button" value="change" @click="flag=!flag">
        <!-- v-if :每次都会重新删除或创建元素-->
        <p v-if="flag">v-if</p>
        <!-- v-show :不会重新对DOM进行删除或创建操作，只是改变元素的display的样式-->
        <!--v-if有较高的切换性能消耗， v-showv-show有较高的初始渲染消耗-->
        <p v-show="flag">v-show</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                nums: [1, 23, 3, 5],
                list: [
                    {
                        name: 'a',
                        age: 18
                    },
                    {
                        name: 'b',
                        age: 20
                    },
                ]
            },
            methods: {

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

</html>

在这里插入图片描述

自定义指令

		// 自定义指令
        Vue.directive('focus', {
            bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
                el.focus()
            },
            inserted: function () { // 元素插入到DOM中的时候会执行此函数，执行一次
            },
            updated: function () { // 当VNode更新的时候，会执行此函数，可能会触发多次

            }
        })