Vue基础入门&&Elment基础使用

最新推荐文章于 2023-07-16 10:26:50 发布

-=---=

最新推荐文章于 2023-07-16 10:26:50 发布

阅读量336

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/peng_19_20_qing/article/details/107121606

版权

Vue和Element

1. Jquery他操作数据时伴随着需要操作dom
2. Vue主要面向数据操作（JSP）

一 Vue 快速入门

1.1Vue 介绍

 Vue  是一套构建用户界面的渐进式前端框架
      只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合
      通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件
 特点 
     易用：在有 HTML CSS JavaScript 的基础上，快速上手。
     灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
     性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化

1.2Vue 快速入门

步骤
    1. 下载和引入 vue.js 文件  --导包
    2. 编写入门程序。
    视图：负责页面渲染，主要由 HTML+CSS 构成。
      编写body中的html   --模板结构
    脚本：负责业务数据模型（Model）以及数据的处理逻辑。
        1.创建Vue对象
        2.el属性指定需要绑定的元素
        3.编写对应的data

模板

```

脚本

 new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });

入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
    <!-- 视图 -->
    <!-- 第二步编写模板 -->
    <div id="div">
        {{msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<!-- 第一步导包 导入vue.js 文件 -->
<script>
    // 脚本
    //第三步编写脚本
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });
</script>
</html>

1.3Vue 快速入门详解

 Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的
     let vm = new Vue({
        选项列表;
        });

   选项列表
    el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
    data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
    methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
       
     数据绑定
    在视图部分获取脚本部分的数据。
    {{变量名}}

methods:

1.可以定义方法，并且在方法中能够使用this来操作数据
2.普通对象定义形式 
    methods:{
            study: function(){
                                alert(this.name + "正在" +this.classRoom + "好好学习!");
                             }
             }
3.简写对象定义形式
     methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
                }
            }

1.4小结

Vue 是一套构建用户界面的渐进式前端框架
Vue 的程序包含视图和脚本两个核心部分
    脚本部分
    Vue 核心对象。
        选项列表
        el：接收获取的元素,即指定模板元素位置
        data：保存数据。指定模板中使用的数据
        methods：定义方法。
          
     视图部分
        数据绑定：{{变量名}}

二 Vue 常用指令

作用: 编写模板文件使用

指令介绍

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for

使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式

常用指令

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

指令演示

1.0 文本插值

v-html：把文本解析为 HTML 代码。
    
<body>
    <div id="div">
         <div>{{msg}}</div> 
          <!-- 不会解析标签<b> 显示为 <b>Hello Vue</b> 毫无变化-->
        <div v-html="msg"></div>  
         <!-- 这里的msg 指向data里的msg, 
         会解析标签<b>  显示为 Hello Vue 字体加粗-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

2.0绑定属性

 绑定属性
v-bind：为 HTML 标签绑定属性值 可以简写 :。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
            width: 100px;
            background-color: chartreuse;
        }
      
    </style>
</head>
<body>
    <div id="div">
        <!-- 完整模式 -->
        <a  v-bind:href="url">百度一下</a>
        <br>
        <!-- 简写模式 可以省略 v-bind,同时可以绑定多个不同的属性 -->
        <a :class="cls" :href="url">百度一下</a>
        <br>
        <a :href = "skt" >京东商城</a>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my",
            skt:"https://www.jd.com"
           
        }
    });
</script>

3.0条件渲染

条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
            
        <!-- 不满足条件,根本不会加载 更不会显示在页面上,
            只会显示和加载满足条件的
            -->
            
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>
     

        <!-- show加载类, 
            根据条件展示某元素，区别在于切换的是 display 属性的值
                true 展示 ,false 不展示
                但一定会加载
            -->
        <div v-show="flag">div4</div>


        <div v-if ="isRight">个人中心</div>
        <div v-else ="!isRight">
            登录页面
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false,
            isRight:false
        }
    });
</script>
</html>

4.0列表渲染

列表渲染: v-for：列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <style>
        .csd{
            border: coral;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="div">
        <ul>
        <!-- 写在对应元素上即可遍历生成多个该元素 -->
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
            <li :class="cls" v-for = "a in as">
                {{a}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            },
            as:[1,2,3,4,5,6],
            cls:"csd"
        }
    });
</script>
</html>

5.0事件绑定

v-on：为 HTML 标签绑定事件

<body>
    <div id="div">
        <div>{{name}}</div>
          <!-- 完整格式 v-on:事件名称,
            值是methods中的方法
           -->
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>
         <!-- 简写格式 @事件名称 -->
        <button @click="change()">改变div的内容</button>
        <button @click = "back()">改回div的内容</button>
       
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{
            change(){
                this.name = "传智播客"
            },
           back(){
               this.name = "黑马程序员"
           },
        }
    });
</script>

6.0表单绑定&双向数据绑定

表单绑定 : v-model: 在表单元素上创建双向数据绑定
双向数据绑定 : 更新 data 数据，页面中的数据也会更新更新页面数据，data 数据也会更新

<body>
    <div id="div">
        <form autocomplete="off">
            <!-- 使用 -->
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
        <button @click="getUsername()">提交</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
       // el:"input",
        data:{
            username:"张三疯",
            age:23
        },
        methods:{
            getUsername(){
                console.log(this.username);
                console.log(this.age)
            }
        }
    });
</script>

常用指令小结

 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义
  
 文本插值
v-html：把文本解析为 HTML 代码
     
 绑定属性
v-bind：为 HTML 标签绑定属性值    可以简写为 :

条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是 display 属性的值
    
列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性
    
事件绑定
v-on：为 HTML 标签绑定事件 可以简写为 @事件名称  

表单绑定
v-model：在表单元素上创建双向数据绑定

三 Element 基本使用

Element 介绍

 Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库
     
 使用 Element 前提必须要有 Vue
     
 组件：组成网页的部件，例如 超链接、按钮、图片、表格等等

Element 快速入门

步骤
    
1. 下载 Element 核心库。
2. 引入 Element 样式文件。
3. 引入 Vue 核心 js 文件。
4. 引入 Element 核心 js 文件。
5. 编写按钮标签。
6. 通过 Vue 核心对象加载元素。 
7.拷贝对应的组件到模板中

    <title>练习008</title>
    <!-- 快速入门 -->
    <!-- 1 引入 Element 样式文件。 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 2 引入 Vue 核心 js 文件 由于存在依赖关系 2 3顺序不能混乱,2必须在3前-->
    <script src="js/vue.js"></script>
    <!-- 3 引入 Element 核心 js 文件 -->
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <!-- 编写按钮标签 拷贝的时候 body部分可以全部或者选择需要部分拷贝-->
<div id="div">
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div>
</body>
<script>
    // 通过 Vue 核心对象加载元素
    new Vue({
     el:"#div"
    });
</script>

布局方式

基础布局

基础布局：将页面分成最多 24 个部分，自由切分

<div id="div">
    <el-row>
         <!-- :span 可以绑定vue 通过这种方式避免写死 -->
         <!-- 行<el-row></el-row> -->
         <!-- 列<el-col></el-col> -->
         <el-col :span="spanNum"><div class="grid-content bg-purple-dark"></div></el-col>
        <!-- <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> -->
      </el-row>
      <el-row>
          <!-- 每一个行一共24份 
            所有的el-col的span属性指定每一列的比例，数字之和24 才会完全展示不会留白
        -->
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-dark"></div></el-col>
      </el-row>
</div>
</body>
<script>
    // 通过 Vue 核心对象加载元素
    new Vue({
     el:"#div",
     data:{
        spanNum:12   
     }
    });
</script>

容器布局

容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域

<div id="div">
    <!-- <el-header>：顶栏容器。

    <el-aside>：侧边栏容器。

    <el-main>：主要区域容器。

    <el-footer>：底栏容器。 -->
    <el-container>
          <!-- <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列 -->
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-container>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
</div>
</body>
<script>
    // 通过 Vue 核心对象加载元素  必不可少
    new Vue({
     el:"#div"
    });
</script>

Form表单组件（以实体为单位传递数据）

<el-form-item label="学生名称" prop="name">
    其中的prop属性指定的是form中的rules的属性名称
    和实体类中的属性名相同
<el-form :model="student" :rules="rules" ref="ruleForm">  
   model: 指定实体对象，data中的属性
   rules： 指定校验规则， 也是data中的属性
   ruleForm：相当于id

name: [
            // required：是否必须填写 不能为空， message：如果不满足校验条件显示内容，trigger：什么时候触发校验
            { required: true, message: '请输入活动名称123132', trigger: 'blur' },
            //
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]

from表单的拷贝

1.标签内容可以直接完全拷贝 也可以只拷贝需要的部分,视具体的需求改动

2.数据拷贝(脚本)
    1.自己创建vue实列
    2.拷贝别人data函数中的返回值 视需求做改动,

Form表单的函数

箭头函数 =>  类似于lambda表达式
    例如
    (valid)=>{
         if (valid) {
                          alert('submit!');
                      } else {
                          console.log('error submit!!');
                          return false;
                      }    
             }
普通函数表达式为
    function(valid){
                      if (valid) {
                          alert('submit!');
                      } else {
                          console.log('error submit!!');
                          return false;
                      }
}

表格组件

表格：用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作

1. 指定表格对象data，他指定一个数组
2. <el-table-column>它里面的prop属性指定每一个行的属性名

导航栏组件

分顶部导航栏和侧边导航栏

Element 小结

Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于 Vue 的桌面端组件库
    
使用 Element 前提必须要有 Vue
    
  使用步骤
1. 下载 Element 核心库。
2. 引入 Element 样式文件。
3. 引入 Vue 核心 js 文件。
4. 引入 Element 核心 js 文件。
5. 借助常用组件编写网页。
    
 常用组件
网页基本组成部分，布局、按钮、表格、表单等等~~~
常用组件不需要记住，只需要在 Element 官网中复制使用即可。
    
vue中的获取元素
    this.$refs["student"]
    
拷贝elementui需要注意

1. 拷贝data时注意只需要data函数中return语句返回的对象即可
2. 方法直接拷贝methods

-=---=

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue基础入门&&Elment基础使用

Vue和Element1. Jquery他操作数据时伴随着需要操作dom2. Vue主要面向数据操作（JSP）一 Vue 快速入门1.1Vue 介绍 Vue 是一套构建用户界面的渐进式前端框架只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件特点易用：在有 HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应
复制链接

扫一扫