第一个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 ...
随机推荐
- Oracle的TO_CHAR()格式化数字为百分数的字符串
TO_CHAR(-0.926903249,'FM999999990.00') || '%' 说明: 1,(点号) :'99.99' : 点号,不要念为"句号",句号是个圆圈,点号只 ...
- 判断ie8以下 或者ie9以下
1.各种浏览器下载 http://browsehappy.osfipin.com/ 2.ie8浏览器以下 if(![].map) { // IE8浏览器 alert('ie8浏览器') } 3.ie9 ...
- Vacuum Pump Manufacturer Introduction: Airless Pump Bottle
Fillable vacuum pump bottle with matt silver aluminum base and cap and shiny silver aluminum collar. ...
- Java基础知识笔记第七章：内部类和异常类
内部类 /* *Java支持在一个类中定义另一个类,这样的类称为内部类,而包含内部类的类称为内部类的外嵌类 */ 重要关系: /* *1.内部类的外嵌类在内部类中仍然有效,内部类的方法也可以外嵌类的方 ...
- python 基础之集合
集合 s=set('chen xi') s1=['cx','ee','cx'] s2=set(s1)#set为集合 print(s2,type(s2)) s=list(s2) print(s,type ...
- List转为字符串
2019-12-12 20:34:16 方法1: 转换后的格式为:"('111','112','1113')" List list = new ArrayList<>( ...
- 前端代码编译器Hbuilder下载地址和谷歌浏览器下载地址
编译器:HbuilderX 浏览器:谷歌浏览器
- Codeforces Round #579 (Div. 3)D（字符串，思维）
#include<bits/stdc++.h>using namespace std;char s[200007],t[200007];int last[200007][27],nxt[2 ...
- java 实现图片上传功能
1:jsp 页面上传图片按钮在这里我就写相关的代码 <div class="control-group"> <label class="control- ...
- 随机游走模型(Random Walk)
给定了一个时间顺序向量\(z_1,...,z_T\),rw模型是由次序r来定义的,\(z_t\)仅取决于前\(t-r\)个元素.当r = 1时为最简单的RW模型. 给定了向量的其他元素,\(z_t\) ...