什么是Vue？什么又是vue指令？

最新推荐文章于 2023-04-12 22:58:40 发布

青青草原小魔王

最新推荐文章于 2023-04-12 22:58:40 发布

阅读量779

点赞数 13

分类专栏： VUE 文章标签： vue.js 前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_65715980/article/details/125979187

版权

VUE 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、介绍

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue

1.安装

vue由于是框架，所以需要安装所需的插件。

https://cn.vuejs.org/js/vue.js

这个是必需的，打开之后把所有内容复制，然后粘贴到所需要开发的文件中（必须放入js文件）。

最后使用只需引用一下就行。

<script src="../../vue.js"></script>  引入vue框架，中间是存放的js路劲

2.vue基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<div id="app">{{message}}</div>
<body>
    <script src="../../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',//用于挂载要管理的元素
            data: {  //定义数据
                message:"HelloVue",
            }
        });
    </script>
</body>
</html>

在谷歌浏览器中按F12，在开发者模式中console控制台，改变vue对象的message值，页面显示也随之改变。

{{message}}表示将变量message输出到标签h2中，所有的vue语法都必须在vue对象挂载的div元素中，如果在div元素外使用是不生效的。el:"#app"表示将id为app的div挂载在vue对象上，data表示变量对象。

二、Vue指令

1.v-once

v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

    <div id="app">
        <div v-once>{{info}}</div>
    </div>
    <script src="../../vue.js"></script>
    <script>
        let obj = new Vue({
            el: '#app',
            data: {
                info: 'hello'
            }
        })
    </script>

上述{{message}}的message修改后，第一个标签数据会自动改变。

2. v-html

在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

    <div id="app">
        <div v-html="msg"></div>
    </div>
    <script src="../../vue.js"></script>
    <script>
        let obj = new Vue({
            el:'#app',
            data:{
                msg:'<a href="http://www.baidu.com">百度</a>'
            }
        })
    </script>

点击直接跳转百度。

3.v-text

v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。（常用）

    <div id="app">
        <div v-text="msg"></div>
    </div>
    <script src="../../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello word'
            }
        });
    </script>

使用{{message}}是拼接变量和字符串，而是用v-text是直接覆盖字符串内容。

4. v-pre

有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转化的message的变量值，此时我们可以使用v-pre标签。

    <div>
        <div v-pre>{{msg}}</div>
    </div>
    <script src="../../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello word'
            }
        });
    </script>

使用v-pre修饰的dom会直接输出字符串。

5.v-cloak

有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示msg变量的值，div中的v-cloak元素被移除。

    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script src="../../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello word'
            }
        });
    </script>