0713Vue-Element-day01

Vue-day01

一. 认识vue

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

入门

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

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

2. 引入vue.js

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

3. 创建一个Vue对象

   • el属性

     • 设置管理的代码片段的

   • data属性

     • 声明变量

   • methods属性

     • 定义各种方法

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

二. 指令-重点掌握

1. 文本指令

1. 插值表达式:差值插值表达式不会解析html标签

   • {{变量的名字}}

2. 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。

  

  • 3. <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的使用

  1. 以后使用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. 常用的组件

  1. 基础布局

     • 基础布局把一行划分为24份,使用span来表示当前的组件需要占用多少份

  2. 容器布局

     • 网页的常规布局,如果现有的布局不能满足你了你就可以使用el-container进行嵌套实现

  3. 表单组件

     • 1. 需要知道如何进行数据绑定
     • 2. 需要知道如何绑定校验规则，如何编写校验规则
     • 3. 要灵活的应用各个表单组件

  4. 表格

  5. 导航组件

     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>