手挽手带你学VUE：一档 VUE简介以及经常使用内部指令

2023年6月20日 239次阅读 来源: 蒋吉兆

视频教程

由于思否不能插进去视频，视频请人人移步，http://www.henrongyi.top

什么是VUE

VUE是一套用于构建用户界面的渐进式框架,VUE并非一个真正意义上的mvvm框架,它更偏向是一种数据驱动框架.所以我们在进修VUE之前,不管你是传统JS开辟者,照样后端开辟人员,都须要把头脑举行一次转化,在VUE里,数据就是统统,你所瞥见的一切东西,都是数据.

VUE基础入门

在我们一样平常的开辟中,我们常常会运用VUE-CLI脚手架来搭建VUE项目,然则假如我们进修VUE,最好不要直接上手脚手架,如许关于你在VUE的进阶上会增添难度,我们如今采纳传统的引入js的要领来最先VUE的解说

最先HelloWord

国际惯例，在进修一个新的东西之前，一定要先最先一个HelloWord，这里我们先从官网引入vue的js文件。

<!-- 开辟环境版本，包含了有协助的命令行正告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 临盆环境版本，优化了尺寸和速率 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

这两个JS文件对应了我们的差别环境，进修过程当中我们将挑选上面的JS文件来举行进修。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
       {{message}}
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word'
            }
        })
    </script>
</body>
</html>

如许，我们用VUE写的Hello Word 就写好了。

中心基础 模板语法 数据绑定

上面代码中我们用了 {{message}}如许一个东西，这是什么呢？我们管这两个大括号叫插值表达式，插值表达式内部可所以简朴的JS表达式，这里的{{message}}则被替代为了data内的message的数据。我们接下来举例一下简朴的JS表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
       {{message}}
       {{1 + 1}}
       {{isTrue?"真的":"假的"}}
       {{message.split('').reverse().join('')}}
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word',
                isTrue:true,
            }
        })
    </script>
</body>
</html>

人人能够看到，这些在插值表达式内的JS表达式直接返回了运转完成的效果，值得一提的是，差值表达式内的划定规矩和script标签内的划定规矩是相似的。

接下来就是VUE的精华，双向数据绑定。
v-model这个指令是vue中用来举行双向数据绑定的主要指令。人人须要注重，只要在表单元素中才能够运用v-model。而且v-model把dom中的value和vue实例中的data绑定到了一同。二者的变化会相互影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="message" placeholder="我是v-model绑定的数据"></input>
       {{message}}
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word',
                isTrue:true,
            }
        })
    </script>
</body>
</html>

上述代码中，我们转变input中的value值，会发明，message数据也在同时发生着变化。

经常使用指令 v-if v-show v-for

v-if v-else 依据表达式的值的真假前提衬着元素。
v-show 和v-if 差不多 然则 v-show会衬着dom只是隐蔽掉了，而v-if则连dom都不会衬着，当满足前提的时刻，dom才会涌现。

在我们一样平常开辟中，许多时刻想要隐蔽掉某些东西，只要在特定前提下才衬着出来，这里我们举个例子，模仿一下管理员权限。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="message" placeholder="我是v-model绑定的数据"></input>
        <div v-if="message=='admin'">本来你是高贵的管理员大大啊！</div>
    </div>
    <div v-else>告诉我你是谁</div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word'
            }
        })
    </script>
</body>
</html>
 v-for望文生义就是轮回，轮回衬着我们须要的东西
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(key,item) in list" :key="key">{{item.name}}</li>
        </ul>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
               list:[{name:"巧妙"},{name:"奇淼"},{name:"QM"}]
            }
        })
    </script>
</body>
</html>

如许我们经由过程v-for 衬着出了一个列表。

数据绑定和事宜绑定

v-bind数据绑定
v-bind我们称之为数据绑定，我们想要在标签内运用我们data中的数据怎么办？经由过程v-bin就能够完成。我们下面来看例子。v-bind:xxxx能够简写为:xxxx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="myClass">
            我是v-bind影响的数据
        </div>
        <div :style="bindColor">
            我是v-bind影响的数据
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               myClass:'active',
               bindColor:{
                   color:'red'
               }
            }
        })
    </script>
</body>
</html>

v-on事宜绑定

我们能够经由过程v-on来绑定事宜，一样v-on能够简写为@，这里还须要提到在VUE示例中注册事宜的处所，methods
要领我们都写在这个内里，空话不说，上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-on:click="add">+</button>{{num}}<button @click="minus">-</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               num:1
            },
            methods:{
                add(){
                    this.num++
                },
                minus(){
                     this.num--
                }
            }
        })
    </script>
</body>
</html>

总结

如今这些是VUE中最简朴的指令部份,学会他们,你已基础能够写简朴的VUE页面了,然则间隔真正在工作中运用另有间隔,这是VUE的第一步,看完视频后多多熟习API ,敲敲代码.祝你早日步入高等前端的行列.

    原文作者：蒋吉兆
    原文地址: https://segmentfault.com/a/1190000017749874
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞