最厉害的VUE指令，看完你就会了！！！

程序员文章站 2022-03-10 15:27:01

前言Vue.js 自身不是一个全能框架–它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。一、vue.js是什么Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 的核心库只关注视图层，采用自底向上逐层应用的设计。不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue...

前言

Vue.js 自身不是一个全能框架–它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

一、vue.js是什么

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

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

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

提示：以下是本篇文章正文内容，下面案例可供参考

二、声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

代码如下（示例）：

<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>

三、什么是指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
类似于html页面中的属性 `
比如在angular中以ng-xxx开头的就叫做指令
在vue中以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

1、v-clock的使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 对于MVVM的理解 -->
    <!-- 解放DOM -->
    <!-- 指令：就是vuejs为我们提供的方便操作的自定义属性 -->

    <!-- VUE在mvvm的基础上创立使用  M:model数据   V：view页面显示 -->
    <!-- View层，页面显示层 -->
    <div id="app">
        <!-- 1.在使用模板语法的标签上添加v-cloak的指令 -->
        <p v-cloak>{{msg+1+1+1+1+1+1+1+1+1+1+1+1}}</p>
        <!-- 模板语法 -->
    </div>
    <!-- View end -->

    <script src="./js/vue.min.js"></script>
    <script>
        //创建一个vue环境，创建一个VM层
        let vm = new Vue({
            el: '#app',
            data: {//Model层
                msg: 'Hello world'
            }
        })
    </script>
</body>

2、v-text的使用

<body>
    <!-- 指令：标签的自定义属性 -->
    <div id="app">
        <!-- {{userName}} -->
        <div v-text="username"></div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>

3、v-html的使用

<body>
    <div id="app">
        <!-- {{myDiv}} -->
        <div v-html="myDiv"></div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                myDiv:'<h1>Hi</h1>'
            }
        })
    </script>
</body>

4、v-pre的使用

<body>
    
    <div class="wsx">
        <p v-pre>{{say}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'.wsx',
            data:{
                say:'ALL the best!'
            }
        })
    </script>
</body>

5、v-once的使用

<body>
    <div id="app">
        <p v-once>{{msg}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'最初的梦想：宇航员'
            },
            mounted(){
                this.msg='后来我成为了火箭工程编译工程师'
            }
        })
    </script>
</body>

6、v-model的使用

<body>
    <!-- 双向数据绑定 -->
    <div id="app">
        <input type="text" value="" v-model="userName">
        <p>{{userName}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>

7、v-on的使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 解放DOM -->
    <div id="app">
       <input type="text" v-model="num"><br>
       <input type="button" value="+1" v-on:click="add">
       <input type="button" value="-1" @click="sub">
    </div>
    <!-- View end -->

    <script src="./js/vue.min.js"></script>
    <script>
        //创建一个vue环境，创建一个VM层
        new Vue({
            el: '#app',
            data: {
                num:1
            },
            //将num值进行操作
            //methods：用来写页面需要的方法的配置项
            methods:{
                add:function(){
                    this.num +=1
                    //this.num = this.num+1
                },
                sub:function(){
                    this.num -=1
                },
            }
        })
    </script>
</body>

8、v-bind的使用

<body>
    <!-- v-bind：用来绑定属性的 可以简写为：冒号 -->
    <div id="app">
        <img  v-bind:src="srcUrl" alt="">
        <img :src="srcUrl" alt="">
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                srcUrl:'./img/psb.jpg'
            },//这个逗号不可以省略
            mounted(){
                //this也必须要，它是指VM实例
                this.srcUrl='./img/psb (1).jpg'
            }
        })
    </script>
</body>

提示：新人小白一枚，如有不对请多多指教！希望给您带来帮助！多谢。

本文地址：https://blog.csdn.net/weixin_53000915/article/details/110498326