Vue学习(一)

最新推荐文章于 2024-05-29 17:10:32 发布

良良2号

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量108

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44386939/article/details/114641210

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小demo

mustache语法：{{ xxx }}，用于元素内容部分的展示
可以对元素内容进行简单的 字符串拼接、数字运算等。
el: Vue实例会管理哪个DOM，string | HTMLElement
data: Vue实例对应的数据对象，Object | Function
computed: 计算属性，适用于数据在显示前需要进行简单的处理的情况。
methods: 定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中调用。

<body>
    <script src="js/vue.js"></script>
    <div id='app'>
        <h1>{{message}}</h1>
        <h1>{{firstname + ' ' + lastname}}</h1>
        <h1>{{counter*2}}</h1>
        <h1>{{fullname}}</h1>     
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Vue.js',
                firstname: 'Kobe',
                lastname: 'byrant',
                counter: 100
            },
            computed: {
                // fullname: {
                //     set: function (newName) {
                //         this.firstname = newName.split(' ')[0];
                //         this.lastname = newName.split(' ')[1];
                //     },
                //     get: function () {
                //         return this.firstname + ' ' + this.lastname;
                //     }
                // }
                fullname: function () {
                    return this.firstname + ' ' + this.lastname;
                }
            },
            methods: {
				...
			}
        })
    </script>
</body>

MVVM

在这里插入图片描述

生命周期

生命周期函数，都是作为 options参数 传递给new Vue()的。

一些指令

v-on

用于按钮的点击事件。

<button v-on:click='counter++'>+</button>
<!-- 语法糖@ -->
<button @click='counter++'>+</button>

可以传递参数，通过$event传递MouseEvent对象。

<div id="app">
    <button @click="print(abc, $event)">按钮一</button>
    <!-- <button @click="print">按钮一</button> -->
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            abc: '123'
        },
        methods: {
            print() {
                console.log(arguments);  // {0: '123', 1: 'MouseEvent'}
            }
        }
    });
</script>

v-click的事件监听修饰符

<div id="app">

    <!-- @click.stop 阻止冒泡 -->
    <div @click="divclick()">
        <button @click.stop="btnclick()">按钮</button>
    </div>


    <!-- @click.prevent 阻止浏览器的默认行为 -->
    <form action="31. v_on.html">
        <input type="submit" value="提交" @click.prevent='doSomething()'>
    </form>

    <!-- @click.once 只能点击一次 -->
    <button @click.once='doPrize()'>抽奖一次</button>


    <!-- @keyup.enter 监听enter按键的抬起 -->
    <input type="text" placeholder="输入密码后回车" @keyup.enter='go()'>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {},
        methods: {
            btnclick: function () {
                console.log('按钮被点击了');
            },
            divclick: function () {
                console.log('div被点击了');
            },
            doSomething: function () {
                alert('改变了提交按钮的默认行为');
            },
            doPrize: function () {
                alert('抽了一次奖');
            },
            go: function () {
                alert('密码输入完毕');
            }
        }
    });
</script>

v-if

案例1，v-if根据条件来控制DOM元素的隐显。

<div id="app">

    <!-- v-if -->
    <span v-if='score>=80'>优秀</span>
    <span v-else-if='score>=70'>良好</span>
    <span v-else-if='score>=60'>及格</span>
    <span v-else>不及格</span>

    <!-- 计算属性 -->
    <span>{{getScore}}</span>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 98
        },
        computed: {
            getScore: function () {
                if (this.score >= 80) {
                    return '优秀';
                } else if (this.score >= 70) {
                    return '良好';
                } else if (this.score >= 60) {
                    return '及格';
                } else {
                    return '不及格';
                }
            }
        },
        methods: {}
    });
</script>

案例2，登录方式切换

<div id="app">
    <!-- 绑定key属性用来标识DOM元素，key值不同的两个DOM元素不可复用 -->
    <span v-if='isUser'>
        <label for="username">用户名登录</label>
        <input type="text" id="username" placeholder="输入用户名" key='123'>
    </span>

    <span v-else>
        <label for="email">邮箱登录</label>
        <input type="text" id="email" placeholder="输入邮箱" key='234'>
    </span>
    <button @click="isUser = !isUser">切换</button>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            isUser: true,
        },
        methods: {}
    });
</script>

v-if在DOM中增删，效率低;
v-show为false时，添加内联样式display:none，效率高。

v-for

用来遍历列表。

<ul>
    <li v-for='item in message'>{{item}}</li>
</ul>
--------------------------------------------------
message: ['泰坦尼克号', '这个杀手不太冷', '大话西游']

案例1：点击哪部电影，哪部电影变成红色。
- View层将 被点击的li的序号 通过click函数传入VModel。
- VModel记录当前的序号。

<style>
    .toRed {
        color: red;
    }
</style>
--------------------------------------------------------------
<div id="app">
    <ul>
        <li v-for="(m, idx) in movies" :class='{toRed: idx==curIdx}' @click='chgColor(idx)'>{{m}}</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['泰坦尼克号', '这个杀手不太冷', '霸王别姬', '古今大战秦俑情'],
            curIdx: 0,
        },
        methods: {
            chgColor: function (idx) {
                this.curIdx = idx;
            }
        }
    })
</script>

key值在v-for中的应用。

    <div id="app">
        <ul>
            <!-- 给数组动态绑定key，此时Vue会将数组元素一一对应，阻止数组元素在增删时的复用，高效更新DOM。 -->
            <li v-for="item in items" :key='item'>{{ item }}</li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                items: ['a', 'b', 'c', 'd', 'e']
            },
            methods: {}
        });
    </script>

v-once

该数据仅渲染一次，不会随着之后该数据值的改变而改变。

<h1 v-once>{{meg}}</h1>

v-html

渲染原生html

<h1 v-html="url"></h1>

v-text

和mustache语法类似

<h1 v-text='url'></h1>

v-pre

不经过Vue转义, 原样显示

<h1 v-pre>{{url}}</h1>

v-cloak

Vue解析之后, v-clock被删除。
该属性用于设置 Vue解析之前 的操作

<style>
     [v-cloak] {
         display: none;
     }
 </style>
<h1 v-cloak>{{url}}</h1>

Vue解析之前，有v-cloak属性, h1标签被设置为display:none
Vue解析之后，v-cloak属性被删除, h1标签没有了display:none的样式。

v-bind

标签中的 属性值 是动态变化的。

绑定普通属性值

如src, href

<div id="app">
    <!-- v-bind: 绑定标签的"属性", 可以简写成":" -->
    <img v-bind:src="imageURL" alt="">
    <a v-bind:href="aHref">百度一下</a>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            imageURL: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2565689134,788370536&fm=26&gp=0.jpg',
            aHref: 'https://www.baidu.com'
        },
        methods: {}
    });
</script>

绑定类class(或者style)

类(或者style)属性值传入 对象/数组。

<div id='app'>
     <!-- <h1 class="title" :class="{active: isActive, line: isLine}">{{mesg}}</h1> -->
     <!-- 当要绑定很多类时，可以封装到函数中 -->
     <h1 class="title" :class="getclasses()">{{mesg}}</h1>
     <button @click='chgStyle'>变</button>
 </div>
 <script src="js/vue.js"></script>
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             mesg: '我要变样式了',
             isActive: true,
             isLine: true
         },
         methods: {
             chgStyle: function () {
                 this.isActive = !this.isActive;
             },
             getclasses: function () {
                 return { active: this.isActive, line: this.isLine }
             }
         }
     });
 </script>