谈谈我对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. 自定义滚动条样式纯（css）

    啥都不说先看图: 注: 只适合chrom,不适用IE和fireFox 下面展示代码: <html lang="en"> <head> <meta ch ...

  2. Git的使用（2）

    一.git在不同平台下的安装 (1)在linux上安装 如果以centos为例,可以使用yum安装,如下命令: sudo yum install git 如果你在基于debian的发行版上,尝试使用: ...

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

    v3.3.5 下载地址 :itest下载 itest 简介:查看简介 V3.3.5 有 6个功能增强,2个BUG修复 ,详情如下所述. 用户反馈并强烈要求增强的功能实现:    1: 测试用例管理可线 ...

  4. win10连接共享打印机

    一.在运行中输入“\\共享打印机的主机ip”. 二.如果出现下面弹窗: 1.按Win键弹出开始菜单,直接在键盘上按zucelue,这个时候开始菜单里会检索到“编辑组策略”这个程序,按回车运行该程序.2 ...

  5. 高频Python面试题分享

    一.Python语言中你用过哪些方式来实现进程间通信1.队列Queue 2.Pipe管道 只适用于两个进程之间的通信, pipe的效率高于queue 3.共享内存 4.socket套接字(UDP即可) ...

  6. 5. git-lab 项目操作

    项目操作 一.给成员授权项目权限 之前我们是给组增加成员.  当有的项目需要给组下面的成员授权不一样的时候. 我们需要在项目里面给成员授权权限 点击管理区域 点这个项目 看下图,我们可以看到  现在这 ...

  7. 扎西平措 201571030332 《面向对象程序设计（java）课程学习进度条》

    <2019面向对象程序设计(java)课程学习进度条> 周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课余学习时间(小时) 学习收获最大的程序 阅读或编译让我 第一周 20/ ...

  8. day67_10_11

    一.路由跳转 在vue中,路由条状有很多种. 其中有点击事件触发的路由跳转: this.$router.push('/course'); 和通过名字跳转的: this.$router.push({na ...

  9. day49_9_10jQuery剩余

    一.表单筛选器. 在jQuery中有,专门对表单中的元素,进行筛选的表单筛选器. 其实使用基本筛选器也可以筛选出相应的元素,但是,为了jQuery的简便性,以及对表单操作的频繁,这里可以使用专门的筛选 ...

  10. CF343D Water Tree 树链剖分

    问题描述 LG-CF343D 题解 树剖,线段树维护0-1序列 yzhang:用珂朵莉树维护多好 \(\mathrm{Code}\) #include<bits/stdc++.h> usi ...