<!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. sas数据导入终极汇总-之中的一个

    将数据文件读入SAS --DATA Step / PROC IMPORT    1.将SAS文件读入SAS--    data sasuser.saslin;      set "F:\sa ...

  2. mvc中使用remote属性来做ajax验证

    mvc中使用remote属性来做ajax验证比較easy : [Remote("Action", "Controller", AdditionalFields ...

  3. ubuntu,jdk安装成功后,点击eclipse,提示信息A Java RunTime Environment (JRE) or Java Development Kit (JDK)

    A Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Ecl ...

  4. HDFS文件上传下载过程(详图)

  5. 使用ajax验证用户名重复

    继上次的用户注册登录案例之后,对其中的部分功能再做进一步改进.上一版中用户提交表单后才对用户名进行校验,虽然做了回显,但还是感觉功能弱了些.为了能有更好用户体验,不是在用户提交表单后才给提示,而是在用 ...

  6. FragmentPagerAdapter和FragmentStatePagerAdapter的区别

    FragmentPagerAdapter 1:简单的介绍: 该类内的每一个生成的 Fragment 都将保存在内存之中,因此适用于那些相对静态的页,数量也比较少的那种:如果需要处理有很多页,并且数据动 ...

  7. hdu 2018 - 递推

    dp[i][1..4] 第i年时年龄为1234的牛的数目 */ #include <cstdio> #include <cstring> ; ]; int main(){ me ...

  8. HDU-1225 Football Score 模拟问题(水题)

    题目链接:https://cn.vjudge.net/problem/HDU-1225 水题 代码 #include <algorithm> #include <string> ...

  9. [HNOI2006]超级英雄(二分+网络流)

    [HNOI2006]超级英雄 题目描述 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目, ...

  10. Opencv 三次样条曲线(Cubic Spline)插值

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/47707679 1.样条曲线简介 样条曲 ...