Vue + ElementUI的使用

最新推荐文章于 2024-04-12 05:20:26 发布

昊天h1

最新推荐文章于 2024-04-12 05:20:26 发布

阅读量518

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_45741895/article/details/126071927

版权

Vue

一，搭建运行环境

下载 vue.js 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
CDN方式:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

二，总结

(一)，基本的结构

<body>
    <!-- 有且只有一个根元素和vue对象进行绑定 交给vue管理 -->
    <div id="app">{{message}}</div>
</body>

<!-- 引入Vue 通过CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    // 渲染Vue对象
    var app = new Vue({
        el:"#app",           // 绑定DOM根元素
        data:{
            message:"Hello Vue！",
        },
    });
</script>

(二)，变量的绑定

单个变量：{{变量名}}

<div>单个变量:{{message}}</div>

普通数组：v-for=“(数组成员,index) in 数组名” :key=“index”

<li v-for="(city,index) in citys" :key="index">{{city}}</li>

单个对象：对象名.属性名

<div>单个对象:  姓名:{{person.name}}  年龄:{{person.age}}</div>

对象数组：v-for=“(单个对象名,index) in 对象数组名” :key=“index”

<div v-for="(p,index) in persons" :key="index">对象数组 : 编号:{{p.id}} 姓名:{{p.name}}  年龄:{{p.age}}</div>

(三)，属性的绑定

即动态绑定 v-bind:属性=“data中的变量”，其中v-bind:可简写：

<img v-bind:src="imgObj.pic" alt="" :id="imgObj.id">

(四)，事件绑定

无参方法: @click=“方法名”
有参方法: @click=“方法名(参数)”

<input type="button" value="改变DIV背景颜色" @click="test01">
<input type="button" value="测试有参数的方法" @click="test02(1,2)">

(五)，数据和表单绑定

v-model=“表单对象.成员变量名”，即双向绑定。

<div id="app">
        账号:<input type="text" name="username" id="" v-model="studentForm.username"/><br>
        籍贯:<select name="city" id="city" v-model="studentForm.city">
            <option value="深圳">深圳</option>
            <option value="广州">广州</option>
            <option value="长沙">长沙</option>
        </select>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            content:'',
            studentForm:{
                username:'',
                city:''
            }
        }
    })
</script>

Vue + Element UI 创建项目

一，创建vue项目

1.全局安装脚手架Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.创建 vue 项目

vue create hello-world

选择vue2.0版本 vue-router,其他的一路回车

二，为刚创建的Vue项目安装 Element UI框架

1. npm安装框架

npm i element-ui -S

2.引入 Element

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.使用

三, 前端给后端发送请求 axios

1.为 Vue 项目安装axios

npm install axios

2.使用

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });