01-Vue初学习
1. Vue下载
（1）网址：https://cn.vuejs.org/v2/guide/installation.html
（2）点击开发版本，下载完成是一个 Vue.js
2. 使用
（1）创建文件夹
文件夹：html
文件夹：js
把 Vue.js放到 这个文件夹中
文件夹：01-Vue
在这个文件夹中写 html代码：01.html
（2） 引入 Vue.js
<script src="../js/vue.js"></script>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../js/vue.js"></script><!-- 就是这一行-->
</body>
</html>
（3）初体验，打印：HelloVue -- 注意体会与JS的不同
- 创建<div>
<div id="app"></div>
- 创建 Vue对象
const app = new Vue({
el: '#app',//用于挂载要管理的元素
data:{//定义数据
message :"HelloVue"
}
})
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 数据与界面分离-->
<div id="app">
<h1> {{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
//编程范式：声明式编程
const app = new Vue({
el: '#app',//用于挂载要管理的元素 是 l 不是 1
data:{//定义数据
message :"HelloVue",
}
})
</script>
</body>
</html>
（4）响应式编程：数据发生改变的时候，界面自动改变
- 运行html，打开控制台
- 输入 app.message ：显示HelloVue
- 修改HelloVue：在控制台输入 app.message = "你好啊" 回车 页面会立即发生变化
3. 浏览器执行代码的流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 数据与界面分离-->
<div id="app">
<h1> {{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
//编程范式：声明式编程
const app = new Vue({
el: '#app',//用于挂载要管理的元素
data:{//定义数据
message :"HelloVue"
}
})
//响应式：数据发生改变的时候，界面自动改变
</script>
</body>
</html>
- 执行到10-13行时，显示出对应的 html
- 执行到16行，创建Vue实例，并且对HTML进行解析和修改
4. 创建Vue时，传入的options： el 和 data
- el：该属性决定了这个Vue对象挂载到哪一个元素上，这里我们挂在到了id为app的元素上
- data：该属性通常会存储一些数据，这些数据可以是上面那样我们直接定义的，还可以是从网络、服务器加载的
5. 源码1 -- 打印单个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 数据与界面分离-->
<div id="app">
<h1> {{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
//let 变量 const 常量
//let name = "why"
//name = "tom"
//编程范式：声明式编程
const app = new Vue({
el: '#app',//用于挂载要管理的元素
data:{//定义数据
message :"HelloVue"
}
})
//响应式：数据发生改变的时候，界面自动改变
</script>
</body>
</html>
6. 源码1 -- 打印单列表元素
（1）在Vue对象中，定义电影列表
const app = new Vue({
el: '#app',//用于挂载要管理的元素
data:{//定义数据
message :"你好啊",
movies:['海王','妇联','盗梦空间']
}
})
（2） 访问：
<div id="app">
<ul>
<li >{{movies[0]}}</li>
<li >{{movies[1]}}</li>
<li >{{movies[2]}}</li>
</ul>
</div>
（3）这样访问太麻烦，我们使用 类似 py、java等的 增强for循环
//java
for i in arr:
System.out.println(i);
//Vue
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
（4）同样是响应式编程
（5）完整源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 数据与界面分离-->
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
<!--
<li >{{movies[0]}}</li>
<li >{{movies[1]}}</li>
<li >{{movies[2]}}</li> -->
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',//用于挂载要管理的元素
data:{//定义数据
message :"你好啊",
movies:['海王','妇联','盗梦空间']//仍然是响应式的
//浏览器：app.movies.push("xxx")
}
})
</script>
</body>
</html>
01-Vue初学习的更多相关文章
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue初体验：实现一个增删查改成绩单
前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方 ...
- clisp, scheme 和 clojure 初学习
clisp, scheme和clojure 初学习 1 clojure "clojure绝对会成为你的编程工具箱里的终极武器" "其他语言可能只是工具,但 Clojure ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
随机推荐
- IOS部分APP使用burpsuite抓不到包原因
曾经在ios12的时候,iphone通过安装burpsuite的ca证书并开启授权,还可以抓到包,升级到ios13后部分app又回到以前连上代理就断网的情况. 分析:ios(13)+burpsuite ...
- 在 UITextField 中添加删除绑定（绑定删除）
要解决的问题 在输入框中,需要整体删除诸如 “xxx@xx.com” 或 “@xxxx” 等文本 实现思路 在删除动作时,获取到当前光标的位置,如果在光标正在处在上述文本范围内,就删除一整串文本 如何 ...
- PTA数据结构与算法题目集(中文) 7-43字符串关键字的散列映射 (25 分)
PTA数据结构与算法题目集(中文) 7-43字符串关键字的散列映射 (25 分) 7-43 字符串关键字的散列映射 (25 分) 给定一系列由大写英文字母组成的字符串关键字和素数P,用移位法定义 ...
- 谁给你说的 Ubuntu 不可以输入中文
文章更新于:2020-04-04 按照惯例,需要的文件附上链接放在文首 文件名:sogoupinyin_2.3.1.0112_amd64.deb 文件大小:25.5 MB 下载链接:https://w ...
- scala_spark实践3
Spark 读写HBase优化 读数据 可以采用RDD的方式读取HBase数据: val conf = HBaseConfiguration.create() conf.set(TableInputF ...
- 大数据及hadoop简要概念
大数据 大数据简要概念 指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合.需要新处理模式,才能具有更强的决策力.洞察发现力和流程优化能力的海量.高增长率和多样化的信息资产. 大数据作 ...
- Adaptert Listview 优化
这次是关于Listview的优化的,之前一直采用愚蠢的方式来使用listview,出现的情况就是数据多的话下拉的时候会出现卡顿的情况,内存占用多.所以学习了关于listview的优化,并且这也是普遍使 ...
- 选择IT行业的自我心得，希望能帮助到各位！（五）
相信很多小伙伴,在看完之前的一二三四,也是我一路走来,走走停停,走走停停,有快乐,也有伤悲,毕竟这就是人生嘛,人生不起起伏伏怎么才能体验刺激的快感,也让我从一个小男孩净化成清高浮躁的青少年,在从而让我 ...
- re模块语法—python正则表达式
用字符串匹配实现 对于简单的匹配查找,可以通过字符串匹配实现,比如:查找以”hello”开头的字符串 此时就可以正确查找出以start开始的字符串了 python中的正则表达式模块 在python中为 ...
- div3--C. Pipes
题目链接:https://codeforces.com/contest/1234/problem/C 题目大意:根据规则,判断是否可以从左上走到右下,1,2,3,4,5,6分别对应题干给的图片,所以1 ...