Vue.js 入门学习笔记（一）

皮皮伍同学

于 2022-02-16 19:20:58 发布

阅读量403

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/CYW2014_HUST/article/details/122970261

版权

Vue.js 入门学习笔记（一）

最近做项目，采用的是SpringBoot+ Thymeleaf模板引擎来做。因为开发页面时还是用基本的HTML+CSS+JS，做出来的前端页面不好看，感觉太耗时间，效果又不好，所以在老师的指导下，开始学习Vue.js、Sass和element-ui等知识。

Vue

一、Vue.js 简介

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue 的运行环境有两套：

开发环境下，Vue会提供很多警告来帮开发者对付常见的错误与陷阱。
生产环境下，这些警告语句没有用，反而会增加应用的体积。

Vue 具有以下特点：

易用

在有 HTML、CSS和 JavaScript 的基础上，可以快速上手；

Vue.js 的 API 对于其他框架的参考不仅是参考，其中也包含了许多Vue.js的独特功能。
灵活

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能

20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

二、Vue.js 安装

Vue.js 安装有三种方式：

本地下载，直接到Vue.js官网上下载，开发时用<script>引入
CDN 方法
NPM 方法

个人觉得还是本地下载最可靠。因为是刚刚入门学习，本地下载使用就OK了。

三、基本语法

1、Vue.js起步

每个 Vue 应用都需要通过实例化 Vue 来实现，语法格式如下：

var vm = new Vue({
    //选项
})

基本选项有如下：

el：用于绑定HTML中某个元素
data：用于存放应用中的数据，相当于Java中的属性的集合。存放数据的方式是键值对。
methods：用于存放应用中的自定义函数

下面来看一下第一个 Vue 应用的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue应用</title>
</head>
<body>

<div id="bilibili">
    <h1>site: {{site}}</h1>
    <h1>url: {{url}}</h1>
    <h1>{{say()}}</h1>
</div>

<!-- 加载本地下载好的Vue.js 文件 -->
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#bilibili",
        data: {
            site: "哔哩哔哩",
            url: "https://www.bilibili.com/"
        },
        methods: {
            say: function (){
                return this.site + "~~~干杯！！！";
            }
        }
    })
</script>
</body>
</html>

分析一下代码：

el选项 使得新建的 Vue 应用绑定了 THML 中 id为 “bilibili” 的元素。该元素与应用绑定后就可以调用后者中的 data 和 methods 了。
data选项 以键值对的方式存储数据，并且键值对是可以嵌套使用的。元素调用我们Vue 应用中data的数据时使用{{site}}的方式。
methods 里面可以定义很多个函数，元素调用应用中的函数同样用{{say()}}的方式。

代码效果图如下：

2、模板语法

文本插值

数据绑定最常见的形式就是使用{{}}（双大括号）的文本插值：

<div id="bilibili">
    <h1>
        site: {{site}}
    </h1>
</div>

除了可以插入文本，还可以直接插入HTML代码

THML代码插值

使用HTML代码插值时需要用到 v-html 指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html指令</title>
</head>
<body>

<div id="bilibili">
    <div v-html="site"></div>
</div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#bilibili",
        data: {
            site: '<h1>site: 哔哩哔哩</h1>'
        }
    })
</script>
</body>
</html>

属性

前面讲了HTML元素的内容（innerText 和 innerHTML）与Vue应用的绑定，接下来要了解HTML元素的属性与Vue应用的绑定。

通过使用 v-bind 指令 可以实现 Vue 应用才操控HTML 元素的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>

    <style>
        .site{
            color: red;
        }
    </style>
</head>
<body>

<div id="bilibili">
    <div v-html="site" v-bind:class="{'site': use}">

    </div>
</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#bilibili",
        data: {
            site: '<h1> site: 哔哩哔哩</h1>',
            use: true
        }
    })
</script>
</body>
</html>

以上代码通过 v-bind 指令绑定了 HTML元素的 class属性，如果use的值的true，则class属性为’site’，即使用".site"的CSS样式，如果为false，则不使用该样式。

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表达式</title>
</head>
<body>
    <div id="hust">
        {{5+5}} <br/>
        {{ok?'YES':'No'}}<br/>
        {{message.split('').reverse().join('')}}
    </div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#hust",
        data: {
            ok: true,
            message: 'HUST'
        }
    })
</script>
</body>
</html>

指令

指令是指带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用于 DOM 上。

参数

参数在指令后以冒号指明。前面的v-bind:class

用户输入

用 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model双向数据绑定</title>
</head>
<body>

<div id="login">
    <span>用户名: </span>
    <input v-model="username">
    <p>{{username}}</p>
</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#login",
        data: {
            username: "root"
        }
    })
</script>
</body>
</html>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮监听事件

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击后对字符串进行反转操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮事件监听</title>
</head>
<body>
<div id="hust">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">点我反转字符串</button>
</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#hust",
        data: {
            message: 'HUST'
        },
        methods: {
            reverseMessage: function (){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

关于指令缩写

Vue.js为两个最常用的指令提供了特别的缩写：

<!-- 完整 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @cilck="doSomething"></a>

3、条件语句

条件语句用到三个指令：

v-if
v-else-if
v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件语句</title>
</head>
<body>
    <div id="score">
        <div v-if="score>=90">
            恭喜你，你微积分考得很好！！！
        </div>
        <div v-else-if="score>=60">
            恭喜，你微积分及格了！！！
        </div>
        <div v-else>
            不好意思，你微积分不合格，请及时办理退学手续！！！
        </div>
    </div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#score",
        data: {
            score: 55
        }
    })
</script>
</body>
</html>

4、for循环语句

Vue 的循环语句使用 v-for 指令。

v-for 指令需要以 **site in sites **形式的特殊语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环语句</title>
</head>
<body>
<div id="lessons">
    <ul>
        <li v-for="lesson in lessons">
            {{lesson.name}}
        </li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#lessons",
        data:{
            lessons: [
                {name: 'Java'},
                {name: 'Python'},
                {name: 'C++'}
            ]
        }
    })
</script>
</body>
</html>

5、计算属性

计算属性关键字 computed

计算属性在处理一些复杂逻辑时是很有用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="hust">
    <p>原始字符串：{{message}}</p>
    <p>计算后反转字符串：{{reverseMessage}}</p>
</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#hust",
        data: {
            message: 'HUST'
        },
        computed: {
            // 计算属性的 getter
            reverseMessage: function (){
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>
</body>
</html>

在效果上，其实computed 和 methods 是一样的。不过 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而methods，在刷新页面重新渲染的时候，函数总会重新调用执行。

6、监听属性

我们可以通过 Vue.js 监听属性 watch 来响应数据的变化。

以下示例进行千米和米之间的换算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听事件</title>
</head>
<body>
    <div id="compute">
        千米：<input type="text" v-model = "kilometers">
        米：<input type="text" v-model = "meters">
    </div>
<p id="info"></p>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#compute",
        data: {
            kilometers: 0,
            meters: 0
        },
        methods: {

        },
        computed: {

        },
        watch: {
            kilometers: function (val) {
                this.kilometers = val;
                this.meters = this.kilometers * 1000;
            },
            meters: function (val){
                this.meters = val;
                this.kilometers = val/1000;
            }
        }
    });
    
</script>
</body>
</html>

皮皮伍同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 入门学习笔记（一）

Vue.js 入门学习笔记（一）最近做项目，采用的是SpringBoot+ Thymeleaf模板引擎来做。因为开发页面时还是用基本的HTML+CSS+JS，做出来的前端页面不好看，感觉太耗时间，效果又不好，所以在老师的指导下，开始学习Vue.js、Sass和element-ui等知识。一、Vue.js 简介Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既
复制链接

扫一扫