0713Vue-Element-day01

最新推荐文章于 2024-01-31 09:55:45 发布

原创最新推荐文章于 2024-01-31 09:55:45 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementUi vue ui 前端 #javascript

Java学习笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍Vue.js的基础知识，包括指令、条件渲染、事件绑定等核心概念，并演示如何结合Element-UI组件库快速搭建美观的前端界面。

Vue-day01

一. 认识vue

#渐进式技术栈，通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件

入门

编写html代码片段并给该片段取一个id属性

  <div id="div">
          <div>姓名：{{name}}</div>
          <div>班级：{{classRoom}}</div>
          <button onclick="hi()">打招呼</button>
          <button onclick="update()">修改班级</button>
      </div>
  ```

引入vue.js

   <script src="js/vue.js"></script>
   ```

创建一个Vue对象

el属性
- 设置管理的代码片段的
data属性
- 声明变量
methods属性
- 定义各种方法

new Vue({
        el:"#div",
        data:{
            name:"张三",
            classRoom:"黑马程序员"
        },
        methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

二. 指令-重点掌握

1. 文本指令

插值表达式:差值插值表达式不会解析html标签
- {{变量的名字}}
v-html属性：属性会解析html标签内容

msg:"<b>Hello Vue</b>" //这样文字会被加粗

2. 绑定属性

v-bind:为 HTML 标签绑定属性值。

作用：把vue对象的data属性里面声明的变量和标签的某一个属性进行绑定
场景-绑定class属性

写法

<div v-bind:class="变量的名字">
<div :class="变量的名字">   //推荐方式

<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <a :href="url">百度一下</a>
        <div :class="cls">我是div</div>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my" //上面class里面数据会根据这里设置的值而改变
        }
    });
</script>

3. 条件渲染指令

v-if:条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else:条件性的渲染。
v-else-if:条件性的渲染。 在页面代码中不能显示出来
v-show:根据条件展示某元素，区别在于切换的是 display 属性的值。在页面代码中能显示，只是display为nona

<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>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>

4. 集合或者对象的遍历

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

<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>

5. 事件绑定

v-on:为 HTML 标签绑定事件。

<a v-on:click="函数名称()"> 
<a @click="函数名称()"> //简写方式（推荐使用）
  
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>
        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{  //调用的方法
            change(){
                this.name = "传智播客"
            }
        }
    });
</script>

注意：事件的名字也是原生的js属性把on去掉,同时绑定的方法必须要在Vue对象的methods属性里面声明和定义

6.表单数据绑定

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

MMVC模型

<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>
  </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>

三. Element-UI

1. 他帮助我们完成了很多的css的布局,把他们都封装成了一个一个的组件,我们开发的时候只需要找到对应的组件,然后复制粘贴修改即可

官网地址：https://element.eleme.cn/#/zh-CN

2. 学习的核心-复制粘贴

3. ElementUI的使用

以后使用element-ui的步骤

<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>

特别强调: 引入js的时候必须要先引入vue的js然后在引入element-ui的js

4. 常用的组件

基础布局
- 基础布局把一行划分为24份,使用span来表示当前的组件需要占用多少份
容器布局
- 网页的常规布局,如果现有的布局不能满足你了你就可以使用el-container进行嵌套实现
表单组件
- 1. 需要知道如何进行数据绑定
- 1. 需要知道如何绑定校验规则，如何编写校验规则
- 1. 要灵活的应用各个表单组件
表格
导航组件
1. 顶部导航
2. 侧边栏导航

5.使用技巧

注意事项：
- 粘贴后需要自己写 new Veu{}和el:"#div"，把var声明验证的变量放在data()大括号内return外。
- 多个方法要放在methods:{}大括号里面，方法和方法之间用“,”逗号隔开。

官网提供的代码：

<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        }
      };
    }
  }
</script>

引入后的代码：

<div id="div" class="loginbox">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" >
        <el-form-item label="手机号码" prop="phone">
       			 <el-input v-model="ruleForm.phone"></el-input>
				<el-form-item label="登录密码" prop="pass">
        		 <el-input type="password" v-model="ruleForm.pass" ></el-input>
    		</el-form-item>
		</el-form>
  </div>

<script>
  	//粘贴后需要自己写 new Veu{}和el:"#div"，把声明验证变量放在data()大括号内return外
    new Vue({
     el:"#div",
     data() {
          var validatePass = (rule, value, callback) => {
              if (value === '') {
                  callback(new Error('请输入密码'));
              }
          };
          
          return {
              show: true,  // 发送验证码倒计时初始启用按钮
              count: '',   // 初始化次数
              timer: null,

              ruleForm: {
                  phone: '',
                  pass: '',
              },
              rules: {
                  phone: [
                      {required: true, message: '请输入手机号', trigger: 'blur'},
                  ],
                  pass: [
                      {required: true, message: '请输入密码', trigger: 'blur'},
                  ]
             		 }
         			 }
     		   //data结尾
     			 },
  
          methods:{
              submitForm(formName){
                  this.$refs[formName].validate((valid) => {
                      if (valid) {
                          alert('submit!');
                      }
                  });
              },
            //下面括号为方法结尾
          },
        //下面括号为Vue结尾
        });
</script>