<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Demo</title>

 </head>

 <body>

     <div id="app">

         app:{{name}}

     </div>

     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

     <script>

         var vm = new Vue({

             el:'#app',

             data:{

                 name:'Vuejs',

             }

         });

     </script>

 </body>

1. div的id为app为vue的element元素，所有的vue操作只能在id为app下

2.实例化时，需要传入一个对象el（element）缩写，确定作用于那个div域下

3.data为参数命名与赋值，在指定的div下可以用{{}}俩个大括号包起来，来使该变量的值

说明：

1.引入的js链接通道：https://www.bootcdn.cn/vue/

2.没有开发环境的可以直接，在线代码调试：http://tool.chinaz.com/tools/webdebugger.aspx

vue.js 第一课：实例化vue的更多相关文章

  1. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  2. Vue.js是什么，vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  3. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  4. Vue.js系列(一)：Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  5. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  6. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  7. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  8. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

  9. Vue.js教程 2.体验Vue

    Vue.js教程 2.体验Vue <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. LeetCode SQL

    SQL查询练习一(From LeetCode) 1 select name,population,area 2 from World 3 where area > 3000000 or popu ...

  2. H5操作WebSQL数据库

    HTML代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  3. PostgreSQL Replication之第三章 理解即时恢复（1）

    到现在为止,您已经掌握了一定的理论.因为生活不仅由理论组成(它可能同样重要),是时候深入实际的工作了. 本章的目标是让您明白如何恢复数据到一个给定的时间点.当您的系统崩溃或者有人意外地删除了一个表,不 ...

  4. Layout Team

    The layout team is a long-term engineering team tasked with maintaining, supporting, and improving t ...

  5. NodeJS学习笔记 进阶 (12)Nodejs进阶：crypto模块之理论篇

    个人总结:读完这篇文章需要30分钟,这篇文章讲解了使用Node处理加密算法的基础. 摘选自网络 Nodejs进阶:crypto模块之理论篇 一. 文章概述 互联网时代,网络上的数据量每天都在以惊人的速 ...

  6. javascript实现多线程 Concurrent.Thread.js

    在这次我的项目中,因为前端要检测硬件加载并识别,再向后台请求发送数据,然后再返回的相应的配置文件!在这过程,要好时好几秒钟,严重影响体验效果,所以在网上靠看的方案,运用多线程去处理,这效果明显改善! ...

  7. POJ 3539 Elevator（同余类BFS)

    题意 有一部电梯,最初停在1层. 电梯有4个按键,上升a,b,c层,回到一层. 求从一层出发.能到达1~h的哪些楼层. (h<=1018,a,b,c<=105) 题解 这种h能大的图论,一 ...

  8. [洛谷P3929]SAC E#1 - 一道神题 Sequence1

    题目大意:给你一串数列,问你能否改变1个数或不改,使它变成波动数列? 一个长度为n的波动数列满足对于任何i(1 <= i < n),均有: a[2i-1] <= a[2i] 且 a[ ...

  9. tab.py

    vim tab.py #!/usr/bin/env python # #Tab import sys import readline import rlcompleter import atexit ...

  10. caioj 1087 动态规划入门（非常规DP11：潜水员）(二维背包)

    这道题的难点在于价值可以多. 这道题我一开始用的是前面的状态推现在的状态 实现比较麻烦,因为价值可以多,所以就设最大价值 为题目给的最大价值乘以10 #include<cstdio> #i ...