Vue笔记

最新推荐文章于 2022-07-04 14:40:14 发布

Dragon Wu

最新推荐文章于 2022-07-04 14:40:14 发布

阅读量109

点赞数 1

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

本文链接：https://blog.csdn.net/qq_50909707/article/details/121060376

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1、v-text会直接覆盖掉元素内的内容，{{}}不会覆盖，并且都可进行字符串拼接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="Vue_2.6.14.js"></script>
</head>
<body>
    <div id="app" class="app">
        <p v-text="message+'!!!!'">你好</p>
        <h4>啦啦啦啦啦啦{{message+"!!!"}}</h4>
    </div>
</body>
<script>
    var app=new Vue({
        el: "#app",
        data:{
            message:"hello vue"
        }
    })
</script>
</html>

2、v-text和v-html的区别:v-text仅显示文字，而v-html可使用标签相对于innerHTML()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="Vue_2.6.14.js"></script>
</head>
<body>
    <div id="app" class="app">
        <p v-text="message">你好</p>
        <h4 v-html="message"></h4>
        <h4>{{message}}</h4>
    </div>
</body>
<script>
    var app=new Vue({
        el: "#app",
        data:{
            message:"<a href='http://www.baidu.com'>去百度看看</a>"
        }
    })
</script>
</html>

3、v-on的两种书写方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="Vue_2.6.14.js"></script>
</head>
<body>
<div id="app" class="app">
    <button v-on:click="hello">v-on使用</button>
    <button @dblclick="hello">v-on简写为@</button>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        methods: {
            hello: function () {
                alert("hello!!!");
            }
        }
    })
</script>
</html>

4、Vue对象的内部可以通过this.名字来访问各个元素。

5、v-if与v-show的区别，v-if会随之值来不断销毁与重构，而v-show不管什么条件都会去渲染通过css来进行切换。一般来说，v-if有更高的切换开销，v-show有更高的初始渲染开销。因此，如果要频繁的切换渲染，用v-show较好；如果运行时条件很少改变用v-if较好。

两者通用,（1）true时显示，(2)可通过绑定值改变显示，（3）可通过表达式判断。

6、v-bind支持三元表达式、判断式，并且可直接将“v-bind:属性”缩写为“:属性”。

7、v-for输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="Vue_2.6.14.js"></script>
</head>
<body>
<div id="app" class="app">
    <div>
        <p v-for="item in arr">
            {{item}}hello
        </p>
    </div>
    <div>
        <p v-for="(it,index) in arr">
            {{index}}{{it}}{{arr[index]}}
        </p>
    </div>
    <div>
        <p v-for="item in obj" :title="item">
            {{item}}
        </p>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            arr:[23,233,2333,23333],
            obj:{name:"Jack",age:12,sex:"male"}
        }
    })
</script>
</html>

8、v-on补充，@key.enter="方法"回车时调用

9、v-model双向绑定，无论修改哪边另一边都会同步更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="Vue_2.6.14.js"></script>
</head>
<body>
<div id="app" class="app">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message:""
        }
    })
</script>
</html>

Dragon Wu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记

1、v-text会直接覆盖掉元素内的内容，{{}}不会覆盖，并且都可进行字符串拼接。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script src="Vue_2.6.14.js"></script></head><body>...
复制链接

扫一扫