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. 微服务网关从零搭建——（二）搭建api网关（不带验证）

    环境准备 创建空的core2.1 api项目  演示使用名称APIGateWay  过程参考上一篇 完成后在appsettings.json 添加节点 "Setting": { & ...

  2. replace、replaceAll、replaceFirst

    replace.replaceAll.replaceFirst这三个函数会java的同学估计都用过,笔者已经用了2年多,可是,我们真的懂他们吗? 概述一下他们三个的用法: · replace(Char ...

  3. css 实现垂直居中

    通用 代码: 1 2 3 4 <div id="parent"> <div id="floater"></div> < ...

  4. P4817 [USACO15DEC]Fruit Feast 水果盛宴

    P4817 [USACO15DEC]Fruit Feast 水果盛宴 现在Bessie的饱食度为 00 ,她每吃一个橙子,饱食度就会增加 AA :每吃一个柠檬,饱食度就会增加 BB .Bessie还有 ...

  5. zabbix+docker

    由于公司线上服务器数量太少,又要用于生产,领导让上zabbix,但熟知zabbix搭建需要LAMP或者LNMP,如果和生产服务器混搭的话,不方便管理,也怕出问题,所以就先使用docker方式搭建管理. ...

  6. * average vector from multiple files--Matlab

    n=359;a=[];b=[];c=[];% for loopfor i=1:n      filename=sprintf('output_%d.dat',i);    fileinfo = imp ...

  7. 洛谷 2824 [HEOI2016/TJOI2016]排序

    [题意概述] 对一个1到n的排列做m次区间排序,最后询问位置q上面的数. [题解] 区间排序的效率是nlogn,所以暴力做的话效率是mnlogn,显然达不到要求. 我们考虑二分答案.如果某个位置的数比 ...

  8. CodeForces - 459C - Pashmak and Buses

    先上题目+: C. Pashmak and Buses time limit per test 1 second memory limit per test 256 megabytes input s ...

  9. java连接数据库（经常用）

    一.配置环境 1.首先下载sqlserver2008驱动文件,找到sqljdbc4.jar文件,将这个文件拷到C:\Program Files\Java\jdk1.8.0_121\jre\lib\ex ...

  10. Ubuntu 16.04通过Trickle限制某个软件的下载/上传速度

    在Linux下没有Windows使用360那样去限制某个软件的速度. 但是通过Trickle可以设置某个软件的网速,但是前提是通过Trickle命令连带启动这个软件才可以,不能中途去设置. 比如现在很 ...