avaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。本文介绍了 JavaScript 的精彩之处和主要用途。

JavaScript 到底是什么？

JavaScript（缩写：JS）是一门完备的 动态编程语言)。当应用于HTML文档时，可为网站提供动态交互特性。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

1、浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。

2、第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。

3、第三方框架和库 —— 用来快速构建网站和应用。

本节是一篇 JavaScript 简介，因此这个阶段不会对 JavaScript 语言和上述工具做过多的介绍。之后可以到 JavaScript 学习区 和 MDN 的其它地方学习更多细节。

下面对语言核心做一个不完整介绍，期间还可以接触到一些浏览器 API 特性。

“Hello World!”示例

读到这里你一定很激动，诚然 —— JavaScript 是最振奋人心的 Web 技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。

然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的信息 JavaScript 脚本来建造一个 “Hello world!” 示例

重要的是：如果你没有完成之前的课程实践，可联系我获取资料包继续跟着练习哦，如果你要实践，前两篇笔记就是html和css阶段的内容哦。

0. 首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。
1. 下一步，在index.html文件</body>标签前的新行添加以下代码。

<script src="scripts/main.js" defer></script>

0. 与 CSS <link>的元素类似，它将** JavaScript**引入页面以作用于 HTML（以及 CSS 等页面上所有内容）;
1. 现在将以下代码添加到main.js文件中：

let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

0. 最后，保存HTML和JavaScript 文件，用浏览器打开 index.html。可以看到如下内容：

注：我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

发生了什么？

JavaScript 把页面的标题改成了 “Hello world!” 。首先用 querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。

之后，把 myHeading 变量的属性 textContent （标题内容）修改为 “Hello world!” 。

注：上面用到的两个函数都来自文档对象模型 (DOM) API， 均用于控制文档。

JavaScript 快速入门

我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。

重要：学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。 JavaScript 控制台的更多信息请查看 浏览器开发者工具。

变量（Variable）

变量 (en-US) 是存储能量的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

let myVariable;

注：行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。

注：几乎任何内容都可以作为变量名，但还是有一些限制（请参阅 变量命名规则）。如果你不确定，还可以 验证变量名 是否有效。

注：JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！

注：想要了解更多关于 var 和 let 的不同点，可以参阅 var 与 let 的区别。

变量定义后可以进行赋值：

myVariable = '李雷';

也可以将定义、赋值操作写在同一行：

let myVariable = '李雷';

可以直接通过变量名取得变量的值：

myVariable;

变量在赋值后是可以更改的：

let myVariable = '李雷';
myVariable = '韩梅梅';

注意变量可以有不同的 数据类型 ：

那么变量有什么用呢？我们说，编程时它们无所不在。如果知道无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。

注释

类似于 CSS，JavaScript 中间可以添加注释。

/*
这里的所有内容
都是注释。
*/

如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：

// 这是一条注释。

运算符

运算符 (en-US)是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符，可以在浏览器控制台里尝试一下后面的示例。

译注：这里说“根据两个值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。

运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅 表达式和运算符。

注：不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 "35" + "25"，为什么不能得到 60？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。

条件语句

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 if ... else。下面是一个示例：

let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('我最喜欢巧克力冰激淋了。');
} else {
  alert('但是巧克力才是我的最爱呀……');
}

if ( ... ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 iceCream 与字符串 'chocolate' 是否相等。 如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。

函数（Function）

函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：

let myVariable = document.querySelector('h1');
alert('hello!');

document.querySelector 和 alert 是浏览器内置的函数，随时可用。

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。

比如， alert() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。

好消息是：人人都能定义自己的函数。下面的示例是为两个参数进行乘法运算的函数：

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

尝试在控制台运行这个函数，不妨多试几组参数，比如：

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

注：return语句告诉浏览器当前函数返回 result 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的 作用域。（详见 变量作用域。）

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

Copy to Clipboard

将事件与元素绑定有许多方法。在这里选用了<html>元素，把一个匿名函数（就是没有命名的函数，这里的匿名函数包含单击鼠标时要运行的代码）赋值给了html的onclick (en-US) 属性。

请注意：

document.querySelector('html').onclick = function() {};

等价于

let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

只是前者更简洁。

完善示例网页

现在你已经具备了一些 JavaScript 基础，下面来为示例网页添加一些更酷的特性。

添加一个图像切换器

这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。

0. 首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。
1. 将这张图片储存在你的images目录下。
2. 将图片重命名为'firefox2.png'（去掉引号）。
3. 打开main.js文件，输入下面的JavaScript 代码 ( 请删除刚才的 "hello world" 脚本)：

let myImage = document.querySelector('img');
myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

5、保存所有文件并用浏览器打开 index.html 。点击图片可以发现它能够切换了！

这里首先把<img> 元素的引用存放在myImage变量里。然后将这个变量的onclick事件与一个匿名函数绑定。每次点击图片时：

0. 获取这张图片的 src 属性值。
1. 用一个条件句来判断src的值是否等于原始图像的路径:
0. 如果是，则将 src 的值改为第二张图片的路径，并在 `` 内加载该图片。
1. 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

添加个性化欢迎信息

下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

1、打开index.html， 在<script>标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：

<button>切换用户</button>

2、将以下 JavaScript 代码原封不动添加到main.js文件底部，将获取新按钮和标题的引用，并保存至变量中：

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

3、然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）

function setUserName() {
  let myName = prompt('请输入你的名字。');
  localStorage.setItem('name', myName);
  myHeading.textContent = '跟着艾编程学习，太有成就感了，' + myName;
}

该函数首先调用了prompt()函数， 与alert()类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在myName变量里。接下来将调用localStorageAPI ，它可以将数据存储在浏览器中供后续获取。这里用localStorage的setItem()函数来创建一个'name'数据项，并把myName变量复制给它。最后将textContent属性设置为一个欢迎字符串加上这个新设置的名字。

4、接下来，添加以下的if ... else 块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作：

if(!localStorage.getItem('name')) {
setUserName();
} else {
let storedName = localStorage.getItem('name');
myHeading.textContent = '跟着艾编程学习，太有成就感了，' + storedName;
}

5、Copy to Clipboard这里首次使用了取非运算符（逻辑非，用!表示）来检测'name'数据是否存在。若不存在，调用setUserName()创建。若存在（即用户上次访问时设置过），调用getItem()获取保存的名字，像上文的setUserName()那样设置textContent。

0. 最后，为按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：

myButton.onclick = function() {
setUserName();
}

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名 。告诉你一个额外的福利，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)

用户名为 null

运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为 “跟着艾编程学习太有成就感了，null”。这是因为取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。

也可以不输入任何名字直接按 确认，你的标题会显示为“跟着艾编程学习太有成就感了，”，原因么显而易见。要避免这些问题，应该更新 setUserName() 来检查用户是否输入了 null 或者空名字：

function setUserName() {
  let myName = prompt('请输入你的名字。');
  if(!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.innerHTML = '跟着艾编程学习太有成就感了，' + myName;
  }
}

用人话说就是：如果 myName 没有值或值为 null，就再次从头运行setUserName()。如果有值（上面的表达式结果不为真），就把值存储到 localStorage 并且设置标题。

小结

如果你按部就班完成本文的实践，那么最终可以得到以下页面

相关推荐：

1. 前端新手看过来，手把手带你轻松上手html的实操
2. 前端新手看过来，教你从零CSS做漂亮网页，这样学习太有成就感了

ue (读音 /vjuː/，类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

一、MVVM模式和第一个Vue程序

1.什么是 MVVM

• 该层向上与视图层进行双向数据绑定
• 向下与 Model 层通过接口请求进行数据交互

• Vue的安装方式：

  1.1 使用CDN方法(初学者使用)
  也可以直接使用CDN的方式引入，代码如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2Vue-cli脚手架
  利用Vue-cli 脚手架构建Vue项目，在后面第七点详细讲解。(中大型项目中推荐使用)。

2.第一个Vue程序

 1、创建一个 HTML 文件

 2、引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

完整示例：

<!DOCTYPE html>
  <html>
<head lang="en">
    <meta charset="UTF-8">
    <title>贝西说</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view视图-->
 <div id="app">
     <input type="text" v-model="message"/>
     {{message}}
 </div>
 <script>
     var vue=new Vue({
        el:"#app",
         /*model数据*/
         data:{
             message:"hello,vue"
         }
     });
 </script>
</body>
</html>

演示效果：（视图驱动数据，数据驱动视图）

二、基础语法

v-bind

v-bind就是用于绑定数据和元素属性的
完整示例：

<body>
  <div class="app">
        <a v-bind:href="url">点我</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>

注意：
  v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。
  当我们在控制台改变url时，对应也会变化。

相同的，我们还可以绑定图片src属性、超链接的class

<body>
    <div class="app">
      <a v-bind:href="url">点我</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

注意：

<div class="app">
	  <a v-bind:href="url">点我</a>
</div>  

通常我们可以将v-bind：简写成：

<div class="app">
<a :href="url">点我</a>
</div>

v-if,v-else

v-if,v-else

完整示例：

<body>
    <div id="app">
      <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>

v-if,v-else-if,v-else

<body>
    <div id="app">
      <div v-if="role=='beixi'|| role=='admin'">您好，admin</div>
        <div v-else-if="role=='jzj'">贾志杰</div>
        <div v-else>您无权访问！</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 role:"admin",
             }
         });
     </script>
</body>

v-for

 1、v-for循环普通数组

<body>
  <div id="app">
        <p v-for="(item,index) in list">{{item}}----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>

2、v-for循环对象数组

<body>
<div id="app">
        <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'beixi'},
                    {id:2,name:'jzj'},
                    {id:3,name:'贾志杰'}
                ],
             }
         });
     </script>
</body>

3、v-for循环对象

<body>
  <div id="app">
        <p v-for="(val,key,index) in user">值：{{val}}---键：{{key}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"beixi",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>

 4、v-for循环数字

<body>
  <div id="app">
        <p v-for="count in 5">这是第{{count}}次循环</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{ }
         });
     </script>
</body>

三、Vue绑定事件

语法：

  v-on:事件名 = “方法名”
  简写： @事件名 = “方法名”
  事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名

v-on事件监听，完整示例：

<!DOCTYPE html>
  <html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>贝西说</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {{count}}
        <button v-on:click="count+=1">点我加1</button>
        <button v-on:click="sub">点我减1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>

注意：v-bind可以简写为 ： v-on: 可以简写@

四、Vue：表单双绑、组件

1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2.在表单中使用双向数据绑定

  你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

  注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!
示例1：

<body>
  <div id="app">
        <input type="text"  v-model="message"/>{{message}}
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{message:'' }
         });
     </script>
</body>

完成效果：

示例2：

  <div id="app">
    <input type="radio" name="sex" value="男" v-model="gender"/>男
        <input type="radio" name="sex" value="女" v-model="gender"/>女
        <p>{{gender}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{gender:'' }
         });
     </script>

示例3：

<body>
  <div id="app">
        <select v-model="selected">
            <option value="">--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>
</body>

3.什么是组件

  组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。
  通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

4.简单定义一个组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

  <div id="app">
    <beixi></beixi>
    </div>
     <script>
 	    //注册组件
         Vue.component("beixi",{
             template:'<li>hello</li>'
         });
         var app = new Vue({
             el:"#app",
         });
     </script>

说明：

• Vue.component()：注册组件
• beixi：自定义组件的名字
• template：组件的模板

5.使用props属性动态传递参数

<body>
  <div id="app">
        <!--组件：使用props把值传递给组件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{{value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['beixi','jzj','贾志杰']
             }
         });
     </script>
</body>

说明：

v-for=“item in items”：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件

v-bind:value=“item”：将遍历的 item 项绑定到组件中 props 定义的名为 value属性上；= 号左边的 value 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值

五、Axios异步通信

1.什么是Axios

  Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API [JS中链式编程]
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF（跨站请求伪造）

  GitHub：https://github.com/axios/axios

  中文文档：http://www.axios-js.com/

2.为什么要使用 Axios

  由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

3.第一个 Axios 应用程序

  咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下

{
  "name": "贝西说",
  "url": "https://blog.csdn.net/beixishuo",
    "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "太谷",
    "city": "山西晋中",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/474668932"
    },
    {
      "name": "贝西说",
      "url": "https://blog.csdn.net/beixishuo"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

完整示例：

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
	<!--在线引入axios。在项目开发中会安装axios组件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">贝西说</a>
</div>
<script>
    var app=new Vue({
        el:"#app",
        //data: 属性
        data:function(){//需要处理(返回)后台数据在页面上渲染时使用
            return{
                //请求的返回参数格式必须和json字符串一样
                info:{
                    name:null,//相当于形参占位，实际参数data.json会赋予
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted:function(){//mounted钩子函数，相当于java中main函数。可以调用methods中定义的函数
        // axios.get('data.json').then(resp=>(console.log(resp.data)));
            axios.get('data.json').then(resp=>(this.info=resp.data));
        }
    })
</script>
</body>

注意:
读取本地json文件中的数据时读取失败，如图

解决方式就是右击浏览器快捷方式，更改属性，在目标后面加上

–allow-file-access-from-files

说明:

1. 在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
2. 使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
3. 我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！

4.axios API

可以通过将相关配置传递给 axios 来进行请求。

axios(config)

// 发送一个 POST 请求
axios({
	method: 'post',
	url: '/user/12345',
	data: {
	firstName: 'Fred',
	lastName: 'Flintstone'
	}
});

axios(url[, config])

// 发送一个 GET 请求 (GET请求是默认请求模式)
	axios('/user/12345');

请求方法别名
为了方便起见，已经为所有支持的请求方法提供了别名。

• axios.request（config）
• axios.get（url [，config]）
• axios.delete（url [，config]）
• axios.head（url [，config]）
• axios.post（url [，data [，config]]）
• axios.put（url [，data [，config]]）
• axios.patch（url [，data [，config]]）

注意

当使用别名方法时，不需要在config中指定url，method和data属性。

5.Vue的生命周期

六、计算属性

1.什么是计算属性

  当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

•   分离逻辑(模板和数据分离)
• 缓存值
•   双向绑定(getter,setter)

简单理解为：把计算的结果当作属性返回去

2.完整示例

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text"  v-model="num1"/><input type="text" v-model="num2"/>
    <p>求和结果{{result}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{num1:1,num2:2},
        computed:{//计算属性
           result:function(){
               return parseInt(this.num1)+parseInt(this.num2);
           }
        }
    })
</script>
</body>

3、methods方法与computed计算属性区别

1. 两者的执行结果是完全相同的
2. 计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数
3. 每次触发重新渲染时，调用方法将总会再次执行函数

七、前端工程化 vue-cli

Vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

利用vue-cli脚手架来构建Vue项目需要先安装Node.js和NPM环境。
1.Node.js的安装

Node.js的安装比较简单，大家需要在node.js官网(https://nodejs.org/en/download/)下载并安装node.js环境，windows的推荐下载Windows Installer (.msi)。同时，大家会得到一个附送的NPM工具。

a，安装Node.js，双击下载好的node文件，如图所示。

安装过程比较简单，一直“下一步”即可。
b，环境变量配置：安装完成后需要设置环境变量：即Path中添加安装目录(例如：D:\java\nodejs)，如图所示。

c，点击开始=》运行=》输入"cmd" => 输入node -v如图所示，验证安装是否成功。

2.npm安装
由于node.js已经集成了npm，所以之前npm也一并安装好了。所以在cmd终端输入npm -v 来测试是否安装成功。命令如图 所示，出现版本提示表示安装成功。

3基本使用

步骤如下：
①　搭建第一个完整的Vue-cli 脚手架构建的项目。

②　安装完成，输入Vue -V，如果出现相应的版本号，则说明安装成功。如图7-6所示。

③　我们可以使用vue-cli来快速生成一个基于webpack模板构建的项目，如图所示，项目名为vue-project。

④　配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。
然后进入项目目录（如：cd vue-project），使用 npm install安装依赖，如图所示。

• 依赖安装完成后，我们来看一下项目的目录结构，如下所示：

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- node_modules		   //所需要依赖资源
|-- src                              // 源码目录
|   |--  assets                   	   //存放资产文件
|   |-- components                   // vue公共组件
|   |-- router                   	//存放路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

对于开发者更多操作的是src目录：

|-- src                              // 源码目录
|   |--  assets                   	   //存放资产文件
|   |-- components                   // vue公共组件
|   |-- router                   	//存放路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js   

④　输入npm run dev命令来启动项目，如图所示。

运行成功后在浏览器输入：http://localhost:8080，访问项目结果如图所示。