谈谈我对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. linux权限管理-特殊权限

    目录 linux权限管理-特殊权限 一,特殊权限 Linux权限属性chattr概述 linux进程掩码umask linux权限管理-特殊权限 一,特殊权限 1.suid(4000) SetUID( ...

  2. Eclipse为不同的文件类型设置编码格式和编辑器

    不知道大家遇到项目中编码格式不统一的情况没有,哈哈,我们就是,比如java的编码格式是GBK,html等编码是UTF-8,这样会导致很多问题,比如提交了一个UTF-8的java文件到SVN,会导致后端 ...

  3. Ubuntu 18.04安装 pyenv、pyenv-virtualenv、virtualenv、Numpy、SciPy、Pillow、Matplotlib

    1.目前Python版本管理工具有很多,pyenv是比较好用的一款,安装如下: 输入: git clone https://github.com/pyenv/pyenv.git ~/.pyenv ec ...

  4. Java jdom解析xml文件带冒号的属性

    Java jdom解析xml文件带冒号的属性 转载请标明出处: https://dujinyang.blog.csdn.net/article/details/99644824 本文出自:[奥特曼超人 ...

  5. jquery设置下拉框selected浏览器兼容方式

    今天开发过程中偶然发现一个浏览器兼容性问题 当在某些浏览器下面时使用下面的语法会导致值虽然选中了,但是文本没有切换 var options = $("#select").find( ...

  6. localStorage在不同页面之间的设置值与取值--加密 localStorage与解密localStorage

    在aa.vue页面 <template> <div> <h1>在aa页面设置值</h1> <button @click="shezhi& ...

  7. is ==的区别 编码和解码

    1.n=0 n1=0 print(n==n1) ==>true  == 是比较两边的值 2.a="alex " b="alex" print(a==b)= ...

  8. 201871010113-刘兴瑞《面向对象程序设计（java）》第四周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  9. Django signal(信号)

    Django中提供了"信号调度",用于在框架执行操作时解耦,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. Django 内置信号 Model signals pr ...

  10. docker 创建mysql容器并且绑定到本地navicat

    docker pull mysql docker run --name mysql -itd -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root1234 mysql do ...