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>