一、vue安装与下载

1. 官网下载  下载地址

选择开发版本

2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中。

 

3. 新建index.html文件,在head标签内用script标签直接引入vue。

注: 在head标签内引入,而不在body标签内引入,可避免斗屏

4. 新建vue实例

  vue会帮我们接管页面中id=root的元素里面的内容,即:vue实例和这个dom元素做好了绑定。

  el: 指和哪个dom结点作绑定,el是挂载点,用来处理id=root这块的内容

  data: vue实例里会有一些数据,放在data里

二、vue双向绑定数据的原理:

   首先在上面div标签里,声明需要使用msg这个数据,

   下面创建一个vue实例,在data里定义好了msg这个数据。然后用vue实例通过el与上面的div标签作一个绑定,那么msg的数据就会自动的显示在这个div标签里。

  我们会发现,使用了vue,我们不会有任何dom操作,而着手于数据的编写。数据写好后,vue会帮我们接管dom的操作,它会帮我们自动的替换掉标签里的一些占位符。

三、挂载点、模板、实例

   挂载点:上面的div是vue实例的挂载点,vue实例只会去处理挂载点下面的内容

   模板:挂载点内部的内容都叫模板。

   模板可以放在上面的标签里,也可以放在vue实例里。

    vue会自动地结合模板和数据生成模板中要展示的内容,然后把内容放在挂载点之中

四、编程思路的转变

    如何把div里面的内容从"hello"变成"world"?下图通过操作data里的content实现了,而不去操作dom元素。体现了编程思路的转变。

      

 

创建第一个vue实例的更多相关文章

  1. 2-1 创建第一个Vue实例

    https://cn.vuejs.org/ 生产版本是经过压缩后的版本,它里面把一些没用的警告的代码删除掉了所以它会更精悍一些. 直接引入CDN的网址我们就可以使用Vuejs了.使用生产版本或者CDN ...

  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. java8_api_xml

    xml处理-1    解析xml的两种方式    DOM主要接口介绍    使用DOM解析XML        解析(parse)是指读入一个文件,确认其有正确的格式,然后将其分解成各种元素,使开发者 ...

  2. flutter 容器 几种写法

    1.Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下 ...

  3. 【代码问题】MatConvNet+VS2017编译找不到cl.exe错误

    用vl_compilenn做普通的CPU编译报错: 'cl.exe' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 错误使用 vl_compilenn>check_clpath (li ...

  4. gradle 打包springboot项目,找不到项目jar application.class

    如题:gradle 打包springboot项目,找不到项目jar入口main方法:application.class 检查:lib/目录下没有相应项目的jar包 用gradle命令行查看日志:gra ...

  5. cocos CCLayer glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);ios11闪退 spine动画

    搜索一下方法,找到后替换不同内容: void PolygonBatch::flush () { if (!_verticesCount) return; GL::bindTexture2D(_text ...

  6. Android手机不插USB,使用adb网络远程调试

    最近做项目,需要在手机不插USB的情况下连接设备查看打印的日志,发现可以通过adb connect命令实现: 1.先把手机通过USB与电脑相连 2.使用adb tcpip 5555命令,打开手机的55 ...

  7. htm,css,javascript及其他的注释方式

    转自:http://www.cnblogs.com/dapeng111/archive/2012/12/23/2829774.html 一.HTML的注释方法<!-- html注释:START ...

  8. bzoj5104: Fib数列

    Description Fib数列为1,1,2,3,5,8... 求在Mod10^9+9的意义下,数字N在Fib数列中出现在哪个位置 无解输出-1 Input 一行,一个数字N,N < = 10 ...

  9. WPF 和 百度 eChart 交互

    https://blog.csdn.net/defrt4/article/details/52689052

  10. Centos7之系统优化

    优化条目: 修改ip地址.网关.主机名.DNS等 关闭selinux,清空iptables 添加普通用户并进行sudo授权管理 更新yum源及必要软件安装 定时自动更新服务器时间 精简开机自启动服务 ...