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

时间  2019-12-07
标签 手挽手 vue 简介 以及 经常 使用 内部 指令 繁體版
原文   原文链接

视频教程

因为思否不能插入视频，视频请你们移步，http://www.henrongyi.topjavascript

什么是VUE

VUE是一套用于构建用户界面的渐进式框架,VUE并非一个真正意义上的mvvm框架,它更倾向是一种数据驱动框架.因此咱们在学习VUE以前,不管你是传统JS开发者,仍是后端开发人员,都须要把思惟进行一次转化,在VUE里,数据就是一切,你所看见的全部东西,都是数据.html

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文件来进行学习。vue

<!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 就写好了。java

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

上面代码中咱们用了 {{message}}这样一个东西，这是什么呢？咱们管这两个大括号叫插值表达式，插值表达式内部能够是简单的JS表达式，这里的{{message}}则被替换为了data内的message的数据。咱们接下来举例一下简单的JS表达式。npm

<!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绑定到了一块儿。二者的变化会相互影响。app

<!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才会出现。

在咱们平常开发中，不少时候想要隐藏掉某些东西，只有在特定条件下才渲染出来，这里咱们举个例子，模拟一下管理员权限。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 ,敲敲代码.祝你早日步入高级前端的行列.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程