谈谈我对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. Spinner在Dialog中的使用效果

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/91 背景: 记得很久以前,碰到一个需求场景,需要在Andr ...

  2. 1_Swift概况

    Swift 标准库 解决复杂的问题并编写高性能,可读的代码 概况 Swift标准库定义了用于编写Swift程序的基本功能,其中包括 1.如基本数据类型Int,Double以及String 2.共同的数 ...

  3. 记录console的使用

    一般信息:console.info("这是info") 除错信息:console.debug() 警告提示:console.warn() 错误提示:console.error() ...

  4. Linux实现免密码登录

    一.验证ssh远程登录,未作免密处理的两台机器,登录时,是需要输入密码的 二.本地系统执行 ssh-keygen -t rsa 命令,生成密钥文件 三.在相应的目录下查看生成的密钥文件,其中:id_r ...

  5. springboot依赖

    springboot依赖整合 <parent> <groupId>org.springframework.boot</groupId> <artifactId ...

  6. 学习：SpringCloud(一)

    微服务: 微服务是一种架构模式或者一种架构风格,提倡将单一应用程序划分成一组小的服务==独立部署==,服务之间相互配合.相互协调,每个服务运行于自己的==进程==中. 服务与服务间采用轻量级通讯,如H ...

  7. 详解YUV数据格式

    我们在讲 FFmpeg 系列的时候,有提到 YUV 的.其中包括YUV播放器.简单的YUV格式介绍. 一.YUV简介 YUV,是一种颜色编码方法.常使用在各个影像处理元件中. YUV在对照片或影片编码 ...

  8. [PHP] vscode配置SFTP扩展同步文件

    在我们的项目开发过程中,经常有一种模式,有一台linux的开发机作为我们的测试机器,上面安装了ftp服务.我们在windows系统的本地机器使用IDE编写代码,自动或者保存时同步上传到测试机下,这样就 ...

  9. LR11录制手机/pad App脚本多种方法介绍(Mobile App补丁包)

    总体来说,通过LR录制手机脚本的方式有三种:1)通过代理方式录制,保证手机电脑在同一个网段:2)通过抓包录制,在手机上安装Mobile Recorder:3)通过安卓模拟器录制,本地安装android ...

  10. eclipse git pull 代码 failed 并且报DIRTY_WORKTREE.classpath

    用eclipse git pull代码的时候出现如题错误. 解决办法就是reset reset命令有3种方式: 1.git reset –mixed:此为默认方式,不带任何参数的git reset,即 ...