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. git学习（2）----入门

    一.git.github和gitlab的区别 Git诞生于2005年,大神Linus的作品,Github诞生于2008年,没有Git就没有GitHub,Github已成为全球最大的代(tong)码(x ...

  2. [USACO] 奶牛零食 Treats for the Cows

    题目描述 约翰经常给产奶量高的奶牛发特殊津贴,于是很快奶牛们拥有了大笔不知该怎么花的钱．为此,约翰购置了N(1≤N≤2000)份美味的零食来卖给奶牛们．每天约翰售出一份零食．当然约翰希望这些零食全部售 ...

  3. UVA - 820 Internet Bandwidth（最大流模板题）

    题目: 思路: 直接套最大流的模板就OK了,注意一下输出的格式. 代码: #include <bits/stdc++.h> #define inf 0x3f3f3f3f #define M ...

  4. pyinstaller打包问题总结

    1.pyinstaller常见用法 -w:禁止cmd窗口 -F:打包为单文件 比如:pyinstaller -w -F test.py 2.QT中UI转py文件 pyuic5 test.ui -o t ...

  5. idea14远程调试linux下的tomcat

    进入到idea的tomcat的run/debug配置,新建个remote tomcat,然后填写相关信息,如上图(注意远程调试端口). 再选择Startup/Connection,如下图所示: 到此, ...

  6. 工作用linux命令汇总

    mv [filepath] [filepath] 移动,前者位置移动到后面位置,也可以用来重命名(mv test.txt newname.txt) cp [filepath] [filepath] 复 ...

  7. Set Map List Iterator

    Set和Map类似,也是一组key的集合,但不存储value.由于key不能重复,所以,在Set中,没有重复的key. Map放没有顺序的键值对,所有键值对 — 参见 entrySet(),所有键 — ...

  8. Holedox Eating HDU4302 模拟

    Problem Description Holedox is a small animal which can be considered as one point. It lives in a st ...

  9. Ubuntu 16.04解决在虚拟终端（Ctrl+Alt+F1）下显示菱形中文乱码问题

    在安装Ubuntu时,如果默认选择了中文,那么以后进去到虚拟终端就会出现菱形的中文乱码. 其实这个是无解的,但是可以通过以下技巧去实现: 1.把系统转成英文的 sudo gedit /etc/defa ...

  10. MySQL语句给字段值加1

    update tbl_moment_like set like_count = like_count + #{addLikes} where mid = #{mid}