代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue入门</title>

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

</head>

<body>

  <div id="first">{{msg}}</div>

  <script>

      new  Vue({

        //绑定上面的id el指的是vue实例跟哪个dom节点绑定

        el:"#first",

        //挂载点

        data:{

          msg:"健身游泳了解一下"

        }

      })

  </script>

</body>

</html>

效果：

（1）通过

 el:"#first",
将与   id="first"的dom进行绑定、
（2）
data挂载点 与{{    }}里面的数据进行交互

2018-04-27    23:42:55

vue（1） 第一个例子的更多相关文章

  1. ElasticSearch 5学习(5)——第一个例子（很实用）

    想要知道ElasticSearch是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...

  2. MXNet学习～第一个例子～跑MNIST

    反正基本上是给自己看的,直接贴写过注释后的代码,可能有的地方理解不对,你多担待,看到了也提出来(基本上对未来的自己说的),三层跑到了97%,毕竟是第一个例子,主要就是用来理解MXNet怎么使用. #导 ...

  3. emberjs学习一(环境和第一个例子)

    code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } code, pre t ...

  4. Qt之QCustomPlot绘图（一）配置和第一个例子

    最近一个用Qt开发的项目需要绘制坐标曲线,我在老师的指点下使用了QCustomPlot这个插件,使用方法简单,功能还算不错. 可是在网上找了很多资料和博文都只是将官方提供的例子演示一遍,没有系统全面的 ...

  5. 键盘过滤第一个例子ctrl2cap（4.1~4.4）汇总，测试

    键盘过滤第一个例子ctrl2cap(4.1~4.4)汇总,测试 完整源代码 /// /// @file ctrl2cap.c /// @author wowocock /// @date 2009-1 ...

  6. springmvc的介绍和第一个例子

    SpringMVC是Spring 框架自带的一部分. SpringMVC底层基于:Servlet Struts2底层基于:filter struts1底层基于:Servlet spring 各模块 我 ...

  7. 04springMVC结构，mvc模式，spring-mvc流程，spring-mvc的第一个例子，三种handlerMapping，几种控制器，springmvc基于注解的开发，文件上传，拦截器，s

     1. Spring-mvc介绍 1.1市面上流行的框架 Struts2(比较多) Springmvc(比较多而且属于上升的趋势) Struts1(即将被淘汰) 其他 1.2  spring-mv ...

  8. mapReducer第一个例子WordCount

    mapreducer第一个例子,主要是统计一个目录下各个文件中各个单词出现的次数. mapper package com.mapreduce.wordCount; import java.io.IOE ...

  9. Informatica_(2)第一个例子

    PowerCenter Repository Manager1.启动客户端程序连接服务器打开客户端(PowerCenter Repository Manager)PCRM;存储库--配置域--添加新域 ...

  10. GLSL着色语言学习。橙皮书第一个例子GLSL+OpenTK+F#的实现。

    Opengl红皮书有选择的看了一些,最后的讲着色语言GLSL的部分看的甚为不理解,然后找到Opengl橙皮书,然后就容易理解多了. 在前面,我们或多或少接触到Opengl的处理过程,只说前面一些处理, ...

随机推荐

  1. d3创建多个svg元素

    当然也可以创建dom var svg = d3.select('#svg'); svg .slectAll('circle.bb')     //选中DOM中的所有circle.bb标签,当DOM中不 ...

  2. Eclipse规范注释及注释文档的生成

    Eclipse作为JavaIDE(Integrated Development Environment,集成开发环境),可以通过设置自动添加Javadoc注释信息,如@author 作者名.@vers ...

  3. Vue Router高级

    路由组件传参 通过props解耦 const User = { props: ['id'], template: '<div>User {{ id }}</div>' } co ...

  4. pycharm 2020 激活码 破解教程

    以下是安装完pycharm后进行破解!!   1.修改hosts,在hosts文件最后添加2行“0.0.0.0 account.jetbrains.com”和“0.0.0.0 www.jetbrain ...

  5. tp5 查询本年、本月、本周的方法

    tp5自带了一些查询的方法,今天说一下查询本年.本月以及本周的方法 whereTime()//此方法代替了between and 方法 实际用法如下: ->whereTime('时间字段','y ...

  6. delphi 判断两个时间差是否在一个指定范围内

    WithinPastYears.WithinPastMonths.WithinPastWeeks.WithinPastDays ... 判断两个时间差是否在一个指定范围内DateUtils.Withi ...

  7. 获取ThinkPHP

    获取ThinkPHP的方式很多,官方网站(http://thinkphp.cn)是最好的下载和文档获取来源. 官网提供了稳定版本的下载:http://thinkphp.cn/down/framewor ...

  8. JZOJ5143:无心行挽

    Description “What’s left to do when we’ve lost all hope?”“若内心万念俱灰,是否注定无心行挽?”------来自网易云音乐<Golden ...

  9. 阶乘质因子分解——lightoj1035

    #include<bits/stdc++.h> using namespace std; #define ll long long #define maxn 200 int primes[ ...

  10. NX二次开发-UFUN工程图表格注释获取某一列的tag函数UF_TABNOT_ask_nth_column

    NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...