vue项目实例-常用标签
感谢:https://www.jianshu.com/p/5d9b341d650f
总结:
1、<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径.
例:
<tr v-for="item in peoples">
<td>
{{item.name}}
</td>
</tr>
4、v-show指令与v-if指令的区别就在于,前者一开始就加载,更适用于频繁的切换,后者需首先判断布尔值,为true才加载渲染
5、v-model指令是双向绑定,一般用于表单组件
6、单文件组件的引用,import [命名] from [相对路径]
比如:<div class="exp1 exp2 exp3">这个是范例</div>
前言
在开始开发实例前,应首先了解一下vue-cli的项目结构。接着我们一起来实现一个小demo——人员管理,功能简单,通过这个实例让大家熟悉使用vue-cli开发项目的一些操作,加深对vue-cli项目结构的印象。
实例功能简述
人员管理项目,有两个页面,首页和管理页,管理页主要实现一个简单的增删改功能,各个功能如下所示(附github地址)
创建项目
首先第一步,就是创建我们的项目,打开cmd,进入到想要创建项目的目录下,我这里是到d盘的根目录下,然后输入vue init webpack manage,敲回车。
接着安装依赖包,进入项目,输入npm install
接着输入npm run dev 运行项目,可以看到浏览器自动打开,显示如下
项目开发
1.创建首页
因为我做的人员管理项目是wap端的,所以我们首先在主页index.html中加上meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
1.1 新建目录
为方便管理,我们在src文件夹下新建一个views文件夹,用于存放所有的模块组件。
在views文件夹下新建index文件夹,再在index文件夹下新建index.vue作为项目的首页。
1.2 编辑首页index.vue
接着在路由配置中引入我们刚创建的首页,并更改一下路由配置
打开浏览器,看到更改的内容已经自动渲染
2. 添加底部导航组件
因为底部导航组件是公共组件,在两个页面都有引用,所以我们把它建在components文件夹下,命名为footer.vue。
div的fixed样式写在了公共样式public.css里面,并在App.vue中引入,作用域设为全局
对这个页面主要讲两点:
(1)<router-link>
可以看到footer.vue使用了<router-link>标签,该标签主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径(即我们在路由配置中定义的Index路由)
(2)scoped
在<style>标签上添加scoped,声明作用域,样式效果只在该页面内生效,不污染全局。
3. 在首页中引入底部导航组件
我们刚刚创建了footer.vue,但还未引入,在首页模块views/index/index.vue中引入该组件
使用组件步骤:
(1)引入组件 import FooterNav from '../../components/footer.vue'
(2)局部注册 注意写在export default内部,components:{FooterNav}
(3)使用组件 <footer-nav></footer-nav> 注意命名,驼峰法定义的组件FooterNav需在使用时用短横线连接<footer-nav>
再回到浏览器,可以看到首页已经有底部导航了
4.创建人员管理页面
4.1 创建页面
同样的,因为人员管理可以算另外一个模块,所以我们在src/views/新建一个文件夹manage,再在manage文件夹下新建index.vue
同样在管理页面引入了底部导航组件footer.vue
现在管理页面创建完成,但还需在路由配置中引入才可以通过路由/manage去访问
接下来就去浏览器检验,我们定义的两个路由之间的跳转
4.2 为底部导航绑定class
可以看到由于没有给底部导航设置active状态的样式,切换起来不是很明显,所以我们可以给底部导航绑定class值
在首页使用<foot-nav>时绑定class类名isIndex
这里使用v-bind指令来绑定class,第一个属性为class名字,第二个属性为布尔值,为true,则表示该组件有这个class,为false则没有。所以,当访问首页模块时,底部导航有一个类名isIndex,我们可以在底部导航内部为isIndex设置样式。
同样的,也在管理页面manage.vue为底部导航绑定class isManage。
另外还需注意一点,data在组件内部得写为一个函数,通过return返回数据值,这是因为组件之间是共享的,但是要保证它们各自的数据是私有,互不影响的,所以要给每个组件返回新的data对象。这一点官网也有说明vuejs官网——data必须是函数。
返回浏览器查看,绑定的class已经生效
4.3 编写功能
前面管理页面把姓名列表写死了,为方便实现增删改功能,接下来我们得通过数据模拟来实现列表渲染。
定义数据
(1)在data函数下新增peoples数组
(2)列表渲染
列表渲染用v-for指令,item为自定义的名字,指向数组中的每一个个体,peoples为我们在data函数中定义的数组名字,模板渲染采用{{ }}
返回浏览器查看效果
4.3.1 新增功能
控制输入框显示与隐藏
我们先将新增人员输入框隐藏,当点击“新增”按钮时再显示,要实现这个功能我们需要用到条件渲染。
首先用到了v-show指令,showAdd是一个布尔值,为true则渲染,为false则隐藏
v-show指令与v-if指令的区别就在于,前者一开始就加载,更适用于频繁的切换,后者需首先判断布尔值,为true才加载渲染
同时我们给按钮增加一个点击事件(v-on是绑定事件指令),用于控制showAdd的值从而控制输入框div的隐藏与显示
vue中方法用methods:{}包裹,里面的add(){}也等同于add:function(){}
查看效果
新增事件
给输入框双向绑定其输入的数据,给输入区域的“确定”按钮绑定一个事件去获取输入框输入的数据并保存进数组。
v-model指令是双向绑定,一般用于表单组件
当输入框的值改变,其绑定的nameValue跟着改变
同理,当绑定的nameValue值改变,输入框的值也跟着改变
我们这里还做了判断,如果什么都不输,或输入空格就弹出提示,只有当输入的值不为空时再保存
查看效果
4.3.2 删除功能
删除功能有一个重点,我们得获取列表的index索引值,来判断到底删除哪一个值
更改一下列表循环,加入索引,并将索引值绑定到td标签上,通过event点击事件去获取td标签上的id,从而去删除索引值为id的值
查看效果
4.3.3 编辑功能
首先新建编辑输入区域,通过点击“编辑”控制其渲染。
当点击“编辑”字样时,触发edit事件,edit事件主要控制showEdit为true,让编辑输入区域渲染出来,同时还获取td标签上的id值,保存到一个变量editId中。
同样也给编辑输入框双向绑定一个值newName。
当点击“确定”按钮时,触发editName事件,editName事件首先获取editId的值以及input绑定的newName值,再更改索引值为editId的name属性
查看效果
到这里,我们也就实现了一个具有增删改功能的小demo。
vue项目实例-常用标签的更多相关文章
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- Vue之常用语法
变量的定义: var定义的变量:只有全局作用域和函数作用域.有变量提升,先打印后定义变量不会报错,打印结果为undefined let定义的变量:没有变量提升 ——>有局 ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- Python 44 前端概述 、三剑客 、常用标签与分类
1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么? HTML: .htm .html 内容 CSS: .css 效果 JS: .js 行为 2.简述三剑客的主要 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue的常用特性
Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. ...
- vue 的常用事件
vue 的常用事件 事件处理 1.使用 v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名: 2.事件的回调需要配置在 methods 对象中,最终会在 vm 上: 3.methods ...
- HTML常用标签
HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
随机推荐
- 重载(overloading)和重写@Override
一.重写:@Override 定义:字类方法覆盖父类方法,通俗来说就是方法里面的内容可以不一样,其他都一样. (1)必须保证权限大于等于父类的权限public>protetcted>默认& ...
- JavaSE--jdom解析之bom
参考:http://www.cnblogs.com/findumars/p/3620078.html org.jdom2.input.JDOMParseException: Error on line ...
- 关系数据库和NOSQL比较
关系数据库 NOSQL 功能: NOSQL 功能简单 基本只支持主键查询,有的NOSQL支持非主键查询(不过非主键查询时,其性能也很慢),很少有N ...
- memset为int型数组初始化问题
头文件:#include <string.h>memset() 函数用来将指定内存的前n个字节设置为特定的值,其原型为: void * memset( void * ptr, int ...
- 阿里云 asp.net core nginx 单机部署
1. dotnet core 安装 https://www.microsoft.com/net/download#core 安装之前要安装依赖:yum install libunwind libicu ...
- Mutation|DNM|
生命组学 DNA序列改变的分子基础 变异来源 据研究对象,可分为两类mutation:个体上的变异和群体上的变异,群体上的变异是关联研究,eg喝酒人群vs非喝酒人群相比. 造成mutation的三类机 ...
- hibernate 持久化对象 save
hibernate 持久化对象 save new出来的user对象是游离状态的对象,执行session.save()方法保存后,user对象就变为持久化了,持久化的对象跟数据库表双向绑定的意思, 对象 ...
- tomcat更新class不生效
替换线上lib里的class不生效,需要想想是不是前人为了图方便在classes里面扔了一份老版本class
- 17)C++开始--命名空间
命名空间:就是区分同一个名字,在不同的作用域的变量 代码展示 #include<iostream> namespace spaceA{ ; namespace spaceB{ struct ...
- 记忆化dp博弈
题:http://poj.org/problem?id=2068 题意: 有两个队伍A,B,每个队伍有N个人,交叉坐.即是A(1,3,5,7.....)B(2,4,6,8....).告诉你每个mi(1 ...