day4 vue2以及ElementUI

创建vue2项目

可能用到的命令行们

vue create 项目名称 // 创建项目
cd 项目名称 // 只有进入项目下，才能运行
npm run serve // 运行项目
D: //切换盘符
cd .. // 返回到上一级目录
clear // 清空终端

更改 Vue项目的端口配置

基础语法

项目创建完成之后，会有一个组件HelloWorld.vue，这个组件是已经配置好的，可以直接在上面写代码来运行。

首先vue分成三个板块， 必不可少的就是template和script板块，前者写HTML代码，后者配置将组件导出需要的值。

{{属性值}}可以动态得到data中配置的属性值；

使用v-on:xxx或 @xxx 绑定事件,其中xxx是 事件名, 例如 @click；

methods中配置方法，computed中配置计算属性，也是写成一个方法的样子，返回运算结果，可以直接用{{方法名}}来执行；

# v-model 用于收集表单数据，=“属性名”则该属性可以获取到表单组件的数据，有三个修饰符—— lazy : 失去焦点再收集数据； number:输入字符串转为有效的数字； trim:过滤掉首尾输入的空格

条件渲染——

条件渲染有 v-if v-show
 # v-if
写法:  v-if="表达式"
 v-else-if="表达式"
 v-else="表达式"
适用于: 切换频率较低的场景
特点: 不展示的DOM元素 直接被移除----------------------------
 # 注意 : v-if 可以和 v-else-if, v-else 一起使用,但要求结构不能被"打断"
 # v-show
写法:v-show="表达式"
适用于: 切换频率较高的场景
特点:不展示的DOM元素未被移除,仅仅是使用 display:none 隐藏掉--------------
# 注意:
使用v-if时 元素可能无法获取到,而使用v-show 一定可以获取到
<template>标签只能与v-if 配合使用

v-for列表渲染——

<li v-for="user in userList" :key="user.id">{{user.username}}--
 {{user.tel}}</li>

 script中，data(){}是比较特殊的一，几乎只有data才会使用方法的方式，其他都是属性的方式，

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>姓名：{{ name }}</h3>
    <!-- 插值语法 -->
    <h3>学校：{{ school }}</h3>
    <h3>我要计算：{{ count }}</h3>
    <input type="number" v-model.lazy="add" />
    <br />
    <el-button type="primary" @click="cal(10)">Change Name</el-button>
    <div>{{ show }}</div>
    <div>
      <!--条件渲染：if show v-if条件不成立不占位置，v-show 条件不成立也占位置-->
      <p v-if="check()">{{ name }} 你好！</p>
      <p v-show="check()">counter is greater than 10</p>
    </div>
    <di>列表渲染v-for</di>
    <ul>
      <li v-for="(item, index) in bankList" :key="index">
        {{ item.bankName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld", // 组件名称
  data() {
    return {
      name: "郑欣怡",
      school: "燕山大学",
      count: 0,
      add: 100,
      firstName: "郑",
      lastName: "欣怡~",
      questionList: [
        { questioner: "玉米", experName: "张", id: 100 },
        { questioner: "苹果", experName: "李", id: 200 },
        { questioner: "香蕉", experName: "王", id: 102 },
        { questioner: "苹果", experName: "李", id: 103 },
      ],
      bankList: [
        { bankName: "工商银行", bankCode: "ICBC", bankAddress: "北京市朝阳区" },
        { bankName: "建设银行", bankCode: "CCB", bankAddress: "北京市海淀区" },
        { bankName: "农业银行", bankCode: "ABC", bankAddress: "北京市西城区" },
        {
          bankName: "邮政储蓄银行",
          bankCode: "PSBC",
          bankAddress: "北京市通州区",
        },
        { bankName: "招商银行", bankCode: "CMB", bankAddress: "北京市顺义区" },
        { bankName: "浦发银行", bankCode: "SPDB", bankAddress: "北京市大兴区" },
        { bankName: "兴业银行", bankCode: "CIB", bankAddress: "北京市房山区" },
        { bankName: "光大银行", bankCode: "CEB", bankAddress: "北京市密云区" },
      ],
    };
  },
  props: {
    // 接收父组件传递的属性
    msg: String,
  },
  // 事件处理
  methods: {
    changeName() {
      this.count++;
      if (this.count % 2 === 0) {
        this.name = "韩梅梅";
      } else {
        this.name = "郑欣怡";
      }
    },
    cal(num) {
      this.count += num;
      // this.count += this.add;
    },
    check() {
      // alert("check" + this.count);
      return this.count > 10;
    },
  },
  computed: {
    // 计算属性
    show() {
      return this.firstName + this.lastName;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 当前样式只对当前页面有效 */
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

组件化开发

 # Vue中使用组件的三大步骤 ：
一 定义组件(创建组件)
二 注册组件
三 使用组件(写组件标签) 

在App.vue中注册组件：

import HelloWorld from './components/HelloWorld.vue'
 import MyVue from './components/My.vue'
 export default {
  name: 'App',
  components: {
    HelloWorld,
    MyVue
  }
 }

在App.vue中使用组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
<!--使用自定义的组件-->
    <NewVue/>
    <hello-vue/>
    <FormVue/>
  </div>
</template>

导入ElementUI

使用ElementUI中的css渲染让网站中的组件更加美观。

Element - The world's most popular Vue UI framework

网站中包含了大量样式，可以直接得到样式的代码，复制到自己的项目中，前提是还得将Element UI装入项目：

命令行执行：

npm i element-ui -S

在main.js中配置：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';

//样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')