目录

前言

一、Vue 基础

1.1、Vue 基础示例

a）html 部分：

b）script 部分：

二、本地应用

1.1、内容绑定，事件绑定

1.1.1、v-text 设置标签文本值

1.1.2、v-html 设置标签的 innerHTML

1.1.3、v-on 为元素绑定事件

a）基本用法

b）事件修饰符（不常用）

c）按键修饰符

1.1.4、computed 计算属性

1.1.5、案例：实现一个计数器

1.2、显示切换，属性绑定

1.2.1、v-show 元素的显示和隐藏

1.2.2、v-if 切换显示和隐藏（本质和 v-show 不同）

1.2.3、v-bind 设置元素属性

1.2.4、案例：实现切换图片

1.3、列表循环，表单元素绑定

1.3.1、v-for 生成列表结构

1.3.2、v-model 双向绑定

1.3.3、案例：表白墙

---

前言

---

前置条件：掌握 HTML、CSS、JavaScript、AJAX.

工具：VsCode.

插件：Live Server（浏览器实时预览）

开发版本 Vue.js 如下：

axios.min.js 如下：

Ps：建议都提前下载下来，没网的时候也能用.

一、Vue 基础

---

1.1、Vue 基础示例

如下代码：

    

        {{message}}
    

    
    
    
    

效果如下：

a）html 部分：

• {{}}：插值表达式，通过他就可以直接把 data 中的数据引入.

b）script 部分：

这里需要先创建一个 Vue 对象，构造的写法格式类似于 ajax.

• el（挂载点）：类似于 js 中的选择器（也可以选择其他属性，但是建议 ID 选择器）. Vue 实例会管理 el 选项 命中的元素 及内部的 后代元素. 值得注意的一点是，el 只可以命中除了 和 以外的所有双标签.
• data（数据对象）：Vue 中用到的数据都定义在 data 中，可以写复杂类型，例如 数组、对象，并且遵守 js 语法.

data 代码示例如下：

    

        
{{title}}
        {{desc.username}}
        {{desc.password}}
        

            
{{arr[0] }}
            
{{arr[1]}}
            
{{arr[2]}}
        
    


    
    

效果如下：

二、本地应用

---

1.1、内容绑定，事件绑定

1.1.1、v-text 设置标签文本值

v-text 可以将 data 中的数据通过 {{}} 插值表达式 设置到 html 标签的内容中，并且默认是替换标签内的全部内容. 

另外，v-text 中也支持写表达式，例如通过 “+” 进行字符串或 data 的拼接.

示例如下：

    

        

        

        
{{message + "~"}}
        

    

    
    

效果如下：

1.1.2、v-html 设置标签的 innerHTML

v-html 指令可以将内容中的 html 解析成标签，而 v-text 只能解析成文本.

示例如下：

效果如下：

1.1.3、v-on 为元素绑定事件

a）基本用法

v-on 指令就是为元素绑定事件的，也可以将 v-on 简写为 @.  绑定的方法定义在 methods 属性中，方法内部 必须 通过 this 关键字访问到定义在 data 中的数据.

常用绑定如下：

• v-on:click=” 方法 ”：点击事件.
• v-on:dblclick=” 方法 ”：双击事件.
• v-on:monseenter=” 方法 ”：鼠标移入事件.

也可以简写为：

• @click=” 方法 ”：点击事件
• @dblclick=” 方法 ”：双击事件.
• @monseenter=” 方法 ”：鼠标移入事件.

Ps：这里的方法也可以自定义参数.

示例如下：

效果如下：

a）点击 v-on 指令 按钮（v-on 简写效果一样）

b）双击两次 双击事件 按钮

b）事件修饰符（不常用）

语法如下：

@事件名事件修饰符 ="事件处理函数"

例如：@click.stop="test"

主要有以下修饰符：

• .stop（比较常用）：用来阻止事件继续向外传递. 

例如 div1 有一个子 div2，如果两个 div 都设置了 @click 点击事件，那么当用户点击 子 div2，会先执行 div2 在向外传递，执行 div1 的点击事件.  如果给子 div2 设置了此修饰符，再点击 子 div2 时，那么执行完 div2 时，就结束了.

• .prevent：用来阻止标签的默认行为.

例如有一个 a 标签，href 指向某一个地址，点击后会进行跳转.  那么此时给他设置点击事件，他会先执行点击事件，再进行跳转，此时如果只想执行点击事件，不进行跳转，就可以使用此修饰符.

• .self：只监听自身标签触发的事件.

例如 div1 有一个子 div2，如果两个 div 都设置了 @click 点击事件，那么当用户点击 子 div2，会先执行 div2 在向外传递，执行 div1 的点击事件.  如果给 子 div1 设置了此修饰符，再点击 div2，那么执行完 div2 时，就结束了.

• .once：该事件只触发一次.

例如有一个 div 标签，设置了 @click 点击事件，那么只有第一次点击才触发事件，之后再点击就不会触发了.

c）按键修饰符

用来对键盘按键事件进行修饰，例如 keyup（按下键盘立即触发），keydown（抬起键盘立即触发）.

语法如下：

@按键事件按键修饰符 ="事件处理函数"

例如：@keyup.enter="test"

主要有以下修饰符：

• .enter：对键盘回车键修饰.
• .tab：对键盘切换 tab 按键修饰.
• .delete：捕获 “ 删除 ” 和 “ 退格 ” 键.
• .esc：对键盘的 esc 按键修饰.
• .space：捕获空格按键.
• .up：上.
• .down：下.
• .left：左.
• .right：右.

Ps：这里也可以进行链式调用，比如 @keyup.enter.tab.esc，就是同时对这三个键进行捕获，捕获到任意一个都会触发 事件处理函数.

示例如下：

效果如下：

a）点击按我有惊喜

b）选中输入框内，按 enter 键

1.1.4、computed 计算属性

作用：在 Vue 实例中完成计算任务.

好处：提升 Vue 运算性能，因为他会将第一次计算的结果进行缓存，便于日后多次调用.

潜台词：只要涉及到计算的地方，用它就够了.

示例如下：

    

        
{{mTest() }}
        
{{mTest() }}
        
{{mTest() }}
        
        
{{cTest}}
        
{{cTest}}
        
{{cTest}}
    

    
    

效果如下：

1.1.5、案例：实现一个计数器

需求：

1. 点击 加 1 按钮，计数器 +1；
2. 点击 减 1 按钮，计数器 -1. 
3. 计数器上限为 10，下限为 0.

代码如下：

效果如下：

a）点击一次减 1

b）点击 6 次加 1

1.2、显示切换，属性绑定

1.2.1、v-show 元素的显示和隐藏

v-show 指令可以根据真假（布尔类型）来切换元素的显示状态，本质上是修改元素的 display.

Ps：数据改变以后，对应元素的显示会同步更新.

示例如下：

效果如下：

 a）点击图标展示开关

b）点击两次 也支持表达式 按钮

1.2.2、v-if 切换显示和隐藏（本质和 v-show 不同）

v-if 的作用就是根据表达式的布尔值切换元素的显示状态，本质就是通过操作 dom 元素状态来切换显示状态（表达式为 true，元素新增在 Dom 树中；为 false，从 dom 中删除）.

因此建议：如果显示和隐藏的操作十分频繁，建议使用 v-show，反之，使用 v-if.

示例如下：

    

        
        
我是 v-if！我出来啦！
        
我是 v-show！我出来啦！
    

    
    

效果如下：

a）点击按钮

1.2.3、v-bind 设置元素属性

v-bind 用来为元素绑定属性，例如 src、title、class.

用法：v-bind: 属性名 = 表达式.

简写：: 属性名

Ps：通过 v-bind 增删属性是动态的.

示例如下：

效果如下：

a）点击第三个图标.

1.2.4、案例：实现切换图片

需求：

有三张图片，实现切换图片效果.

当前为第一张图片时，不显示

示例如下：

注意：

 以下这种方式引入图片是无效的，因为 Vue 中的打包工具 webpack 是按照字符打包的，不会做任何处理，所以需要 import 外部引入或者 require 内部引入。

export default {
	data:{
		return {src:'./assets/image/a.jpg'}
	}
}

 如下：

// 外部引入
import a from './assets/image/a.jpg'
export default {
	data:{
		return {src:'./assets/image/a.jpg'}
	}
}
// 内部引入
export default {
	data:{
		return {src:require('./assets/image/a.jpg')
		}
	}
}

效果如下：

a）第一张图片

b）第二张图片

c）第三张图片

1.3、列表循环，表单元素绑定

1.3.1、v-for 生成列表结构

v-for 用来根据数据生成列表结构，经常和数组搭配使用. 

用法如下（类似于 Java 中的 for(arr : arrs)）：

v-for="(item, index) in 数据名"

item：自定义的变量名，是 数据名 一条条遍历得到的数据,

index：数据名的当前遍历的下标.

数据名：data 中数组的名字.

注意：在使用 v-for 的时候，官方建议建议提供 v-bind:key="唯一标识" 来为 Vue 提供唯一属性，提高效率

Ps：数组的长度也是动态更新的.

示例如下：

    

        

            {{index + 1}}. 姓名: {{name}}
        
        

        
        
        

            {{food.name}}
        

    

    
    

效果如下：

a）点击两次 最后再加一份牛肉 按钮.

b）点击两次 删除第一道菜 按钮

1.3.2、v-model 双向绑定

v-model 可以更便捷的设置和获取表单元素值，并且绑定的数据会和表单元素值相关联（动态双向绑定）.

示例如下：

上述代码中，在浏览器中的 input 框中输入 任何信息都会使 Vue 的 data 数据中 message 立即同步.  并且如果修改 data 中 message 的值，也会影响到 浏览器中 input 框中的数据立即更新.

效果如下：

a）点击修改按钮

1.3.3、案例：表白墙

需求：实现一个表白墙.

1. 实现在墙上发布表白内容.
2. 实现清空数据功能.
3. 统计总数据.
4. 删除指定表白内容.

代码如下：

    

        
表白墙
        

            你:
            
        
        

            对他:
            
        
        

            说:
            
        
        

            
            
            共有 {{msgList.length}} 条数据
        

        

        

            

                {{(index + 1) + '.' + message }}
                
            
        

    

    
    

效果如下：

a）输入数据后，发布两条数据.

b）删除第二条数据