当前位置：首页 > news >正文

day4 vue2以及ElementUI

news 来源：原创 2024/9/24 1:25:19

创建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 = falsenew Vue({render: h => h(App),
}).$mount('#app')