Vue介绍

  • Vue是一套构建用户界面的渐进式前端框架。

  • 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。

  • 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

  • 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

Vue的使用

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

  2. 编写入门程序。 视图：负责页面渲染，主要由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>快速入门</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 核心对象开始的。

     let vm = new Vue({
  选项列表;
 });

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

  • 数据绑定 在视图部分获取脚本部分的数据。 {{变量名}}

Vue指令

 v-html:解析文本数据，也可以解析标签

v-bind绑定属性以及关于绑定css样式操作

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <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"
        }
    });
</script>
</html>

v-for 既可以遍历容器，也可以遍历对象，使用增强for循环的格式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<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: ["zs", "ls", "zl"],
                student: {
                    name: "zs",
                    age: 56
                }
            }
        })
    </script>

</body>

</html>

v-on:click和@click一样，演示代码如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<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>

</body>

</html>

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

Vue模板&组件

Vue生命周期

 

Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign