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. 全局唯一的支付和订单id生成算法

    数据库存储的是两个Long类型的复合主键.显示到页面的是一个27位的数字单号 package com.yunyihenkey.common.idworker; /** * * @desc * @aut ...

  2. Python 字符串常见的用法

    line = “ni hao wo jiao key” line.capotalize()#首字母大写 line.center(20)#居中显示固定的字符 line.count('n')#计数,计算该 ...

  3. react antD 日期选择

    <DatePicker disabledDate={disabledDate} onChange={this.onChange} /> //创建时间禁用大于当前时间 <moment( ...

  4. 诊断：expdp导出时遇到错误ORA-31693和ORA-00922

    11.2.0.1使用数据泵expdp导出时,如果使用parallel,可能会遇到 ORA-: Table data object "OWNER"."TABLE" ...

  5. 小程序接口越过域名和https限制方法

    都知道小程序上线接口需要域名,还需要https,就算是体验版的都是需要的,这样就筛选掉一大批开发者,像我这样只有学生轻量级服务器的学生要开发自己的小程序就很为难,但今天确惊奇的在小程序社区里面找到了用 ...

  6. 字符串、散列--P1598 垂直柱状图

    题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过100个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. 输入输出格式 输入格 ...

  7. Python利用带权重随机数解决抽奖和游戏爆装备问题

    关于带权随机数 为了帮助理解,先来看三类随机问题的对比: 1.已有n条记录,从中选取m条记录,选取出来的记录前后顺序不管. 实现思路:按行遍历所有记录,约隔n/m条取一个数据即可 2.在1类情况下,还 ...

  8. Python json & pickle & shelve模块

    json & pickle 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇 ...

  9. Java并发编程：线程池 - 实例

    代码块: public class test { public static void main(String[] args) { test t = new test(); ThreadPoolExe ...

  10. A + B Problem Too

    Problem Description This problem is also a A + B problem,but it has a little difference,you should d ...