10【Vue全家桶之Vue基础】◆Vue概述 ◆ Vue基本使用 ◆ Vue模板语法案例 ◆ Tab选项卡

最新推荐文章于 2024-03-12 20:47:21 发布

Lindsay_0425

最新推荐文章于 2024-03-12 20:47:21 发布

阅读量361

点赞数

分类专栏：前端学习文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_47297666/article/details/109153660

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue全家桶之Vue基础

学习内容和目标：◆Vue概述 ◆ Vue基本使用 ◆ Vue模板语法 ◆ 基础案例 ◆ Vue常用特性 ◆ 综合案例

1. Vue概述

1.1 尤雨溪：Vue.js的创建者

2014年2月，Vue.js正式发布
2015年10月27日，正式发布1.0.0
2016年4月27日，发布2.0的预览版本

1.2 Vue：渐进式JavaScript框架

渐进式：声明式渲染（最简单用法）→组件系统（通用代码）→客户端路由（单页面应用，页面局部更新，浏览器历史回退）→集中式状态管理（项目大，为了方便管理）→项目构建

框架：库=提供API；框架=提供一些基础性服务，节省实际开发的代码量；

官网：https://cn.vuejs.org/v2/guide/

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20kB运行大小，超快虚拟 DOM，高效的更新页面一些内容

2，Vue基本使用

2.1 传统开发模式对比

var msg = 'Hello World';

var div = document.getElementById('msg');

div.innerHTML = msg;

</script>

var msg = 'Hello World';

$('#msg').html(msg);

</script>

2.2 Vue.js之HelloWorld基本步骤

</div>

new Vue({

el: '#app',

data: {

msg: 'HelloWorld'

}

})

</script>

2.3 Vue.js之HelloWorld细节分析

1). 实例参数分析

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

2). 插值表达式用法

将数据填充到HTML标签中
插值表达式支持基本的计算操作

3). Vue代码运行原理分析

概述编译过程的概念（Vue语法到→原生语法，中间有一个框架，进行解析，就是vue框架）

3. Vue模板语法

3.1 模板语法概述

1). 如何理解前端渲染？

把数据填充到HTML标签中

2). 前端渲染方式

原生js拼接字符串
使用前端模板引擎
使用vue特有的模板语法

3). 原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如右图所示。

缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

var d = data.weather;

var info = document.getElementById('info');

info.innerHTML = '';

for(var i=0;i<d.length;i++){

var date = d[i].date;

var day = d[i].info.day;

var night = d[i].info.night;

var tag = '';

tag += '<span>日期：'+date+'</sapn><ul>';

tag += '<li>白天天气：'+day[1]+'</li>'

tag += '<li>白天温度：'+day[2]+'</li>'

tag += '<li>白天风向：'+day[3]+'</li>'

tag += '<li>白天风速：'+day[4]+'</li>'

tag += '</ul>';

var div = document.createElement('div');

div.innerHTML = tag;

info.appendChild(div);

}

4）. 使用前端模板引擎

右侧代码是基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。

缺点：没有专门提供事件机制。

<h1>{{title}}</h1>

<ul>

<li>索引 {{i + 1}} ：{{value}}</li>

</ul>

</script>

5）. 模板语法概览

差值表达式指令事件绑定属性绑定样式绑定分支循环结构

3.2 指令

1）. 什么是指令？

什么是自定义属性
指令的本质就是自定义属性
指令的格式：以 v-开始（比如：v-cloak）

2）. v-cloak指令用法

插值表达式存在的问题：“闪动”
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值

3). 数据绑定指令（v-text &v-html & v-pre）

⚫ v-text 填充纯文本: 相比插值表达式更加简洁

⚫ v-html 填充HTML片段

① 存在安全问题

② 本网站内部数据可以使用，来自第三方的数据不可以用

⚫ v-pre 填充原始信息

显示原始信息，跳过编译过程（分析编译过程）

4). 数据响应式

⚫ 如何理解响应式

① html5中的响应式（屏幕尺寸的变化导致样式的变化）

② 数据的响应式（数据的变化导致页面内容的变化）

⚫ 什么是数据绑定: 将数据填充到标签中

⚫ v-once 只编译一次: 显示内容之后不再具有响应式功能

3.3 双向数据绑定指令（v-model）

单向数据绑定：数据填充到页面，是单向得；

复杂得web应用，离不开和用户得交互，下订单，发评论等

1). 什么是双向数据绑定？

2). 双向数据绑定分析

v-model指令用法: <input type='text' v-model='uname'/>

3). MVVM设计思想

分而治之：把不同的功能放在不同模块，再通过一定逻辑建立联系起来；① M(model)提供数据 ② V(view)提供页面展示效果 ③ VM(View-Model)提供控制逻辑

页面数据变化DOM，怎么影响model模型里数据变化呢？两者怎么交互呢？就是中间的VM，中介当用户在表单里输入内容的时候，怎么影响模型中数据变化呢？实际上就是通过 DOM事件监听，v-model这个指令

从模型到视图？用的是数据绑定；之前的指令和插值表达式一样，就是把数据填充到视图层

3.4 事件绑定（v-on：=@）

用户交互，直接相关事件处理，用道的还是指令

1）. Vue如何处理事件？

v-on指令：<input type = “button” v-on:click = ‘num++’/>

v-on简写：<input type = “button” @click = ‘num++’/>

2）. 事件函数的调用方式

直接绑定函数名称：<button v-on: click = ‘say’> hello</button>

调用函数：<button v-on: click = ‘say()’>say hi </button>

3）. 事件函数参数传递($event)

普通参数和事件对象($event)：<button v-on: click = ‘say(“hi”, $event)’>say hi </button>

4）事件修饰符( .stop & .prevent)

.stop 阻止冒泡 <a @click.stop=”handle”>跳转</a>

.prevent 阻止默认行为 <a @click.prevent=”handle”>跳转</a>

5）按键修饰符（回车，删除键）

enter 回车键 <input @click:keyup.enter = ‘submit’>

delete 删除键 <input @click:keyup.delete = ‘handle’>

6）自定义按键修饰符

全局 config.keyCodes 对象：Vue.config.keyCodes.f1=112

案例- 【简单计算器】

需求：简单的加法计算器，分别输入数值a 和数值b,点击计算按钮，显示结果

分析：

对数值A,B，通过v-model指令实现数值a 和数值b 的绑定；
给计算按钮绑定事件，实现计算逻辑
将计算结果绑定到对应位置

3.5 属性绑定(v-bind=: & v-model)

1）Vue 如何动态处理属性？

v-bind指令：<a v-bind:href = ‘url’> 跳转</a>

缩写：<a :href = ‘url’> 跳转</a>

2）v-model 底层实现原理分析

用来实现双向数据绑定, 该下边的，上边的会跟着变; v-model 底层就是利用 v-bind绑定值，v-on 去绑定input标准事件，用来监听输入内容发生变化，做一些事情，什么事情呢，通过$event.target.value 来获取最新的值

3.6 样式绑定(class,style)

1）class样式处理

对象语法 <div v-bind:class = “{active: isAcitive }”></div>

数组语法 <div v-bind:class = “{activeClass, errorClass}”></div>

-----》点击-------》

样式绑定一些细节： 1，对象绑定和数组绑定可以结合使用；2，class绑定的值可以简化操作 3，默认的class如何处理? 不会被覆盖，而是被结合到了一块

2）style 内联样式处理

对象语法 <div v-bind:style=”{color: activeColor, fontSize: fontSize}”></div>

数组语法 <div v-bind:style=”[baseStyles, overridingStyles]”></div>

3.7 分支循环结构(v-for & v-if)

1)，分支结构：

v-if
v-else
v-else-if
v-show

2) 循环结构

v-for 遍历数组

<li v-for = ‘(item, index) in list’’>{{iitem}} + ‘------’ + {{index}}</li>

key的作用：帮助 vue区分不同元素(兄弟节点之间有啥不一样，唯一标识，key-的值不一样)，从而提高性能; 只要我们做遍历，就加上这个 key ; 没有id , 用index 索引就可以

<li :key=’item.id’ v-for = ‘(item, index) in list’’>{{iitem}} + ‘------’ + {{index}}</li>

v-for 遍历对象：<div v-for = ‘(value, key, index) in object’></div>

v-if 和 v-for 结合使用: <div v-if = ‘value == 12’ v-for = ‘(value, key, index) in object’></div>

v-if 可以做一些判断，如果条件满足，就渲染

4，基础案例 - tab 选项卡

分析：

1，实现静态UI效果，页面的布局样式，用传统的方式实现标签结构和样式，

2，基于 数据重构 UI 效果：将静态结构和样式重构为基于Vue 模板语法的形式；处理事件绑定和js控制逻辑

Vue 模板 + JS 控制逻辑 ==》vue 实例对象 ==》前端功能

3，声明式编程：模板得结构和最终显示得结果基本一致

Lindsay_0425

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
10【Vue全家桶之Vue基础】◆Vue概述 ◆ Vue基本使用 ◆ Vue模板语法案例 ◆ Tab选项卡

Vue全家桶之Vue基础学习内容和目标：◆Vue概述 ◆ Vue基本使用 ◆ Vue模板语法 ◆ 基础案例 ◆ Vue常用特性 ◆ 综合案例1. Vue概述1.1 尤雨溪：Vue.js的创建者2014年2月，Vue.js正式发布 2015年10月27日，正式发布1.0.0 2016年4月27日，发布2.0的预览版本1.2 Vue：渐进式JavaScript框架渐进式：声明式渲染（最简单用法）→组件系统（通用代码）→客户端路由（单页面应用，页面局部更新，浏览器历史回退）→集中.
复制链接

扫一扫