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 ...
随机推荐
- spring冲刺计划
会议召开时间表 日期 时间 内容 05/09 21:00-22:00 讨论题目(未果) 05/10 21:00-21:30 确定题目(网络助手) 05/13 21:00-21:45 讨论软件页面设计 ...
- git学习-综合性文章
文章:[转载]理解 Git 分支管理最佳实践 首先介绍了git各种分支:
- 讲讲Windows10(UWP)下的Binding
前言 貌似最近来问我XAML这块的东西的人挺多的.有时候看他们写XAML这块觉着也挺吃力的,所谓基础不牢,地动山摇.XAML这块虽说和HTML一样属于标记语言,但是世界观相对更加庞大一点. 今天讲讲X ...
- 简单 dp
1.摆花问题 题目描述小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能超过a ...
- JS面向对象（封装，继承）
在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...
- PHP 内置函数strlen 和mbstring扩展函数mb_strlen的区别
#EXAMPLE $str_uncode = "简体中文Chinese(Simplified)"; //统计字符串长度 echo strlen($str_uncode).'< ...
- strtr、str_replace()、substr_replace、preg_replace之间的区别
strtr(string, from, to): 逐个字符开始替换,以from跟to中长度较较短的一个为准,例如: strtr("aidengni","ai", ...
- TCP&UDP基础
TCP TCP/IP是一种网络通讯协议,而socket则是TCP/IP网络最为通用的API,即一种应用程序接口,称为套接字.TCP是面向连接的协议,在进行数据收发前必须连接,且在收发时必须保持该连接. ...
- Centos/Fedora下安装Twisted，failed with error code 1 in /tmp/pip-build-H1bj8E/twisted/解决方法
Python踩坑之路 pip/easy_install无法安装Twisted或者安装后无法导入Twisted 看到MM网站上很多图,想用Scrapy框架爬点图,遇到各种库的问题,蛋疼. 一直twist ...
- DispatcherServlet的url mapping为“/”时，对根路径访问的处理
背景 众所周知,Tomcat的Default Servlet的servlet-mapping为 <servlet-mapping> <servlet-name>default& ...