vue基础语法笔记

最新推荐文章于 2023-09-03 15:11:52 发布

一个不同寻常的程序猿

最新推荐文章于 2023-09-03 15:11:52 发布

阅读量157

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/tangjiakai05/article/details/107550267

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.v-on绑定事件事件定义在vue实例的methods属性中

如：

也可简写成（v-on:等于:）

2.v-bind绑定属性属性内的值为实例中data对应的值也可以写js表达式

如

也可简写成（v-bind:等于@）

3.v-model 双向绑定如

<input v-model="lastName" />

将input绑定了lastName的值如果input框值修改实例中对应的lastName值也会修改

4.计算属性 computed 用来定义属性计算属性由其他数据计算出来的如

computed:{
    fullName:function () {
        return this.firstName + this.lastName;
    }
}

fullName为firstName和lastName计算而来；好处是若firstName和lastName没变时使用的是上次保存的缓存值，提高性能。

5.侦听器 watch 用来监听值得变化如

watch:{
    fullName: function () {
        this.count ++
    }
}

用来监听fullName的变化

6.v-if和v-show效果相同但v-if不会生成dom v-show生成dom但是display为none 根据dom显示消失频率来决定使用哪个性能更好

7.v-for可以使用:key提高效率但是要求key值不能相同可以使用index 也可以使用不重复的键值如

<li v-for="(item,index) in list" :key="index">{{item}}</li>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>veuIndex</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="root">
    <div title="1111" :click="handleClick">
        <input v-model="firstName" />
        <input v-model="lastName" />
        <div>{{fullName}}</div>
        <div>{{count}}</div>
        <div v-show="show">{{content}}</div>
        <button @click="handleClick">toggle</button>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
    </div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "Hello World",
            content:"ttt",
            firstName:'',
            lastName:'',
            count:0,
            show:true,
            list:[1,2,3]
        },
        methods : {
            handleClick:function () {
                this.show = !this.show;
            }
        },
        computed:{
            fullName:function () {
                return this.firstName + this.lastName;
            }
        },
        watch:{
            fullName: function () {
                this.count ++
            }
        }
    })
</script>
</body>
</html>

一个不同寻常的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础语法笔记

1.v-on绑定事件事件定义在vue实例的methods属性中如：<div v-on:click="handleClick"></div>也可简写成（v-on:等于:）<div title="1111" :click="handleClick"></div>2.v-bind绑定属性属性内的值为实例中data对应的值也可以写js表达式如<div v-bind:title="title" v-on:click="handl.
复制链接

扫一扫