Vue.js学习笔记(二)
Vue.js不支持IE8及以下的版本,因为vue使用了IE8无法模拟的ECMAScript5的特性,它支持所有兼容ECMAScript5的浏览器。
<!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">
<title>Hello World</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">{{content}}</div>
<script>
//原生js实现hello world
// var dom = document.getElementById("app");
// dom.innerHTML = 'Hello World!';
// setTimeout(function() {
// dom.innerHTML = 'bye world'
// }, 2000); //vue实现hello world
//使用vue之后不需要关注任何dom的操作,只需把精力集中到数据的管理之上,
//数据放的是什么,页面展示的就是什么,数据改变了,页面就会跟着改变
var app = new Vue({
el: '#app', //限制了一个vue实例处理的DOM范围
data: {
content: 'Hello World!' //data用于定义一些数据
}
});
setTimeout(function() {
app.$data.content = 'bye world' //两秒之后content内容变成bye world
}, 2000)
</script>
</body> </html>
Vue.js学习笔记(二)的更多相关文章
- vue.js学习笔记(二)——vue-router详解
vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...
- vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue.js 学习笔记之二:数据驱动开发
在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...
- Vue.js 学习笔记 一
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- Vue.js学习笔记(一) - 起步
本篇将简单介绍一下Vue.js,并在Node.js环境下搭建一个简单的Demo. 一.简介 我个人理解,Vue.js是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与Angular 1 ...
- Vue.js 学习笔记 第7章 组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...
随机推荐
- Java未赋值变量的默认初始值
在 Java 程序中,任何变量都必须经初始化后才能被使用.当一个对象被创建时,实例变量在分配内存空间时按程序员指定的初始化值赋值,否则系统将按下列默认值进行初始化: 数据类型 初始值 byte 0 s ...
- 2018软工实践—Beta冲刺(6)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Beta 冲鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调组内工作 最终测试文稿编写 展示GitHub当日代码/文档签入记录 ...
- 福大软工1816 · 评分结果 · beta冲刺总评
作业地址:beta答辩总结.beta冲刺7.beta冲刺6.beta冲刺5.beta冲刺4.beta冲刺3.beta冲刺2.beta冲刺1.beta冲刺前准备 作业提交准则 按时交 - 有分 晚交 - ...
- HDU 4568 Hunter 最短路+TSP
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4568 Hunter Time Limit: 2000/1000 MS (Java/Others)Me ...
- ResNet笔记
参考: Deep Learning-TensorFlow (14) CNN卷积神经网络_深度残差网络 ResNet 先前的研究已经证明,拥有至少一个隐层的神经网络是一个通用的近似器,只要提高网络的深度 ...
- frist Django app — 一、 创建工程(转载)
转载地址:https://www.cnblogs.com/sunshine-2015/p/5658283.html 缘起 既然python都学了,学习python的时候感觉是相见恨晚,一种新的编程语言 ...
- Centos7 Zookeeper 集群安装
1:安装java 环境 -openjdk* 2:zookeeper 安装 (官网 http://www.apache.org/dyn/closer.cgi/zookeeper/) 2.1 目录创建 自 ...
- 第二次结对作业-WordCount进阶需求
原博客 队友博客 github项目地址 目录 具体分工 需求分析 PSP表格 解题思路描述与设计实现说明 爬虫使用 代码组织与内部实现设计(类图) 算法的关键与关键实现部分流程图 附加题设计与展示 设 ...
- windows多线程(五) 互斥量 Mutex
一.互斥量 互斥量是windows的一个内核对象,互斥量与关键段的作用相似,可以用来确保全局资源的互斥访问.并且互斥量可以用在不同的进程中的线程互斥访问全局资源. 二.相关函数说明 使用互斥量Mute ...
- ES6 常用1
( (1)交换变量的值 ) [x, y] = [y, x]; ( (2)从函数返回多个值 // 返回一个数组function example() { return [1, 2, 3]; } var [ ...