https://cn.vuejs.org/

生产版本是经过压缩后的版本，它里面把一些没用的警告的代码删除掉了所以它会更精悍一些。

直接引入CDN的网址我们就可以使用Vuejs了。使用生产版本或者CDN的形式来使用Vuejs也可以。

在index.html里面可以写一段html的标准模板。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue入门</title>

    <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->

    <script type="text/javascript" src="./vue.js"></script>

</head>

<body>

    <div id="root">hello world</div>

    <!--引入了vue.js这个库，还没有真正使用这个库-->

    <script type="text/javascript">

        new Vue({

           // 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例

           // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)

             el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>

           // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素

           // 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区

           // 域的内容，所以这个实例的挂载点就是id=root的这个标签

             data: {//这个Vue实例里面会有一些数据

                 msg: "hello world" //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去

                    //使用这个Vue实例里面的这个msg数据了。

             }

        })

    </script>

</body>

</html>

使用这个Vue实例里面的这个msg数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue入门</title>

    <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->

    <script type="text/javascript" src="./vue.js"></script>

</head>

<body>

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

    <!--引入了vue.js这个库，还没有真正使用这个库-->

    <script type="text/javascript">

        new Vue({

           // 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例

           // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)

             el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>

           // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素

           // 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区

           // 域的内容，所以这个实例的挂载点就是id=root的这个标签

             data: {//这个Vue实例里面会有一些数据

                 msg: "hello world3" //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去

                    //使用这个Vue实例里面的这个msg数据了。

             }

        })

    </script>

</body>

</html>

使用Vue写代码不会有任何DOM的操作，而着重于数据的编写，当你数据写好了之后，Vue会帮助我们接管DOM的操作，它会自动的帮我们去替换掉标签里的一些占位符。

通过script的标签的方式引入Vuejs。Vue实例和挂载点的一个绑定方式。实例、挂载点还有模板之间的关系。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue入门</title>

    <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->

    <script type="text/javascript" src="./vue.js"></script>

</head>

<body>

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

    <!--引入了vue.js这个库，还没有真正使用这个库-->

    <script type="text/javascript">

        new Vue({

           // 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例

           // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)

             el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>

           // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素

           // 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区

           // 域的内容，所以这个实例的挂载点就是id=root的这个标签

             data: {//这个Vue实例里面会有一些数据

                 msg: "hello world3" //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去

                    //使用这个Vue实例里面的这个msg数据了。

             }

        })

        //在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM

        //var dom = document.getElementById("root")

        //dom.innerHTML = "hello world"

        //在Vue里面写代码和以前不一样

        //在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和

        //这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面

    </script>

</body>

</html>

2-1 创建第一个Vue实例的更多相关文章

  1. 创建第一个vue实例

    一.vue安装与下载 1. 官网下载  下载地址 选择开发版本 2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中. 3. 新建index.html文件,在hea ...

  2. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  3. 创建一个vue实例

    创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...

  4. vue3官网介绍，安装，创建一个vue实例

    前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...

  5. 前端框架之Vue(1)-第一个Vue实例

    vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...

  6. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  7. 一步步创建第一个Vue项目

    写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...

  8. 创建第一个vue工程

    vue创建项目(npm安装→初始化项目) 第一步npm安装 首先:先从nodejs.org中下载nodejs   图1 双击安装,在安装界面一直Next   图2   图3   图4 直到Finish ...

  9. Windows10安装node.js，vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

随机推荐

  1. valgrind检查代码内存泄漏，5种内存泄漏情况

    摘要: valgrind是linux下用于调试程序和查找内存泄露的常用工具.valgrind会报告5种内存泄露,"definitely lost", "indirectl ...

  2. HDU - 2050 - 折线分割平面（数学 + dp）

    题意: 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要求的是n条折线分割平面的最大数目.比如,一条折线可以将平面分成两部分,两条折线最多可以将平面分成7部分 思路: 记住结论.. ...

  3. geth搭建以太坊私链及常用操作

    一.下载安装geth客户端 https://www.ethereum.org/ 二.搭建私有链 1.准备创世区块配置文件 要运行私有链,我们就需要定义自己的创世区块,创世区块信息写在一个json格式的 ...

  4. jet flow in a combustion chamber

    Table of Contents 1. contacts 2. Paper digest 2.1. LES vs. RANS 2.2. Dynamics of Transient Fuel Inje ...

  5. 后台工具screen

    之前在putty之类的远程命令行操作服务器的时候,遇到关闭软件,对应的操作就会关闭.很多时候,就是开着电脑,然后挂在那里,虽然不用电脑跑,但是也耗电...主要是putty这些软件有时候会伴随黑屏崩掉. ...

  6. Ubuntu挂载硬盘，修改卷标

    Ubuntu挂载硬盘,修改卷标转载2016-03-06 17:03:21标签:ubuntu Ubuntu不像windows,硬盘插入电脑不会自动读取硬盘 数据,需要把硬盘挂载到文件夹上,然后才能访问硬 ...

  7. c#读取.config文件内容

    今天在做项目的时候,由于程序同时启动多种情况的数据,测试分为多个人,就需要把数据分离开来,于是用了一个临时的配置文件,让测试在配置文件修改相应数据从而让各个测试互相不影响! 步骤: 第一步:添加一个A ...

  8. redis 指定端口 启动

    由于资源紧张 需要多创建一个redis实例 重新copy一份实例,然后修改redis.conf文件, 找到port 6379 处修改 端口号 6380 通过下面命令启动就好了 src/redis-se ...

  9. 《阿里巴巴Java开发手册》更新为《Java开发手册》

    新版一览:华山版<Java开发手册> <阿里巴巴Java开发手册>始于阿里内部规约,在全球Java开发者共同努力下,已成为业界普遍遵循的开发规范,涵盖编程规约.异常日志.单元测 ...

  10. 关于Scrum 实战故事录播的感悟升级

    昨晚与几位自组织的伙伴进行了<Scrum 实战> 第17 章 <富有成效的每日站会>录播Sprint 不断的优化和精进的感悟. 首先,D兄给予了如下的建议: 1. 将段落 分得 ...