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

go4it 发布于2019-08-23 14:28 / 1198人阅读

摘要：这样，我们用写的就写好了。真的假的大家可以看到，这些在插值表达式内的表达式直接返回了运行完成的结果，值得一提的是，差值表达式内的规则和标签内的规则是类似的。

视频教程

由于思否不能插入视频，视频请大家移步，http://www.henrongyi.top

什么是VUE

VUE是一套用于构建用户界面的渐进式框架,VUE并不是一个真正意义上的mvvm框架,它更倾向是一种数据驱动框架.所以我们在学习VUE之前,无论你是传统JS开发者,还是后端开发人员,都需要把思维进行一次转化,在VUE里,数据就是一切,你所看见的所有东西,都是数据.

VUE基础入门

在我们日常的开发中,我们经常会使用VUE-CLI脚手架来搭建VUE项目,但是如果我们学习VUE,最好不要直接上手脚手架,这样对于你在VUE的进阶上会增加难度,我们现在采用传统的引入js的方法来开始VUE的讲解

开始HelloWord

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

这两个JS文件对应了我们的不同环境，学习过程中我们将选择上面的JS文件来进行学习。




    
    
    
    Document


    
       {{message}}

这样，我们用VUE写的Hello Word 就写好了。

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

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




    
    
    
    Document


    
       {{message}}
       {{1 + 1}}
       {{isTrue?"真的":"假的"}}
       {{message.split("").reverse().join("")}}

大家可以看到，这些在插值表达式内的JS表达式直接返回了运行完成的结果，值得一提的是，差值表达式内的规则和script标签内的规则是类似的。

接下来就是VUE的精髓，双向数据绑定。
v-model这个指令是vue中用来进行双向数据绑定的重要指令。大家需要注意，只有在表单元素中才可以使用v-model。并且v-model把dom中的value和vue实例中的data绑定到了一起。两者的变化会相互影响。




    
    
    
    Document


    
        
       {{message}}

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

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

v-if v-else 根据表达式的值的真假条件渲染元素。
v-show 和v-if 差不多 但是 v-show会渲染dom只是隐藏掉了，而v-if则连dom都不会渲染，当满足条件的时候，dom才会出现。

在我们日常开发中，很多时候想要隐藏掉某些东西，只有在特定条件下才渲染出来，这里我们举个例子，模拟一下管理员权限。




    
    
    
    Document


    
        
        原来你是尊贵的管理员大大啊！
    
    告诉我你是谁

 v-for顾名思义就是循环，循环渲染我们需要的东西




    
    
    
    Document


    
        
            {{item.name}}

这样我们通过v-for 渲染出了一个列表。

数据绑定和事件绑定

v-bind数据绑定
v-bind我们称之为数据绑定，我们想要在标签内使用我们data中的数据怎么办？通过v-bin就可以实现。我们下面来看例子。v-bind:xxxx可以简写为:xxxx




    
    
    
    Document
    


    
        
            我是v-bind影响的数据
        
        
            我是v-bind影响的数据

v-on事件绑定

我们可以通过v-on来绑定事件，同样v-on可以简写为@，这里还需要提到在VUE示例中注册事件的地方，methods
方法我们都写在这个里面，废话不说，上代码。




    
    
    
    Document
    


    
        {{num}}

总结

现在这些是VUE中最简单的指令部分,学会他们,你已经基本可以写简单的VUE页面了,但是距离真正在工作中使用还有距离,这是VUE的第一步,看完视频后多多熟悉API ,敲敲代码.祝你早日步入高级前端的行列.

服务器托管混合云带你学c带你飞 Vue_Vue Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100664.html

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

摘要：这样，我们用写的就写好了。真的假的大家可以看到，这些在插值表达式内的表达式直接返回了运行完成的结果，值得一提的是，差值表达式内的规则和标签内的规则是类似的。视频教程由于思否不能插入视频，视频请大家移步，http://www.henrongyi.top 什么是VUE VUE是一套用于构建用户界面的渐进式框架,VUE并不是一个真正意义上的mvvm框架,它更倾向是一种数据驱动框架.所以我...

不知名网友 2019-08-02 13:59 评论0 收藏0
手挽手带你学VUE：二档组件开发以及常用全局api

摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。视频教程由于思否不支持视频链接视频请移步 http://www.henrongyi.top 你能学到什么二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。...

fredshare 2019-08-02 14:02 评论0 收藏0
手挽手带你学VUE：二档组件开发以及常用全局api

摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。视频教程由于思否不支持视频链接视频请移步 http://www.henrongyi.top 你能学到什么二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。...

Pink 2019-08-23 14:28 评论0 收藏0
手挽手带你学React：一档 React环境搭建，语法规则，基础使用

摘要：当属性是一个回调函数时，函数接收底层元素或类实例取决于元素的类型作为参数。手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React，所以这次也使用ES6的模式进行教学，如果大家对ES6不熟悉的话,先去看看class相关内容吧，这里我也慢慢带大家一步一步学会React。视频教程视频教程可移步我的个人博客：h...

BicycleWarrior 2019-08-23 15:11 评论0 收藏0
手挽手带你学VUE：三档 VUE构造期内常用属性

摘要：视频教程由于思否不支持视频外链视频请移步你能学到什么手挽手带你学入门三档构造器内部的各种属性的使用，，，，这四个属性，在工作中会经常用到。在构造器的外部我们也可以通过实例来调用方法。视频教程由于思否不支持视频外链视频请移步 http://www.henrongyi.top 你能学到什么手挽手带你学VUE入门三档,VUE构造器内部的各种属性的使用，methods，compute...

wslongchen 2019-08-02 14:02 评论0 收藏0