前端系列课程之Vue框架入门（一）

Vue框架入门

- 目标：

了解Vue框架的技术特性
掌握Vue的语法基础应用

- Vue概述：

Vue 是一个用于构建用户界面的客户端框架
官方网址： https://cn.vuejs.org/

1. 第一个案例：

文本框内容重现：

    
    
    
    





    

        
        {
    {num}}
    

2. 技术特性：

• MVVM（Model-View-ViewModel）
• 数据驱动+组件化的前端开发
• 结构简单，轻量级的框架
• 不兼容低版本的IE

3. 技术要点：

• Vue基础语法
• 实例对象和生命周期
• 计算属性和侦听器
• 自定义指令和动画
• 服务器交互
• 组件定义和通信
• 路由和单页面应用
• vuex状态管理
• UI框架

4. 安装和使用：

• 下载vue.js文件，并导入页面使用
• 链接远程CDN，导入页面使用
• 通过脚手架cli安装（单页面应用）

- Vue语法基础

重点：

• 实例对象
• 模板语法
• 指令

1. 实例对象

• 每个Vue应用都是从实例对象开始的

• 选项列表
  (后面详细讲解)

1. el (关联id)
2. data
3. methods
4. computed
5. watch
6. components
7. router
8. …

• el 用于挂载页面中的DOM元素，起到类似于选择器的作用。

• data是DOM元素绑定的数据对象，提供给DOM元素使用的数据属性。

var vm = new Vue({
            el: '#app',
            data: {
                属性名1： 变量值，
                属性名2： 变量值
            }
        })
        

• methods是与DOM元素交互所使用的方法。

var vm = new Vue( { 
	el: ‘#app’， 	//关联id是“app”的div
	data:{}，
	methods:{
		函数名1:function(){
			函数代码
		}，
		函数名2：function(){ }
	}
})

2. 模板语法

• Vue使用模板语法实现DOM和实例对象的绑定。

• 绑定类型：

1. 绑定DOM元素的内容
2. 绑定DOM元素的属性

模板语法绑定元素内容（一）：

• 通过插值表达式，使用{ {}}将js代码包裹，使js中的数据属性值进行展示，也称为Mustache语法。
• 插值表达式中的内容类型：

1. data中的属性名
2. 数字
3. 字符串
4. 布尔值
5. 对js的数据属性进行运算

    
姓名：{
    {name}}
    
年龄：{
    {100}}
    
门派：{
    {“武当”}}
    
党员：{
    {false}}
    
杀伤力：{
    {damage+100}}

例子：（1）

例子：（2）

模板语法绑定元素内容（二）：

• 通过v-html指令实现元素标签的解析， 适用于html标签代码的解析展示，会覆盖元素标签内容的内容。

例子：
（结果及过程）

模板语法绑定元素内容（三）：

• 双向绑定是指DOM和实例数据相互影响
• 通过v-model指令，实现元素内容的双向绑定，适用于可编辑的表单元素

（例如：上面第一个案例）

data:{
     num：100
}


     {
    {num}}
     

模板语法绑定元素属性：

• 通过v-bind指令，实现元素属性的绑定，可省略用" : "

例子
（结果及过程）

指令概述：

• 指令是一种带有 "v- "前缀的特殊标签属性
• 指令的类型

1. 交互指令: v-on
2. 条件渲染指令: v-if 、 v-else
3. 循环指令: v-for

交互指令：

• v-on指令，结合实例对象的methods使用，实现交互功能，省略时使用" @ "

例子：（一）
（结果及过程）

例子：（二）
《结果（切换前后）及过程》

或者：

例子：（三）
（结果及过程）

*** 注意 ***：在methods（）中引用data（）中内容时，需要在内容前面添加“this”指定。

条件渲染指令（一）

• 条件渲染指令用于控制DOM元素是否展示
• v-if指令
• v-else指令
• v-else-if指令
• v-show指令

例子：（v-if）
（结果及过程）

例子：（v-else-if）
（过程及结果）

条件渲染指令（二）

• v-show指令
• v-show指令和v-if 指令的区别

例子：
（使用v-if、v-show同时都显示时，isshow：true，没有差别）

例子：
（使用v-if、v-show同时不显示时，isshow：false，有差别）

区别：

• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
• v-show只是简单的基于css切换；

性能：

• v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

使用场景：

• v-if适合运营条件不大可能改变；
• v-show适合频繁切换

循环指令：

• v-for指令用于对实例对象的数据源进行遍历循环
• 数据源可以是数组或者对象

例子：（v-for）
（结果及过程）

例子：数组序号（index序号从0开始）
（结果及过程）

循环数组：

• 循环遍历获取数组成员
• 循环遍历获取数组

例子：
（结果及过程）

(未完待续…)