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. 监控实战Prometheus+Grafana

    这期的分享是监控实战,其实不想写这篇的,因为网上相关的文章也挺多的,但是出于光说不练都是假把式,而且也想告诉你:当帅气的普罗米修斯(Prometheus)遇到高颜值的格拉法纳(Grafana)究竟会擦 ...

  2. 《Three.js 入门指南》3.1.1 - 基本几何形状 -多面体

    3.1 基本几何形状 多面体 构造函数 正四面体(TetrahedronGeometry).正八面体(OctahedronGeometry).正二十面体(IcosahedronGeometry)的构造 ...

  3. 安装elasticsearch-head（源码安装方式）

    gitHub 地址 https://github.com/mobz/elasticsearch-head 克隆到本地 进行npm 安装运行 git clone git://github.com/mob ...

  4. C++primer（第五版）Sales_item.h头文件

    C++primer(第五版)1.51练习章节需要有一个Sales_item类,但是给的网站找不到,直接复制下面就好咯: #ifndef SALESITEM_H #define SALESITEM_H ...

  5. pm2 开机启动egg项目

    1.在服务器上安装PM2 npm install pm2 -g 2.对PM2进行更新 pm2 update 3.进入服务器中egg项目更目录,并新建server.js文件,并在其中写入以下代码 con ...

  6. WTM asp.net core应用程序在Ubuntu上和CentOS上部署

    wtm在Ubuntu上和CentOS上部署 项目发布 在Visual Studio中右击Web项目,选择发布,如下图: Ubuntu安装.net core运行时 Ubuntu我是用的Vmware虚拟机 ...

  7. 如何将本地项目上传到gitee

    如何将本地项目上传到gitee不想废话,直入主题: 第一步:首先你得有一个gitee仓库(登录注册自己解决)友情提供: gitee官网地址. 首先:进入git额额官网(登录注册自己解决,没难度) 新建 ...

  8. 安卓开发学习日记 DAY2——android项目文件

    当一个android项目建立时,会有一个目录,以下为目录所包含内容 src:放置java源代码 gen:基本不会做任何更改,放置自动生成的配置文件(主要是R文件) Android4.4.2:放置当前版 ...

  9. c++类模板之分文件编写问题及解决

    我们在实际项目中一般习惯头文件(.h)和源文件(.cpp)分开写,这样做的好处良多,但是如果遇到了类模板,这样可能会有一点儿问题. 我们通过一个例子来看: person.h: #pragma once ...

  10. coding++：java 线程池概述

    前言: 1):创建一个可缓存线程池 2):创建一个可重用固定个数的线程池,以共享的无界队列方式来运行这些线程. 3):创建一个定长线程池,支持定时及周期性任务执行 4):创建一个单线程化的线程池,它只 ...