谈谈我对Vue的理解

vue就是前端上的Java，前端上的C#。有个前端的虚拟DOM引擎，设计理念和Java，C#类似。我们只需要告诉DOM应该显示什么，而不用去操作DOM元素。

如何引用？

下面是一个helloWord,大家运行感受一下。

<!DOCTYPE html>

<html>

<head>

    <title></title>

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

    <meta charset="utf-8">

</head>

<body>

<div id="app">

    <!--使用 v-cloak能够解决插值闪烁问题-->

    <p>{{msg}}</p>

</div>

<script type="text/javascript">

    //VM层

    var vm = new Vue({

        el:'#app',//表示，当前我们new这个vue的实例，要控制页面上的哪个区域

        //M层

        data:{//data属性中存放的是el中要用的数据

            msg:'HelloWorld'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作dom元素了。

        }

    })

</script>

</body>

</html>

运行效果如下：

这里当导入了vue.js库后，里面会有个Vue的构造器，对应着div。vue构造器中里面的el绑定div，data绑定数据。

解决闪烁问题：

相信新手都遇到过这个问题：

能看到{{msg}}是不是很没有B格？

这时候加个v-cloak属性即可解决

代码如下：有注释肯定能看懂。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style type="text/css">

        [v-cloak]{

            display:none;

        }

    </style>

</head>

<body>

<div id="app">

    <!--使用 v-cloak能够解决插值闪烁问题-->

    <p v-cloak>{{msg}}</p>

</div>

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

<script type="text/javascript">

    //VM层

    var vm = new Vue({

        el:'#app',//表示，当前我们new这个vue的实例，要控制页面上的哪个区域

        //M层

        data:{//data属性中存放的是el中要用的数据

            msg:'欢迎学习Vue'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作dom元素了。

        }

    })

</script>

</body>

</html>

这时候就看不见{{msg}}了

v-bind指令:

v-bind是vue中提供的用于绑定属性的指令实例代码如下：

<!DOCTYPE html>

<html>

<head>

    <title></title>

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

    <meta charset="utf-8">

    <style type="text/css">

        [v-cloak]{

            display:none;

        }

    </style>

</head>

<body>

<div id="app">

    <!--使用 v-cloak能够解决插值闪烁问题-->

    <p v-cloak>{{msg}}</p>

    <input type="button" v-bind:value="value">

</div>

<script type="text/javascript">

    //VM层

    var vm = new Vue({

        el:'#app',//表示，当前我们new这个vue的实例，要控制页面上的哪个区域

        //M层

        data:{//data属性中存放的是el中要用的数据

            msg:'欢迎学习Vue'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作dom元素了。

            ,value:'按钮'

        }

    })

</script>

</body>

</html>

运行结果：

可以看到bind能够绑定属性值。

原理：v-bind会把原属性值变成js变量解析。

注意：v-bind指令可以被简写位：要绑定的属性

v-bind中可以写合法的js表达式。

v-on指令：

Vue中提供了v-on事件绑定机制。

示例代码如下：

<!DOCTYPE html>

<html>

<head>

    <title></title>

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

    <meta charset="utf-8">

    <style type="text/css">

        [v-cloak]{

            display:none;

        }

    </style>

</head>

<body>

<div id="app">

    <!--使用 v-cloak能够解决插值闪烁问题-->

    <p v-cloak>{{msg}}</p>

    <input type="button" v-bind:value="value" v-on:click="show">

</div>

<script type="text/javascript">

    //VM层

    var vm = new Vue({

        el:'#app',//表示，当前我们new这个vue的实例，要控制页面上的哪个区域

        //M层

        data:{//data属性中存放的是el中要用的数据

            msg:'欢迎学习Vue'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作dom元素了。

            ,value:'按钮'

        },

        methods:{//这个methods属性中定义了当前Vue实例所有可用的方法

            show: function(){

                alert("Hello");

            }

        }

    })

</script>

</body>

</html>

截止如下： 我们掌握了如何定义一个基本的Vue代码结构，插值表达式，v-cloak，v-html，v-bind v-on 。

Vue新手入门教程的更多相关文章

  1. 安卓自动化测试（2）Robotium环境搭建与新手入门教程

    Robotium环境搭建与新手入门教程 准备工具:Robotium资料下载 知识准备: java基础知识,如基本的数据结构.语法结构.类.继承等 对Android系统较为熟悉,了解四大组件,会编写简单 ...

  2. Xorboot-UEFI新手入门教程

    Xorboot-UEFI新手入门教程        Xorboot-UEFI是一款UEFI下轻量级的图形化多系统引导程序,pauly于2014年国庆节期间发布了预览版.搜了下论坛,关于Xorboot- ...

  3. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  4. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

  5. 【LaTeX】E喵的LaTeX新手入门教程（6）中文

    假期玩得有点凶 ._.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版 [LaTeX]E喵的LaTeX新手入门教程(3)数学公式 ...

  6. 【LaTeX】E喵的LaTeX新手入门教程（4）图表

    这里说的不是用LaTeX画图,而是插入已经画好的图片..想看画图可以把滚动条拉到底.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础 ...

  7. 【LaTeX】E喵的LaTeX新手入门教程（5）参考文献、文档组织

    这不是最后一篇,明天开始建模所以会从6号开始继续更新.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版 [LaTeX]E喵的La ...

  8. 【LaTeX】E喵的LaTeX新手入门教程（3）数学公式

    昨天熄灯了真是坑爹.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版上一期测试答案1.大家一开始想到的肯定是\LaTeX{}er ...

  9. 【LaTeX】E喵的LaTeX新手入门教程（1）准备篇

    昨天熄灯了真是坑爹.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版上一期测试答案1.大家一开始想到的肯定是\LaTeX{}er ...

随机推荐

  1. Qt Creator配置MSVC调试器

    安装完QT后会看到Qt Creator中的MSVC构建组件带有黄色的感叹号,那是因为没有调试器的原因.由于Qt-MSVC版本套件没有默认安装调试器, 需要我们自己手动下载安装. 根据官方文档http: ...

  2. IOS系统在Safari安装ipa文件

    配置点击下载的地址 itms-services://?action=download-manifest&url= "plist文件路径"plist文件配置 IIS网站配置要 ...

  3. [20190522]How to get dump or list parameters set at session level.txt

    [20190522]How to get dump or list parameters set at session level.txt 1.环境:SCOTT@book> @ ver1PORT ...

  4. SRDC - ORA-1628: Checklist of Evidence to Supply (Doc ID 1682729.1)

    SRDC - ORA-1628: Checklist of Evidence to Supply (Doc ID 1682729.1) Action Plan 1. Execute srdc_db_u ...

  5. I2C硬件与模拟的区别

    硬件I2C对应芯片上的I2C外设,有相应I2C驱动电路,其所使用的I2C管脚也是专用的,因而效率要远高于软件模拟的I2C:一般也较为稳定,但是程序较为繁琐. 硬件(固件)I2C是直接调用内部寄存器进行 ...

  6. itest(爱测试) 4.1.5 发布，开源BUG 跟踪管理 & 敏捷测试管理软件

    v4.1.5下载地址 :itest下载 itest 简介:查看简介 itest 开源敏捷测试管理,testOps 践行者.可按测试包分配测试用例执行,也可建测试迭代(含任务,测试包,BUG)来组织测试 ...

  7. UML类图基础说明

    UML类图主要由类和关系组成. 类: 什么具有相同特征的对象的抽象, 具体我也记不住, 反正有官方定义 关系: 指各个类之间的关系 类图 类就使用一个方框来表示, 把方框分成几层, 来表示不同的信息, ...

  8. 设置了相对定位relative之后，改变top值，如何去掉多余空白？

    众所周知,relative和absolute有一个区别在于relative是相对自身定位,而absolute是相对于最近的定位父级定位,而此时的相对定位经过top值改变其在文档流中的位置之后,自身本来 ...

  9. Jenkins之插件Publish HTML reports的使用

    前提: 下载插件HTML Publisher plugin 一.安装 安装好HTML Publisher plugin之后,会在新建或者编辑项目时,在[增加构建后操作步骤]出现[Publish HTM ...

  10. [C7] 支持向量机(Support Vector Machines) (待整理)

    支持向量机(Support Vector Machines) 优化目标(Optimization Objective) 到目前为止,你已经见过一系列不同的学习算法.在监督学习中,许多学习算法的性能都非 ...