创建第一个vue实例
一、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实例的更多相关文章
- 2-1 创建第一个Vue实例
https://cn.vuejs.org/ 生产版本是经过压缩后的版本,它里面把一些没用的警告的代码删除掉了所以它会更精悍一些. 直接引入CDN的网址我们就可以使用Vuejs了.使用生产版本或者CDN ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- 创建一个vue实例
创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...
- vue3官网介绍,安装,创建一个vue实例
前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...
- 前端框架之Vue(1)-第一个Vue实例
vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...
- Node.js npm基础安装配置&创建第一个VUE项目
使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...
- 一步步创建第一个Vue项目
写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...
- 创建第一个vue工程
vue创建项目(npm安装→初始化项目) 第一步npm安装 首先:先从nodejs.org中下载nodejs 图1 双击安装,在安装界面一直Next 图2 图3 图4 直到Finish ...
- Windows10安装node.js,vue.js以及创建第一个vue.js项目
[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...
随机推荐
- java8_api_xml
xml处理-1 解析xml的两种方式 DOM主要接口介绍 使用DOM解析XML 解析(parse)是指读入一个文件,确认其有正确的格式,然后将其分解成各种元素,使开发者 ...
- flutter 容器 几种写法
1.Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下 ...
- 【代码问题】MatConvNet+VS2017编译找不到cl.exe错误
用vl_compilenn做普通的CPU编译报错: 'cl.exe' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 错误使用 vl_compilenn>check_clpath (li ...
- gradle 打包springboot项目,找不到项目jar application.class
如题:gradle 打包springboot项目,找不到项目jar入口main方法:application.class 检查:lib/目录下没有相应项目的jar包 用gradle命令行查看日志:gra ...
- cocos CCLayer glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);ios11闪退 spine动画
搜索一下方法,找到后替换不同内容: void PolygonBatch::flush () { if (!_verticesCount) return; GL::bindTexture2D(_text ...
- Android手机不插USB,使用adb网络远程调试
最近做项目,需要在手机不插USB的情况下连接设备查看打印的日志,发现可以通过adb connect命令实现: 1.先把手机通过USB与电脑相连 2.使用adb tcpip 5555命令,打开手机的55 ...
- htm,css,javascript及其他的注释方式
转自:http://www.cnblogs.com/dapeng111/archive/2012/12/23/2829774.html 一.HTML的注释方法<!-- html注释:START ...
- bzoj5104: Fib数列
Description Fib数列为1,1,2,3,5,8... 求在Mod10^9+9的意义下,数字N在Fib数列中出现在哪个位置 无解输出-1 Input 一行,一个数字N,N < = 10 ...
- WPF 和 百度 eChart 交互
https://blog.csdn.net/defrt4/article/details/52689052
- Centos7之系统优化
优化条目: 修改ip地址.网关.主机名.DNS等 关闭selinux,清空iptables 添加普通用户并进行sudo授权管理 更新yum源及必要软件安装 定时自动更新服务器时间 精简开机自启动服务 ...