Vue.js入门（一）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>Vue.js入门</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="./js/vue.js"></script>
</head>
<body>
<h1 id="demo1">hello,{{name}}!</h1> <!-- View部分 -->
<h1 id="demo2">hello,china!</h1>
<script> /*model部分*/
var app=new Vue({
el:'#demo1',//声明vue.js管理的边界
data:{ //data核心作用存放显示在页面中的数据，需要是一个对象。
name:'jack'
}
});
</script>
</body>
</html>
第一步：引入vue.js
<script src="./vue.js"></script>
第二步：Vue.js提供了一个Vue，我们需要创建一个对象。
var app=new Vue({
el:'#demo1'; //声明Vue.js管理的边界
data:{ //data核心作用是存放显示在页面中的数据，需要的是一个对象。
name:'jack'
}
});
第三步：在用户界面view中，通过{{}}的形式将data中的数据显示在页面中。
在用户界面中，{{}}代码中绑定的data的key，而在页面中显示的是该key的value。
Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。
tips:
app这个变量会代理Vue中的data数据，所以我们访问data中的数据的时候，直接用app.name就可以了。
这样，如果我们要实现前后台交互，只要将从后台得到的数据，放在data中，页面就会自动绑定，这样就实现了从Model -> View的数据流向。
Vue.js入门（一）的更多相关文章
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js 入门：从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- Vue.js入门
之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...
- Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...
- vue.js 入门学习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- [转]Vue.js 入门教程
本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web 界面的库. Vu ...
- Vue.js入门系列（一）
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
随机推荐
- Spring详解篇之 AOP面向切面编程
一.概述 Aop(aspect oriented programming面向切面编程),是spring框架的另一个特征.AOP包括切面.连接点.通知(advice).切入点(pointCut) . 1 ...
- jquery 操作DOM元素(1)
.clone() 创建一个匹配的元素集合的深度拷贝. .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复 ...
- BootStrap中常用样式类
网格选项 row:行 col--:列(第一个可以为xs[超小]/sm[小型]/md[中型]/lg[大型]:第二个必须为12以内的[列数]) col--offset-:列偏移(第一个同上,第二个范围为1 ...
- shell脚本结构化语句
本文中记录一下shell中的两种循环语句:for和while for循环 for循环是linux shell中最常用的结构,for循环有三种结构:1.列表for循环.2.不带列表for循环.3.C风格 ...
- python中正则表达式在中文字符串匹配时的坑
之前一直有使用python 正则表达式来做中文字符串或者中英文数字混合的字符串的匹配,发现有不少情况下会匹配失灵或者结果混乱,并且在不同操作系统上匹配结果也不一致,查了很久都不知道是什么原因.今天终于 ...
- yii自定义行为组件（简介版）
yii2 给框架底层预定义事件自定义处理程序. 1. common\config\main.php 修改配置文件添加 'as behaviors' => 'backend\behavior ...
- php图片压缩-高清晰度
php高清晰度无损压缩 经常会用到把上传的大图片压缩,特别是体积,在微信等APP应用上,也默认都是有压缩的,那么,怎么样对图片大幅度压缩却仍能保持较高的清晰度呢? 压缩通常是有按比例缩放,和指定宽度压 ...
- Nginx技术深入剖析
Nginx软件功能模块说明 核心功能模块(Core functionality):主要对应配置文件的Main区块和Events区块. 标准的http功能模块: 企业 场景常用的Nginx http功能 ...
- ABAP自定义截取字符串长度函数
SAP 中strlen()只能计算字符串的个数,不能计算含有中文字符串的长度,如字符串“SAP大波霸”,strlen('SAP大波霸') = 6,其实真实长度为3+3*2 = 9.我们可以通过cl_a ...
- 笔记-Python-language reference-5.the import system
笔记-Python-language reference-5.the import system 前言 经常用到import,module,对其中的机制及原理有一定的了解,但没有将各种信息前后连通起来 ...