Vue基础6天实施笔记

Vue 基础课程

课程介绍

Vue基础语法

指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器

axios、ES6模块化、组件、vue单文件组件、WebStorage

SPA单页应用、router路由、Promise

VueCLI脚手架、element-ui组件库、eslint代码规范检测等等

vue介绍

三大前端框架

Vue

Vue.js (view)是一套构建用户界面的前端框架技术

内部集成了许多基础技术，例如html、css、javascript、ajax、node等，当然还有vue本身高级技术体现，例如组件、过滤器、指令、路由、webpack等等

2012年出现，是中国人 尤雨溪 开发的，2016年3月 加入阿里巴巴公司(该事件助推了vue的发展)

jquery：库 侵入性弱 (工具 库)，应用对其进行 安装卸载 非常方便

vue：框架 侵入性强 (框架)，项目 从内到外 都是vue，不可以随便拆卸

Vue只关注视图（页面）层的开发，文档非常丰富、易于上手，流行度高，拥抱经典的web技术、早起灵感来源于angular

vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点

支持所有兼容ECMAScript 5的浏览器，IE9以上

与Vue有关联的话题 组件、路由、webpack、loader、vue-cli、VirtualDOM(虚拟DOM)、NPM、SPA、ES6、单文件组件、双向数据绑定等

vue是前端的主流框架之一，和Angular、React 一起，并成为前端三大主流框架！

学习Vue前的技术准备：

• 掌握 HTML + CSS + JS 基本网页制作能力
• 了解Node基础概念、包、模块化，会用 npm 维护项目中的包即可
• ES6/ES7 基础语法要会用，在Vue课程中我们也会补充更多的ES6

使用vue的公司

小米、阿里、百度、饿了么、掘金、苏宁易购、美团、天猫、Laravel、htmlBurger、哔哩哔哩直播、哔哩哔哩商城

github上vue框架的“点赞”次数，可见一斑vue的流行程度

angular

2009年出现，google公司出品

Angular.js 出现最早的前端框架，曾经很火，但是现在已经 被边缘化了；也不好学；

Angular 1.x 学起来好麻烦；

Angular 2.x ~ 5.x 学习起来相对简单；

TypeScript(javascript超集)

新旧版本没有平滑升级

使用特点：强侵入，凡事都必须遵循angular的规则

React

2010年出现，facebook公司出品

React.js 是目前最流行的一个框架；是用的人最多的一个框架；但是，学习起来也比较难，因为在 React中，所有的功能，都要用 JavaScript 来实现；

JSX(JavaScript XML/Xhtml) & ES2015(es6) 一切都是javascript、包括html、css

(JSX的引入导致代码清晰度很差)

太笨拙，难以掌握，有些地方的代码看起来完全没有逻辑性，学习过程痛苦

其他框架

Ember

Knockout

Polymer

Riot

。。。

为什么要学习流行框架

- 前端的发展历程

a. 在Web端开发中，刚开始没有前端岗位，那时候只有美工（做图、负责画页面结构 dreamware）适当做点HTML + Table 布局 + CSS2 等工作

b. CSS + Div 布局

c. Javascript+Jquery + 模板引擎 + Ajax（老年程序员）

d. 前端流行框架诞生(前端就是一些活儿不好的美工，另辟蹊径，打通了前端的岗位)

具体缘由：

• 提升项目开发效率(节约成本)
• 最前沿技术应用es6/es7
• 前端不是做辅助工作的，而是主力开发者、增加开发话语权、由被动变为主动、增强核心价值/核心竞争力
• 最先进最前沿的开发模式

获得vue

网址：

https://cn.vuejs.org 官方地址(服务器在外国，访问速度慢)

https://vue.docschina.org/ 官方地址镜像(服务器在中国，访问速度快)

下载Vue

Vue.js 不支持 IE8 及其以下版本

最新稳定版本：2.6.10

1. 直接下载

• 开发版本：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
• 生产版本：https://cdn.jsdelivr.net/npm/vue

2. CDN(Content Delivery Network内容分布式部署)

在应用中通过script标签直接引入一个完整路径名的vue文件包

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

3. 使用 npm下载（默认安装最新稳定版）

npm install vue

简单使用

步骤：

1.引入vue.js文件包
2.body中,设置Vue管理渲染的容器<div id="app"></div>
3.实例化Vue对象 new Vue();
4.设置Vue实例的选项:如el、data...     
   new Vue({选项:值});
5.在<div id='app'></div>中通过{
  { }}访问data中的数据

注意：

• 容器不仅可以使用div，也可以使用其他的html标签，例如p等
• 容器的id属性值可以自定义，推荐是app
• 所有内容都需要放到容器标签中
• 容器的成员el、data是固定用法

1. 引入vue

<script src="./vue-2.6.10.js"></script>

2. 创建vue渲染容器

<div id="app">
  <h2>{
  { msg }}</h2>
</div>

{ {}}双花括号 不能写到div容器的外部，那样就脱离了vue的控制，导致其不会得到有效解析

3. 创建vue对象

<script>
  var vm = new Vue({
    
    el: '#app',
    data: {
    
      msg: '学习vue技术'
    }
  })
</script>

Vue的选项

• el 选项：指定Vue作用的范围，设定被vue管理的主html标签(容器)
• data 选项：vue提供的数据对象，这个数据即可以给vue本身使用 也可以给容器渲染使用

MVVM设计模式(了解)

vue本身有自己固定的代码结构，其也是mvvm设计模式的体现，MVVM很好地实现了视图和数据的有机绑定

M:model 数据操作部分 (vue的data部分)

V:view 视图展示部分 (div容器部分)

VM: view & model 视图和数据的关联部分 (el和data通过实例化new Vue关联)

相关指令

什么是Vue中的指令

指令 (Directives) 是带有 v- 前缀的html标签的属性。

通俗定义： Vue 中，通过一些特殊的语法，扩展了 HTML标签 的能力

将来 创建 Vue 实例的时候，Vue 会把 这些指令 都进行解析，从而，根据不同的指令，执行不同的操作、渲染不同的结果

<div v-text  v-html v-if  v-else></div>

控制内容区域

在vue中如果要控制标签的内容区域信息，可以通过如下3种指令达成

插值表达式 { { }}

插值表达式 是特殊的指令，可以给html标签的内容区域填充信息，并且只能用在标签的内容区域

在页面上如果需要表现一些数据信息，可以通过 “插值表达式” 实现

语法：

<标签>{
  { 表现的数据信息 }}</标签>

数据信息：javascript表达式

标签的内容区域：

<div>内容区域</div>
<span>内容区域</span>
<li>内容区域</li>
<p>内容区域</p>
<h2>内容区域</h2>
……

如果想更换“双花括号”为其他标记，可以参考vue官网配置delimiters成员

new Vue({
	delimiters: ['开始标记', '结束标记']
})

使用要点：

1. 在插值表达式中 只能设置简单的javascript表达式语句，不能设置复杂表达式(例如for循环)
2. 在不改变vue变量值大小的前提下，可以进行一般的 算术运算、比较运算、逻辑运算、三元操作符 等运算使用，也可以通过常量进行数据体现
3. 插值表达式只能用在html标签的内容区域；不能用在其他地方
4. { {}}花括号与变量之间为了美观可以有适当的空格，例如{ { msg}}、{ { msg }}、{ { msg }}}等都可以

正确用法：

<p>{
  {  num  }}</p>
<p>{
  {  20  }}</p>
<p>{
  {num+20}}</p>
<p>{
  {num/5}}</p>
<p>{
  {10+20}}</p>
<p>{
  {num>20}}</p>
<p>{
  {num>20 && score>100}}</p>
<p>{
  {num ? 'ok' : 'nook'}}</p>

<script>
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            num: 110
        }
    });
</script>

错误用法：

<button title="{
    {mytitle}}"></button>
<div>{
  {for(var i=0; i<5; i++){}}}</div>

v-text

v-text指令 与 差值表达式 作用一致，都是给标签内容区域填充信息

插值表达式存在闪烁问题，即网速比较慢的时候，{ {}}花括号内容会显示到页面上造成不好的用户体验，相反通过v-text就可以避免

语法：

<标签 v-text="要表现的数据信息"></标签>

可见，v-text用法与插值表达式的明显区别是，通过 标签的属性 体现出来

使用要点：

1. v-text可以完全更新标签的内容区域，插值表达式只是做部分更新
2. v-text 较比{ {}}插值表达式 可以避免闪烁问题
3. 与{ {}}插值表达式 一样，可以进行一般的 算术、比较、逻辑、三元运算，也可以体现常量信息

{ { }}插值表达式 出现闪烁问题的准备条件：

• http协议方式打开应用程序文件(给vscode编辑器 安装 live server)
• 调整网速为 慢3G
• 在div容器之后引入vue包文件(不要在之前引入，否则看不到闪烁效果)

给vscode编辑器安装扩展，使得html文件可以通过http协议被请求访问

之后鼠标右键单击应用程序文件就可以通过http协议访问了

调慢网速为慢3G：

网上非常慢的时候，可以看到闪烁的插值表达式内容：

以上闪烁是负面的东西，用户体验不好，即使出现白板也比这个好

v-html

与v-text相似的指令还有v-html，其也是给标签的“内容区域”设置信息的

语法：

<标签 v-html="要表现的数据信息"></标签>

v-html 与 v-text一样 都是通过 标签的属性 体现出来

v-html和v-text的区别：

1. v-html对 html标签 和 普通文本 内容都可以设置显示
2. v-text一般就只设置普通文本内容，如果有html标签，其会把标签箭头<>变为符号实体(<变为&lt; >变为&gt;)，进而使得浏览器上直接"显示箭头"等标签内容，等同于不解析html标签内容
3. v-html、v-text、{ {}} 等都可以进行 算术、比较、逻辑、三元运算，变量 和 常量都可以使用
4. 尽量避免使用，否则会带来危险(XSS攻击 跨站脚本攻击)

应用场景:

如果 服务器返回的数据中，包含有HTML标签(例如富文本编辑器内容)，就可以使用 v-html 来渲染(v-text和 { {}}都不行)

小结

1. { {}}、v-text、v-html都可以给标签内容区域设置内容
2. { {}}用在标签的内容区域，v-text和v-html通过标签属性体现
3. 它们针对变量、常量、各种运算符都起作用，v-html还可以设置"html标签"内容
4. { {}}在一定条件下有闪烁问题，v-text和v-html没有

:冒号 属性绑定

之前学到的指令 { {}}、v-text、v-html 都是给标签内容区域设置内容

如果要动态地给元素的属性绑定内容，可以通过v-bind:指令实现

语法：

<标签 v-bind:属性名称="数据"></标签>
<标签 :属性名称="数据"></标签>			// 简写形式  推荐使用

v-bind:可以简写为 :冒号

数据信息可以是：变量、常量、比较、逻辑、三元运算符

各种指令{ {}} v-text v-html v-bind(:冒号) 本质是js的执行环境

要把各种指令的执行代码看成是独立的js代码在运行

{ {js执行环境}}

v-text=“js执行环境”

v-html=“js执行环境”

:属性 = “js执行环境”

绑定普通属性

• 动态绑定图片的路径名

  <img :src="pic" />
  <script>
      var vm = new Vue({
        
          el: '#app',
          data: {
        
         	    pic: '1.jpg'
          }
      });
  </script>
  
  

• 绑定a标签上的id

  <a :href="'/detail/'+id">详情</a>
  <script>
  	var vm = new Vue({
        
          el: '#app',
          data: {
        
              id: 11
          }
      });
  </script>
  
  

绑定class属性

class属性与普通属性的不同点是其可以通过“空格”分隔，同时绑定多个值，

在vue中可以做如下应用：

• 对象语法

  <div :class="{ apple: true, 'pear': false, 'orange':true}"></div>
  
  

  true：设置为属性值，false：不设置

• 数组语法

  <div :class="['apple', 'orange']">    // 属性值需要通过 引号 圈选
  
  

以上对象或数组绑定class语法均渲染为: <div class="apple orange"></div>

通过对象、数组方式实现class属性绑定，后期可以融入"编程"内容，达到控制每个项目值的目的

例如：

• 通过 三元运算符编程 设置某个属性值是否应该体现

  <div :class="{apple:true, pear:flag ? true : false}">学习指令</div>
  <script>
    var vm = new Vue({
        
      el: '#app',
      data: {
        
        flag:true
      }
    })
  </script>
  
  

  以上class属性会根据flag为true或false使得pear的值是否生效

绑定style属性

style属性也比较特殊，其可以给标签设置许多css样式，在vue中可以做如下应用

• 对象语法

  <div :style="{
          color: 'red', 'font-size': '20px', fontWeight:'bold' }"></div>
  
  

• 数组语法

  <div :style="[{
          color: 'red'}, {
          'font-size': '20px', fontWeight:'bold' }]"></div>
  
  

  在一个数组元素中可以绑定多个或一个样式成员

  有的样式属性名称是通过"-"中横线连接的，这在javascript的命名规则中不允许的，例如font-size、font-weight，在处理时有两种方式

  1. 引号限定 如 ‘font-size’

  2. 中横线去除，后边首字母大写 如 fontWeight

以上对象或数组绑定class语法均渲染为:

<div style="color:red; font-size:20px; font-weight:bold"></div>

通过 数组 或 对象 对 class/style 进行绑定的好处是，属性值可以嵌入编程内容，实现精细化控制

例如：

• 通过 三元运算符编程 设置某个css样式是否生效

  <div :style="{
          fontWeight:flag?'bold':'normal',color:'red' }">学习指令</div>
  <script>
    var vm = new Vue({
        
      el: '#app',
      data: {
        
        flag:true
      }
    })
  </script>
  
  

  以上style属性会根据flag为true或false使得font-weight加粗或正常

小结

1. 属性绑定有两种形式 v-bind: 和 :冒号 推荐后者
2. 绑定的信息可以是 变量、常量、各种运算符等，变量/常量 较频繁使用
3. 全部的属性都可以绑定
4. 针对class、style属性除了常规绑定 还可以 通过数组或对象达到精细化控制

@ 事件绑定

web端网页应用程序开发，事件是一个不不可或缺的技术应用

在vue中给元素进行事件绑定，需要通过v-on:指令实现，也使用@符号，@是v-on:的简写，使用更方便

事件类型：

鼠标事件：onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等

键盘事件：onkeyup onkeydown onkeypress 等等

语法：

<标签 v-on:click="事件处理函数名" ></标签>
简写形式(v-on: 指令可以简写成 @)
<标签 @click="事件处理函数名" ></标签>   	// 推荐使用

注意：

vue中事件类型是不用设置on标志的，例如onclick在vue中的使用为@click，其他事件也是这样的

在vue中声明事件处理函数

<button @click="del()">删 除</button>

<script>
  var vm = new Vue({
    
    el:'#app',
    data:{
    },
    // 给vue设置可以调用的方法，这些方法也可以支撑事件的调用
    methods:{
    
      del:function(){
    
        if(confirm('确认要删除该商品么？')){
    
          return alert('已经删除了')
        }  
      }
    }
  })
</script>

在vue中可以通过methods成员声明成员方法，并且方法可以应用在事件驱动中

参数

有时，根据业务要求，事件方法需要传递参数，例如 需要把被删除数据的id传递给事件方法

参数有如下3种结果:

1. 有传递使用传递的参数
2. 没有声明()，第一个形参就是事件对象
3. 有声明(),还没有传递实参，形参就是undefined

给事件传递参数：

<button @click="del(115)" >删除</button>
<script>
  var vm = new Vue({
    
    el:'#app',
    data:{
    },
    methods:{
    
      del:function(goodsid){
    
        if(confirm('确认要删除该商品么？')){
    
          return alert('商品id为'+goodsid'的商品已经被删除了')
        } 
      }
    }
  })
</script>

this操控data

根据业务需要，事件在执行过程中需要对Vue实例的data数据进行操作，通过this关键字实现，

this代表Vue实例对象，并且针对data或methods成员都可以直接进行调用

<button @click="getInfo()" >获取数据</button>

<script>
  var vm = new Vue({
    
    el:'#app',
    data:{
    
      address:'铁岭'
    },
    methods:{
    
      getInfo:function(){
    
        // 通过 this关键字 获得 data区域的数据信息
        console.log(this.address+'是一个大城市');
      }
    }
  })
</script>

简易设置

字面量对象成员的可以通过下述方式简便设置

(简便方式 创建对象是ES6标准实现)

var name = "xiaoqiang"
var height = 176
var run = function(){
   
  console.log('在跑步')
}

var person = {
   name:name,height:height,run:run}		// 正常创建对象
var person = {
   name, height, run}					// 简便方式创建对象

对象的成员名称 与 绑定的值的变量名称 一致，就可以通过如上简便方式设置

var obj = {
   
  // walk:function(){
   
  //   console.log('走直线')
  // }
  //变形
  // walk:function walk(){
   
  //   console.log('走直线')
  // }
  walk(){
   
    console.log('走直线')
  }
}

给一个对象直接声明一个成员方法，也可以简写为如上形式，去除": function"字样

因此给vue的methods对象声明成员可以这样：

<script>
  var vm = new Vue({
    
    methods:{
    
      XXX(){
    },
      YYY(){
    },
      ZZZ(){
    }
    }
  })
</script>

小结

1. 事件绑定有两种形式： v-on: 和 @ 推荐后者
2. 事件根据需要可以传递参数
3. 事件执行过程中如果需要获取Vue实例的成员信息，可以通过this关键字实现(其是Vue实例对象)
4. es6标准允许我们给对象通过简易方式设置methods成员方法

v-model

在Vue中有一个很重要的指令，名称为v-model，其被称为双向数据绑定指令，就是Vue实例对数据进行修改，页面会立即感知，相反页面对数据进行修改，Vue内部也会立即感知

v-model是vue中 唯一实现 双向数据绑定 指令

v-bind单向数据绑定，只是使得vue的数据渲染给页面元素，页面对数据进行修改，vue不会感知到

v-model双向数据绑定，数据从vue里边渲染给页面，页面对其进行修改，Vue内部会立即感知

简单使用

语法：

<标签  v-model="xxx"></标签>

注意：

v-model 只针对元素的value属性起作用，一般应用在各种表单元素中，例如 input、select、textarea 等

v-model只能绑定vue的data成员，不能 绑定各种运算符的表达式 和 常量(例如 v-model="age+5"是错误的)

• 绑定文本框

  当文本框的值发生改变后，div中的内容也会发生变化

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

• 绑定多行文本框

  <textarea v-model="name"></textarea>
  <div>{
      { name }}</div>
  
  

  注意：

  多行文本框中不要使用{ { name }}的方式绑定，如果这样就没有双向绑定效果了

• 绑定复选框

  • 绑定一个复选框

    遵守协议：<input type="checkbox" v-model="xieyi">
    <div>{
          { xieyi }}</div>    // 体现 true 或  false信息
    <script>
        var vm = new Vue({
            
           el: '#app',
            data: {
            
                xieyi: true
            }
        })
    </script>
    
    

    xieyi：体现true或false信息

  • 绑定多个复选框

    吃饭：<input type="checkbox" value="eat" v-model="hobby"><br>
    睡觉：<input type="checkbox" value="sleep" v-model="hobby"><br>
    敲代码：<input type="checkbox" value="qiao" v-model="hobby"><br>
    {
          { hobby }}    // 体现数组信息  ['eat','sleep','qiao']
    <script>
        var vm = new Vue({
           el: '#app',
            data: {
                hobby: []
            }
        });
    </script>
    
    

    此种方式需要input标签提供value属性

    hobby：体现 [‘eat’,‘sleep’,‘qiao’]的数组信息

• 绑定单选框

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

  sex：体现 男 或 女 的字符串信息

• 绑定下拉列表

  <div id="example-5">
    居住城市：
    <select v-model="mycity">
      <option disabled value="