Vue-Element写一个简单的列表管理23/100统

1.data语法3种;
1）vue标准写法
data:{
}

2）vue函数写法，返回值 return js对象
data:function(){
return{

}}

3）es6新标准函数写法（element-ui）
date(){
return{

}}

把vue结构定义HBuilderX快速定义一个模板文件
C:\Users\tony
\AppData\Roaming\HBuilder X
\templates\file\html
这个模板文件保存每个用户它自己的数据临时空间（目录）
直接创建一个txt文件，随便命名vue.txt
把模板拷贝代码复制进去，保存即可

Vue框架增加：路由和组件：
1）路由：Vue开发SPA结构网站，一个页面（列表转新增页面，新增页面保存数据，跳转到列表页面）
它的操作（新增，修改）没有离开当前页面
add
update
不同路径
2）组件，可以自己写好积木一块，也可以利用第三方的，搭起最终结构（复用）

三个环境：
1）开发环境：dev 启动nodejs服务，npm run dev
2）测试环境：test
3）生产环境：prod

Vue-cli脚手架安装过程
1.安装nodejs
2.判断是否安装成功：
npm -v //先验证nodejs是否安装正常

npm config get registry //获取当前配置npmjs.org
npm config set registry https://registry.npm.taobao.org

npm install vue-cli -g //安装vue脚手架

安装过程的选项
vue init webpack jt //在当前目录会创建jt目录，jt是项目名称
执行上面命令，要配置很多选项，y，n （死记）

Project Name 项目名称，默认，回车 Project description 默认，回车
Author chenzs 作者
vue build 默认，回车
install vue-router? 是否安装router，输入：y 安装
Use ESLint to lint your code? 规则引擎，过于严苛，输入：n
Setup unit tests? 单元测试，输入：n
Setup e2e tests with Nightwatch(Y/n)? 测试框架Nightwatch，输入：n
Should we run ‘npm install’ for
you after the project has been created? 默认npm，回车

启动服务
cd jt
npm run dev

启动nodejs服务，就是网站
访问http://localhost:8080，注意如果端口冲突 tomcat/oracle
nodejs太聪明，会自动换端口，如果8080端口冲突，可能8081

一般情况下node安装完，它会自动配置全局路径，window中配置
配置过程是自动，Path全局变量没设置
在随意目录中输入node，提示这个命令不存在
解决办法：
1）重新安装nodejs版本
2）去修改全局配置，自己去添加Path

导入项目
左侧菜单空白处，右键，选择”导入“
在选择“从本地目录导入”，
浏览你创建vue项目目录

*.vue文件
特点：这个文件由3个部分组成
template 模板，html片段

Component template should contain exactly one root element.
If you are using v-if on multiple elements,
use v-else-if to chain them instead.

模板中必须唯一一个根元素，都放在一个div中

script
导出定义组件，给其起一个名字App，其他地方就可以按名字导入
export default {
name: ‘App’
}
定义好组件，引入import，然后标签

style
样式
自定义组件
1）创建自己组件文件 Item.vue
里面3部分怎么填写
2）注册（引用）直接生效使用

每个组件是天然隔离，即使属性名定义一样，也不会干扰

调用外部的组件，Element-UI 饿了吗出品
npm i element-ui -S
i代表install安装，-S 安装到生产环境，-D安装到开发环境

index.html，
main.js（全局导入）
//导入外部组件
import ElementUI from ‘element-ui’;
//elementui提供样式修饰总文件
import ‘element-ui/lib/theme-chalk/index.css’;

//把这个样式加入Vue项目中
Vue.use(ElementUI);

Vue项目启动加载过程
1）网站启动，在浏览器输入http://localhost:8080
2）按规定html网站规范，会自动找index.html文件
3）Vue项目底层根据配置文件build/webpack.base.conf.js
全局配置，同时加载main.js
4）main.js中导入import App.vue文件
5）解析App.vue文件过程它导入Item.vue文件
6）现解析Item.vue，翻译template，获取数据data区

搞清使用vue脚手架，它基础文件关系
网站规范，启动服务（nodejs/tomcat web中间件）
http://localhost:8080/
nodejs非常聪明如果启动时已经占用8080，会重新定义端口8081

注意：黑窗口，不能选中，就阻塞，就不会继续执行
解决：回车，不选中

1，App.vue（自定义组件）
//概念讲解

先加入小图标
引入栅格系统,html没有它不能适应屏幕大小变化
有了栅格系统，页面会自动根据屏幕大小来适应，
默认24列，设置一个属性xl占几列(大屏幕)，sm占几列（小屏幕）

elementui支持栅格

再加表格商品管理列表：商品名称、卖点、价格、描述（详情）表格头和html标准类似，但是表格的内容来自动态的 vue数据区 js对象，JSON字符串，数组对象数组[]，每条记录{name:'',sellPoint:'',price:100,note=''}

对整个表格绑定一个:data属性
值是从数据区获取的js数组对象
可以理解为拿到数组，利用v-for进行遍历
el-table-column 每个列
每次遍历，prop属性，对应每条数据里的key
label是中文名称
先加入小图标
引入栅格系统,html没有它不能适应屏幕大小变化
有了栅格系统，页面会自动根据屏幕大小来适应，
默认24列，设置一个属性xl占几列(大屏幕)，sm占几列（小屏幕）

elementui支持栅格
element-form表单怎么挂接数据
1）数据区声明一个js对象 m

m: {title: '',sellPoint: '',price: '',note: ''
}###

2）el-form 指定 model属性=m
3）el-input代表，双向绑定指令：v-model=m.title
el-input代表，双向绑定指令：v-model=m.title

数据区对象它会遗留之前处理值
数据驱动，带来的副作用！
解决方案：把对象置空？
m.tilte = ‘’;
m.price = 0.0;

js对象非常方便一个方法置空：
m = {}
var m = {} 不是把所有属性置空，把所有属性干掉！
js对象属性，是可以动态添加

m = {}
m.title = ‘’;

对数组进行新增、修改、删除函数splice
this.list.splice(0,0, this.m); 新增

获取要修改的m对象
this.list.splice(index,1,this.m); 修改（先删除，后添加）（index 所处行的位置， this.m=rown 每行的数据显示）
this.list.splice(index,1); 删除
新增
填写完表单，双向关联m属性，填写input，m属性随着变化
this.m就获取最新值
保存按钮执行：this.list.splice(0,0, this.m); 新增
修改
修改时，
a. 获得当前行索引 index，获取到当前行数据 row
（index和row是element-ui已经封装好了，它直接提供，slot槽对象）
把row给m，m是在表单中的值
this.m = row;

也调用save方法
b. save方法复用（新增，修改）怎么判断
思路：加全局变量isUpdate
代表新增：isUpdate = false; toadd转向新增页面
代表修改：isUpdate = true; toupdate转向修改页面

c. this.list.splice(index, this.m)

要在保存按钮地方要得到修改哪一条记录索引值
1）设置公用变量index
2) toupdate方法时，来设置 this.index= index
3）保存方法中 splice( this.index… )
副作用，修改表单中框，页面list中数据随之改变
根源：
this.m = row;
row当前对象，内存中存储当前对象，
this.m是新创建对象，还是和row是引用同一个对象？
这是同一个对象，对象是地址引用，它们引用是同一个内存地址，所以得到值是相同

解决办法：
变成新对象，新旧对象内容一致，地址不同，
this.m = JSON.parse(JSON.stringify(row));
通过变态操作（技巧）通过2次转换，变成新对象，打破row和m关系
删除
先得到当前行索引值 index
然后splice函数，this.list.splice(index,1)

<template><div><el-row><el-col><h1><i class="el-icon-eleme"></i>{{sysname}}</h1></el-col></el-row><!-- 传统html页面布局，横向布局不容易实现，新的布局方式flex，它支持新的属性justify--><el-row type="flex" justify="start"><el-button type="primary" @click="toadd" icon="el-icon-search">新增</el-button></el-row><el-row><el-col><el-table :data="list"><el-table-column prop="title" label="标题"></el-table-column><el-table-column prop="sellPoint" label="卖点"></el-table-column><el-table-column prop="price" label="价格"></el-table-column><el-table-column prop="note" label="详情"></el-table-column><el-table-column label="[操作]" width="220"><!--  增加template标签，动态获取当前行的索引和数据 --><template slot-scope="s"><el-button type="success" @click="toupdate(s.$index, s.row)" icon="el-icon-edit">修改</el-button><el-button type="danger" @click="del(s.$index)" icon="el-icon-delete">删除</el-button></template></el-table-column></el-table></el-col></el-row><!--定义对话框--><el-dialog :visible.sync="dialogVisible" width="30%" title="提示"><span><!-- 加入一个form表单 --><el-form :model="m" label-width="80px"><el-form-item label="标题:"><el-input v-model="m.title"></el-input></el-form-item><el-form-item label="卖点:"><el-input v-model="m.sellPoint"></el-input></el-form-item><el-form-item label="价格:"><el-input v-model="m.price"></el-input></el-form-item><el-form-item label="详情:"><el-input v-model="m.note" type="textarea"></el-input></el-form-item></el-form></span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible=false">取消</el-button><el-button @click="save">确定</el-button></span></el-dialog></div>
</template><script>//定义一个组件导出,data采用es6新标准函数写法export default{name: 'Item',data(){return {sysname: '京淘电商平台',dialogVisible: false,   //公用变量，修饰对话框是否展现isUpdate: false,        //公用变量，判断是否修改的依据index: '',                 //公用变量，保存当前修改记录的索引m: {    //为对话框表单声明对象变量，设置初始值，title: '', //当修改表单框内容，此时这里值随之改变，数据驱动体现sellPoint: '',price: '',note: ''},list: [{title: 'javascript入门宝典',sellPoint: '这本书很畅销',price: 99,note: '这本是主流作家所写'},{title: 'java是全球第一大语言',sellPoint: 'java从业人最多',price: 188,note: '学java拿高薪'}]}},methods:{toadd: function(){//在方法区引入数据区数据，要加一个关键字this.dialogVisible = true;  //展现对话框this.m = {};                  //利用js动态特点，把所有属性置空this.isUpdate = false;      //新增标识},toupdate: function(index, row){//1. 把row当前行的值赋值 m//this.m = row;   //会有副作用this.m = JSON.parse(JSON.stringify(row));//2. 打开对话框this.dialogVisible = true;this.isUpdate = true;     //修改标识this.index = index;       //通过element-ui.slot获取到当前索引值，赋值全局变量},del: function(index){//删除，第一个参数当前索引值，第二个参数删除个数this.list.splice(index, 1);},save: function(){ //新增和修改复用这个按钮，主流开发习惯方式//把当前数据，修改页面输入框内容，其结果就保存在m数据中if(!this.isUpdate){    //新增//实现把m对象放入list对象中，javascript原生splice函数this.list.splice(0,0, this.m);}else{              //修改//？怎么获取当前索引值，//第二个参数，删除1个，第三个参数，当前用户修改值this.list.splice(this.index, 1, this.m);}this.dialogVisible = false;}}}
</script><style>textarea{font-family: "微软雅黑";}
</style>

Vue-Element写一个简单的列表管理23/100统相关推荐

vue手写一个简单日历demo
实现效果: 左右拖拽实现切换月份,PC端自行改为左右点击实现切换 v-touch:swipe.left 左右切换,用的插件:vue2-touch-events transition-group 切换动 ...
vue结合php增删改查实例,用vue.js写一个简单的增删改查
Title tbody:empty:after { content: '没有找到'; } 姓名年龄操作 {{item.stuName}}{{item.age}}修改删除添加 var app = n ...
使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
怎样写一个简单的操作系统？（原文标题：How to write a simple operating system）分类：翻译 2011-01-26 01:10 3175人阅读评论(3) 收藏
怎样写一个简单的操作系统?(原文标题:How to write a simple operating system) 分类: 翻译2011-01-26 01:10 3175人阅读评论(3) 收藏举 ...
Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）
上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页了解了LigerUI 中Grid的基本用法现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面. ...
Visual Studio 2019 C# 上位机入门(2)：写一个简单的串口助手
前言本文记录一下用Visual Studio 2019 C# 写一个简单的串口助手的过程,由于没有先从小处学习,而是直接找相关资料就开始做,免不了很多奇怪的问题花了一些时间,基于此情况,我将尽可能整 ...
Java 百度AI 写一个简单的手势识别程序
教程地址:请关注我的https://edu.csdn.net/course/detail/23001 Java写一个简单的手势识别程序,这里采用百度是AI,视觉技术中的人体分析中的手势识别,识别图片中 ...
如何搭建python框架_从零开始:写一个简单的Python框架
原标题:从零开始:写一个简单的Python框架 Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 你为什么想搭建一个Web框架?我想有下面几个原因: 有一个 ...
ipad php mysql_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...

Vue-Element写一个简单的列表管理23/100统

Vue-Element写一个简单的列表管理23/100统相关推荐

最新文章

热门文章