VUE和ElementUI基础入门

最新推荐文章于 2023-03-21 15:28:22 发布

嘎啦给给

最新推荐文章于 2023-03-21 15:28:22 发布

阅读量352

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/drug1910951117/article/details/107120240

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

VUE快速入门

.下载和引入 vue.js 文件。

编写入门程序。

视图：负责页面渲染，主要由 HTML+CSS 构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- 视图 -->
<body>
    <div id="div">
        {{msg}}
    </div>
</body>
<script src="js/vue.js"></script>
    <!-- 脚本 -->
<script>
    new Vue({
        el:("#div"),
        data:{
            msg:"hello vue"
        }
    })
</script>
</html>

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的
vue中的获取元素:this.$refs["xxx"]
选项列表
- el 选项：用于接收获取到页面中的元素。
- data 选项：用于保存当前 Vue 对象中的数据。
- methods 选项：用于定义方法。
数据绑定
- 在视图部分获取脚本部分的数据。
  
  {{变量名}}

相关指令

带有v-前缀的特殊属性,不同指令具有不同的意义
使用指令时,通常编写在标签的属性上,值可以使用js表达式

常用指令

指令	作用
v-html	把文本解析为HTML代码,可以解析标签
v-bind	为html标签绑定属性
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	同上
v-else-if	同上
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染,遍历容器的元素或者对象的属性
v-on	为html绑定事件
v-model	在表单元素上创建双向绑定

v-model表单绑定
- v-model：在表单元素上创建双向数据绑定。
双向数据绑定
- 更新 data 数据，页面中的数据也会更新。
- 更新页面数据，data 数据也会更新
MVVM模型(Model View ViewModel)：是 MVC 模式的改进版
- 在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。
基本指令例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <!-- 1.文本插值 -->
       
        <div>
            <!-- 1.1    {{}} -->
            <span>{{name1}}</span>
            <hr>

            <!-- 1.2    v-html -->
            <span v-html="name2"></span>
            <hr>

            <!-- 绑定属性 -->
            <a v-bind:href="url1" v-html="url1"></a><br>
            <a :href="url2" v-html="url2"></a><br>
            <hr>

            <!-- 条件渲染 -->
            <ul>
                <li v-if="nums > 1">li1</li>
                <li v-else-if="nums > 2">li2</li>
                <li v-else-if="nums > 4">li4</li>
                <li v-else="nums > 3">li3</li>
            </ul>
            <hr>

            <!-- 列表渲染 -->
            <ul>
                <li v-for="hobby in bobbies">
                    {{hobby}}
                </li>
            </ul>
            <hr>

            <!-- 事件的绑定 -->
            <!-- 方式一 -->
            <button v-on:click="change()">点我更改文本内容</button>
            <!-- 方式二 -->
            <button @click="exchange()">点我更改文本内容</button>
            <!-- 不知道原理,不使用 -->
            <!-- <button :click="exchange()">点我更改文本内容</button> -->
            <hr>
            
            <!-- 表单绑定:在表单元素上创建双向数据绑定<br>
                双向数据绑定:更新 data 数据，页面中的数据也会更新。
                更新页面数据，data 数据也会更新。 -->
            <form>
                年龄:<input type="text" name="=username" v-model="age">
            </form>
        </div>
    </div>
    
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name1:"美食家老八",
            name2:"东北腰子姐",
            url1:"https://www.baidu.com",
            url2:"https://www.bilibili.com",
            nums:3,
            bobbies:[
                "吃饭",
                "睡觉",
                "打豆豆"
            ],
            age:"三十有二"

        },
        methods:{
            //定义方法方式一
            change(){
                this.name1="嘿嘿,来了"
            },
            //定义方法方式二
            exchange:function(){
                this.name2="来了老弟!!!"
            }
    }
    })
</script>
</html>

Element 基本使用

介绍

Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库.
使用 Element 前提必须要有 Vue。
Element 官网：https://element.eleme.cn/#/zh-CN

使用步骤

下载 Element 核心库。
引入 Element 样式文件。
引入 Vue 核心 js 文件。
引入 Element 核心 js 文件。
借助常用组件编写网页。
CV大法

拷贝data时需注意data函数中return语句返回的对象
方法直接拷贝methods
注意prop属性值的来源
表格中
1. 指定表格对象data，他指定一个数组
2. 它里面的prop属性指定每一个行的属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-row {
            /* 行距为20px */
            margin-bottom: 20px;
        }
        .bg-purple-dark {
            background: red;
        }
        .bg-purple {
            background: blue;
        }
        .bg-purple-light {
            background: green;
        }
        .grid-content {
            /* 边框圆润度 */
            border-radius: 4px;
            /* 行高为36px */
            min-height: 36px;
        }
      </style>
</head>
<body>
    <div id="div">
        <el-button type="primary" plain>主要按钮</el-button><br>
        <el-link type="danger">危险链接</el-link><br>
        <div class="demo-input-suffix">
            属性方式：
            <el-input
              placeholder="请选择日期"
              suffix-icon="el-icon-date"
              v-model="input1">
            </el-input>
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input2">
            </el-input>
          </div>
          <div class="demo-input-suffix">
            <div class="block">
                <span class="demonstration">默认不区分颜色</span>
                <el-rate v-model="value1"></el-rate>
              </div>
              <div class="block">
                <span class="demonstration">区分颜色</span>
                <el-rate
                  v-model="value2"
                  :colors="colors">
                </el-rate>
              </div>
              <el-row>
                <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
              </el-row>
    </div>
    
</body>
<script>
  new Vue({
      el:"#div"
  })
    
</script>
</html>

自定义组件

定义格式

Vue.component(组件名称, {
props:组件的属性,
data: 组件的数据函数,
template: 组件解析的标签模板
})

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义组件</title>
    <script src="vue/vue.js"></script>
</head>
<body>
    <div id="div">
        <my-button>我的按钮</my-button>
    </div>
</body>
<script>
    Vue.component("my-button",{
        // 属性
        props:["style"],
        // 数据函数
        data: function(){
            return{
                msg:"我的按钮"
            }
        },
        //解析标签模板
        template:"<button style='color:red'>{{msg}}</button>"
    });

    new Vue({
        el:"#div"
    });
</script>
</html>

VUE生命周期

生命周期：核心八个阶段
beforeCreate：创建前
created：创建后
beforeMount：载入前
mounted：载入后
beforeUpdate：更新前
updated：更新后
beforeDestroy：销毁前
destroyed：销毁后

VUE异步操作

在VUE中发送异步请求,本质上还是AJAX,我们可以使用 axios 这个插件来简化操作！
使用步骤

引入 axios 核心 js 文件。
调用 axios 对象的方法来发起异步请求。
调用 axios 对象的方法来处理响应的数据。

常用方法

get(请求的资源路径与请求的参数) 发起GET方式请求
post(请求的资源路径,请求的参数) 发起POST方式请求
then(response) 请求成功后的回调函数，通过response获取响应的数据
catch(error) 请求失败后的回调函数，通过error获取错误信息

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="div">
        {{name}}
        <button @click="send()">发起请求</button>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三"
        },
        methods:{
            send(){
                // GET方式请求
                // axios.get("testServlet?name=" + this.name)
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })

                // POST方式请求,假装有这个servlet处理后,返回响应数据
                axios.post("testServlet","name="+this.name)
                //请求成功后的回调函数，通过response获取响应的数据
                    .then(resp => {
                        alert(resp.data);
                    })
                //请求失败后的回调函数，通过error获取错误信息
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>

嘎啦给给

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
VUE和ElementUI基础入门

VUE快速入门.下载和引入 vue.js 文件。编写入门程序。视图：负责页面渲染，主要由 HTML+CSS 构成。脚本：负责业务数据模型（Model）以及数据的处理逻辑举个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
复制链接

扫一扫