用vue开发网页效果

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用vue开发网页效果相关的知识，希望对你有一定的参考价值。

参考技术A 本地应用：
指令v-text的作用是：设置标签的内容
默认写法会替换全部内容，使用插值表达式可以替换指定内容
部分替换使用两个大括号写法

v-html指令：作用是设置元素的innerHTML
内容中有html结果会被解析为标签；v-text无论内容是什么，只会解析为文本
解析文本用v-text，解析html结构用v-html

v-on指令：事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接受传入的实参
时间的后面跟上【.修饰符】可以对事件进行限制
.enter可以限制触发的按键为回车
时间修饰符有多种

计数器的步骤：
1.在data中定义数据num；
2.methods中添加两种方法add和sub
3.使用v-text给num设置span标签
4.使用v-on将add，sub绑定给+、-按钮
5.add逻辑小于10继续累加，否则alert
6.sub逻辑大于0继续递减，否则alert

创建Vue示例时，el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text设置文本值，简写

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示和隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

v-if指令的作用是：根据真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除

v-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以直接省略v-bind，只保留【：属性名】
需要动态的增删class建议使用对象的方式

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据和表单元素值相关联
绑定的数据双向绑定表单元素的值

网络应用

基于Boostrap和Vue设计网页

参考技术A

Boostrap:

Vue.js:

首先先对要画的网页进行一个原型设计，由于是公司的主页，因此最主要的功能就是介绍这个公司的业务还有一些新闻，在初步设计后，我的原型图大致为：

接着就可以开始尝试用boostrap 教程和Vue.js来实现。

1、首先我们在 <head> 中先引入boostrap和Vue
.js，其中顺序不要变：

2、 顶端文字跑马灯效果：

然后在CSS样式中，设置 news 的 float 和 width :

最后在js中写跑马灯的实现，用定时器 timer 来计时滚动，判断复制的信息是否到达 box 的最左边来进行无限循环。

3、 导航栏
接着用boostrap来实现一个导航栏，导航栏一般放在页面的顶部。
我们可以使用 navbar 类来创建一个标准的导航栏，后面紧跟: navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class= navbar-nav 类；然后在 <li> 元素上添加 nav-item 类， <a> 元素上使用 nav-link 类；
导航栏可以用 bg-dark 和 navbar-dark 来设置导航的样式：

其中， navbar-brand 类用于显示品牌logo，如果使用图片，可以使用 navbar-brand 类来设置图片自适应导航栏:

效果如图：

4、 轮播图片 ：
查阅Boostrap教程，大概了解到有这几个类：

实现效果如图：

5、网格

我们可以结合网格和 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片：

实现效果如图：

6、折叠

实现效果如图：

7、 链接列表组

实现效果如下：

8、最后再增加一个页尾，然后完善下就完成了一个公司页面：