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初学习的更多相关文章

  1. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  2. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  3. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  4. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  5. vue初体验:实现一个增删查改成绩单

    前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方 ...

  6. clisp, scheme 和 clojure 初学习

    clisp, scheme和clojure 初学习 1 clojure "clojure绝对会成为你的编程工具箱里的终极武器" "其他语言可能只是工具,但 Clojure ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  9. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  10. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

随机推荐

  1. 我是如何从通信转到Java软件开发工程师的?

    我的读者里面有绝大部分都是在校学生,有本科的,也有专科的,我在微信里收到很多读者的提问,大部分问题都跟如何学习编程有关,有换专业自学的.有迷茫不知道如何学习的.有报培训班没啥效果的等等,我能感受到他们 ...

  2. 1042 Shuffling Machine (20分)(水)

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  3. PTA数据结构与算法题目集(中文) 7-41PAT排名汇总 (25 分)

    PTA数据结构与算法题目集(中文)  7-41PAT排名汇总 (25 分) 7-41 PAT排名汇总 (25 分)   计算机程序设计能力考试(Programming Ability Test,简称P ...

  4. Ceph学习笔记(3)- Monitor

    Ceph学习笔记(3)- Monitor 前言: ​ Ceph将cluster map与placement rule合并为一张表称为crush map,作为集群表的一部分.由Monitor对集群表的副 ...

  5. JavaScript 入门 (一)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Pytest系列(17)- pytest-xdist分布式测试的原理和流程

    pytest-xdist分布式测试的原理 前言 xdist的分布式类似于一主多从的结构,master机负责下发命令,控制slave机:slave机根据master机的命令执行特定测试任务 在xdist ...

  7. 对称加密算法在C#中的踩坑日常

    前言 有幸接触了一下传说中的对称加密算法3DES 感觉这些加密算法与我的工作是想去甚远的,一般没什么机会接触这些东西 今次了解了一下3DES这个对称算法 原理算不上明白,算是踩了C#中的一些坑吧 C# ...

  8. coding 注意事项(总结中)

    Uber Go 语言代码风格指南可以参考下:https://www.cnblogs.com/ricklz/p/11670932.html 最近写代码,老是被吐槽,代码写的不好,细节处理的不好. 那么下 ...

  9. PHP单例模式及应用场

    设计模式?听起来很高大上?的确是这样的.设计模式就是组织代码的方式,也就是说代码不再是一条条的往下执行,按照前人总结的行之有效的方法,更有效的来组织代码,这样效率更高,而且看起来也清晰有序. php单 ...

  10. Linux访问Window共享文件夹的配置步骤

    1. Window下创建用户XXX(作用:Linux mount时需要提供用户和密码) 2. Window下共享文件夹给XXX用户,并根据实际需要设置读取/写入权限 3. Linux下创建挂载的目录 ...