前端——Vue基础语法

最新推荐文章于 2024-05-11 08:19:17 发布

独孤小白狐

最新推荐文章于 2024-05-11 08:19:17 发布

阅读量449

点赞数 1

分类专栏：前端文章标签： vue 大前端

本文链接：https://blog.csdn.net/zzzyukun/article/details/119105235

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

Vue介绍

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

Vue的使用

下载和引入vue.js文件。
编写入门程序。视图：负责页面渲染，主要由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生命周期

独孤小白狐

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端——Vue基础语法

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

扫一扫

专栏目录