Vue基本使用

最新推荐文章于 2024-03-14 20:42:37 发布

清华小菜

最新推荐文章于 2024-03-14 20:42:37 发布

阅读量249

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/C90283/article/details/121056682

版权

笔记专栏收录该内容

57 篇文章 1 订阅

订阅专栏

在这里插入图片描述
Vue导包使用：

Vue简单使用：mustache语法（双花括号语法）只适用于元素的内容，对于元素内部属性（用v-bind）修改不适用。

v-once：<h2 v-once> {{message}} </h2> 加了v-once属性后之后message的值发生改变此处的值不变，他处的引用值依旧可变。

v-pre:<h2 v-pre> {{message}} </h2> 加了v-pre属性后其里面的内容不进行解析，原封不动的展现。

v-cloak：
在这里插入图片描述

v-html：
在这里插入图片描述
v-bind:
1、动态绑定class（对象语法），v-bind中的类名会与前面固定的类名合并，active与line的属性是否生效由isActive和isLine的值决定（布尔类型）。v-bind可用：类名代替
<div class="title" v-bind:class="{active:isActive,line:isLine}"></div>
2、动态绑定class（数组语法），类名由active与line属性指向的值决定
<div class="title" :class="[active,line]"></div>
3、计算属性
在这里插入图片描述
计算属性的完整内容（可省略）

v-text：会把之前元素里的内容覆盖掉

<div v-text="message"></div>

与js区别：
在这里插入图片描述
v-for遍历数组或对象（v-for加自身，即要复制的元素上）：
v-for="(m,index) in movise"则可通过index访问下标

methods属性添加监听事件：

简单实现当点击列表时其颜色变化，其他不变：

    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
       		<!--(value,key,index)分别对应值、属性、下标-->
            <li v-for="(m,index) in message" @click="iclick(index)" :class="{red:index==isRed}">{{m}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                message:['还抵赖','bihdoj','eqwefwd','wqe'],
                isRed:0,
            },
            methods:{
                iclick:function(index){
                    this.isRed=index;
                }
            }
        })
    </script>

v-on参数问题：
在这里插入图片描述
v-on修饰符：

清华小菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基本使用

Vue导包使用：Vue简单使用：mustache语法（双花括号语法）只适用于元素的内容，对于元素内部属性（用v-bind）修改不适用。v-once：<h2 v-once> {{message}} </h2> 加了v-once属性后之后message的值发生改变此处的值不变，他处的引用值依旧可变。v-pre:<h2 v-pre> {{message}} </h2> 加了v-pre属性后其里面的内容不进行解析，原封不动的展现。v-cloak：v.
复制链接

扫一扫