第一个Vue.js案例
第一个Vue.js案例
使用Vue有如下几步
引入文件头
加入数据输出框
创建Vue对象，定义数据
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 第一步：引入头文件 -->
<script src="../vue-2.4.0.js"></script>
<title>Document</title>
</head>
<body>
<!-- 第二步：加入数据输出框 -->
<div id="app">
<div>{{msg + '---' + 123}}</div>
<div>
{{1+2}}
</div>
</div>
<script>
// 第三步：创建Vue对象，定义数据
var vm = new Vue({
el : '#app',
data : {
msg : 'hello Vue!!!'
}
});
</script>
</body>
</html>
案例分析
1、示例参数分析
el : 元素挂载位置（值可以是css选择器，或者DOM元素）
data：数据模型（值是一个对象）
2、插值表达式用法
将值填充到HTML标签中
插值表达式支持基本的计算操（符合js代码规范即可。）
3、Vue代码运行原理分析
概述编译过程的概念（Vue语法->原生语法）
例如：插值表达式就在内部将其解析为js代码
第一个Vue.js案例的更多相关文章
- 从零开始搭建一个vue.js的脚手架
在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简 ...
- 创建Vue.js对象：我的第一个Vue.js输出信息
<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...
- Windows10安装node.js，vue.js以及创建第一个vue.js项目
[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...
- vue.js+web storm安装及第一个vue.js
小白还是自己写一遍吧 1.下载node.js https://nodejs.org/en/download/ 2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像) 安装时间有点长 安装命令:npm ...
- Vue的理解：Vue.js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js 入门指南
1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...
- Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- vue.js有什么用，是用来做什么的（整理）
vue.js有什么用,是用来做什么的(整理) 一.总结 一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面. 1.Vue.js是什么? 渐进式框 ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
随机推荐
- git 使用点
git checkout HEAD 只是缓存恢复到head 头版本,文件还没恢复,最后要执行 git checkout . (点) 才能恢复文件内容 git checkout 只是 ...
- JavaScript中关于隐式转换的一些总结
JavaScript运算符中的隐式转换规律:一.递增递减运算符(前置.后置)1.如果包含的是有效数字字符串或者是有效浮点数字符串,则会将字符串转换(Number())为数值,再进行加减操作,返回值的类 ...
- linux动态监控dstat&&glances&&psutil&&bottle
安装dstat yum install dstat 安装glances yum install python-devel pip install glances 如果我们安装了 Bottle 这个 w ...
- python知识点总结以及15道题的解析
先看知识点总结 一.序列操作符x in s 如果x是列表s的元素,返回True,否则Falses + t 连接两个序列s和ts*n或者n*s 将序列s复制n次s[i] 返回s中第i元素s[i:j]或s ...
- 计算机网络历史与基本概念&分层与参考模型（TCP/IP与OSI）&通信过程
Definition: 计算机网络:使用单一技术相互连接的自主计算机的互联集合. 单台计算机独立自主(不受制于其他计算机),连接介质可以使光纤.铜线也可以是微波.红外.卫星. 互联网络(Interne ...
- MFC加载图片
目录 1. 自适应方法 2. 加载原图方法 1. 自适应方法 /* 自适应方法 */ CRect rect; CRect rect1; CImage image; //创建图片类 image.Load ...
- day 11 笔记
# 装饰器形成的过程 : 最简单的装饰器 有返回值的 有一个参数 万能参数 # 装饰器的作用 # 原则 :开放封闭原则 # 语法糖 :@ # 装饰器的固定模式 #不懂技术 import time # ...
- [HEOI 2013]SAO
Description 题库连接 给你一个 \(n\) 个节点的有向树,问你这棵树的拓扑序个数,对大质数取模.多测,测试组数 \(T\). \(1\leq n\leq 1000, 1\leq T\le ...
- ffmpeg-01-Subtitle
1. ffmpeg简介 2. 摘录文档 2.1 过滤 Filtering 2.1.1 简单滤镜 2.1.2 复杂的滤镜 2.1.3 简单过滤与复杂过滤 2.2 Stream 流复制 2.3 对比图 3 ...
- Jsp和Servlet关系
为什么会出现Jsp? 其实对于服务器来说它只认识Servlet,我们完全可以在Servlet用resp.getWriter().write("");画出网页的界面,但是仅仅一个很简 ...