3.5 绑定事件v-on

事件监听可以使用 v-on:事件名="" 指令,简写@事件名=""

注意事项

1.@事件名=”” 双引号中只能写调用方法的代码或者操作vue对象属性的代码

2.如果双引号中调用方法是无参的，那么()可以省略，如果双引号中调用属性，不能加this

案例：vue对象中有个属性num值是1,在页面添加按钮并给按钮绑定单击事件，单击时将num的值+1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 适口，一般针对移动端页面使用，目的是为了禁止页面的缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步：引入js -->
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 第二步：创建容器，用于显示数据 -->
    <div id="app">
        {{num}}
        <!-- 调用方法，因为是无参的，所以()可以省略 -->
        <button @click="play">点我</button>  
        <!-- 直接操作属性，不能加this -->
        <button @click="num++" >点我</button> 
    </div>
    <!-- 第三步：定义Vue对象，将数据存进去 -->
    <script>
        new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                play:function(){
                    this.num++;
                }
            }
        });
    </script>
</body>
</html>

运行效果

3.6 属性绑定v-bind

单向数据绑定内存改变影响页面改变. 其实是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

语法v-bind:属性名='值' ,简化语法::属性名='值'

案例：一只vue对象的属性值有两个，分别是url:”http://www.baidu.com",img:" //www.baidu.com/img/flexible/logo/pc/result.png “，请将该属性分别绑定给a和img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a :href="url">百度</a>
        <img :src="img" alt="">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                url:"http://www.baidu.com",
                img:" //www.baidu.com/img/flexible/logo/pc/result.png "
            }
        });
    </script>
</body>
</html>

3.7 表单绑定v-model

双向数据流（绑定）

页面改变影响内存(js)
内存(js)改变影响页面

使用v-model="" 可以将vue对象中的属性值与表单的值双向绑定：表单的值发送改变，那么vue对象的属性值也会发生改变，vue对象的属性值发生改变，表单的值也会发生改变。

案例

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <form action="">
            用户名<input v-model="formData.username"> <br>
            密码<input v-model="formData.password"> <br>
            爱好 <input type="checkbox" v-model="formData.hobbies" value="eat"> 吃 <input type="checkbox" v-model="formData.hobbies" value="drink"> 喝 <br>
            性别 <input type="radio" v-model="formData.gender" value="man"> 男 <input type="radio" v-model="formData.gender" value="woman"> 女 <br>
            祖籍 <select v-model="formData.address">
                    <option value="shandong">山东</option>
                    <option value="shanxi">山西</option>
                </select>
        </form>
        <button type="button" @click="print()">打印表单数据到控制台</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                formData:{
                    username:"",
                    password:"",
                    hobbies:[],
                    gender:"",
                    address:""
                }       
            },
            methods:{
                print:function(){
                    console.log(this.formData);
                }
            }
        })
    </script>
</body>
</html>

当输入表单数据，点击打印表单数据到控制台按钮，输出结果如下

3.8 双向绑定

放到对象方便存储，自动具备属性

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

MVVM模型(ModelViewViewModel)：是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>表单绑定</title>
</head>
<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 src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>
</html>

3.9 小结

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

4 ElementUI

4.1 学习目标

使用ElementUI编写学生列表页面，效果如下.使用文档参见官网

4.2 介绍

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。点击直达ElementUI主页

4.3 快速入门

下面是使用ElmentUI构建页面的开发步骤

下载 Element 核心库。点击下载
引入 Element 样式文件，所在目录lib/theme-chalk/index.css
引入 Vue 核心 js 文件
引入 Element 核心 js 文件,所在目录 lib/index.js
编写按钮标签。
通过 Vue 核心对象加载元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步：引入Vue和ElementUI相关样式与JS -->
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!-- 第二步：使用ElementUI提供的组件 -->
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
    </div>
    <script>
        // 第三步：创建Vue对象，加载元素
        new Vue({
            el:"#app",
        });
    </script>
</body>
</html>

4.4 Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。一行最多允许分成24列。

使用方式

1.使用el-row定义行标签

2.使用el-col定义列标签

3.在el-col 标签中使用:span绑定该列所占的份额

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue和ElementUI相关样式与JS -->
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 1.使用<el-row>定义行标签 -->
        <el-row>
            <!-- 2.使用<el-col>定义列标签，一行24栏，当前列栈10栏 -->
            <el-col :span="10"><div class="grid-content bg-purple-dark"></div></el-col>
            <!-- 2.使用<el-col>定义列标签，一行24栏，当前列栈10栏 -->
            <el-col :span="10"><div class="grid-content bg-purple-light"></div></el-col>
            <!-- 2.使用<el-col>定义列标签，一行24栏，当前列栈4栏 -->
            <el-col :span="4"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>
    </div>
    <script>
        new Vue({
            el:"#app",
        });
    </script>
</body>
</html>

效果

4.5 Container 布局容器

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

el-container标签中可以包含:el-container、el-header、el-aside、el-main、el-footer五个标签，默认

el-container中的标签会从左向右排列，如果包含el-header或者el-footer,那么从上往下排列

代码

Html

<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue和ElementUI相关样式与JS -->
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
    </style>
</head>
<body style="height: 100%;">
    <div id="app" style="height: 100%;">
        <!--html,body,div高度100%，并且使用*{}去掉默认的padding和margin值-->
        <el-container style="height: 100%;">
            <el-header style="background-color: #B3C0D1;">Header</el-header>
            <el-container >
              <el-aside style="background-color: #D3DCE6;">Aside</el-aside>
              <el-container style="height: 100%;">
                <el-main style="background-color: #E9EEF3;">Main</el-main>
                <el-footer style="background-color:#B3C0D1;">Footer</el-footer>
              </el-container>
            </el-container>
          </el-container>
    </div>
    <script>
        new Vue({
            el:"#app",
        });
    </script>
</body>
</html>

效果

4.6 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

代码

<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue和ElementUI相关样式与JS -->
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
    </style>
</head>
<body style="height: 100%;">
    <div id="app" style="height: 100%;">
        <el-form :model="myForm" :rules="myRules" ref="ruleFormxxx" label-width="100px" class="demo-ruleForm">
            <!-- prop表示检验规则的名字 -->
            <el-form-item label="帐号" prop="usernameRule">
              <el-input v-model="myForm.username"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">立即创建</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                myForm:{
                },
                myRules:{
                    usernameRule:[
                        { required: true, message: '请输入帐号', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                submitForm:function() {
                    this.$refs["ruleFormxxx"].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                    });
                },
                resetForm() {
                    this.$refs["ruleFormxxx"].resetFields();
                }
            }
        });
    </script>
</body>
</html>

各属性对应关系

Vue基本语法与elementUI组件介绍 2

3.5 绑定事件v-on

注意事项

3.6 属性绑定v-bind

3.7 表单绑定v-model

3.8 双向绑定

3.9 小结

4 ElementUI

4.1 学习目标

4.2 介绍

4.3 快速入门

4.4 Layout 布局

4.5 Container 布局容器

4.6 表单

热门文章

最新文章

相关课程

相关电子书

相关实验场景