Vue.js视频教程分享，入门实践

2020-12-22 16:07:42
819次星辉

一个构建数据驱动的web界面的渐进式其框架，Vue.js的目标提供尽可能简单的API就可以满足我们的日常开发，官网：https://cn.vuejs.org/。学习此框架需要有HTML、CSS和JavaScript的一些基础。

vue.js视频教程分享

1.2 MVVM模式

MVVM是Modle-View-ViewModel的简写，是MVC的改进版。MVVM就是将其中View的状态和行为抽象化，让我们将视图（html和dom元素）和业务逻辑分开，分开后我们直接曹组模型数据就等同于html的dom元素。

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。

Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库，专注于View层。它的核心是MVVM中的VM，也就是ViewModle。ViewModel负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

1.3 VueJS快速入门

首先需要在官网上下载一个vuejs的文件，这个自己操作一下，接着创建一个html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src = "js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script>
    new Vue({
        el:'#app', //表示当前vue对象接管了div区域
        data:{
            message:'hello vue' //注意不要写分号结尾
        }
    });
</script>

在浏览器中打开

Vue.js视频教程分享

1.4插值表达式

数据绑定最常见的形式就是使用"Mustache"语法（双大括号）的文本插值，Mustache标签会被替代为对应数据对象上的属性的值。当绑定对象上属性发生变化是，插值处的内容都会更新。

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

{{ number + 1}}
{{ true ? 'YES' : 'NO'}}

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制是每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

1 <!-- 这是语句，不是表达式 -->
2 {{ var a = 1}}
3 <!-- 流控制也不会生效，请使用三元表达式 -->
4 {{ if (ok) { return message } }}

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>vue插值表达式</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!--Vue的插值表达式，把data中定义的数据显示到此处-->
    {{message}}<br>
    <!-- 三元运算符 -->
    {{ true ? "OK" : "No" }}<br>
    <!-- 数学运算-->
    {{number*3.14}}<br>
</div>
</body>
<script>
    // 创建Vue对象
    new Vue({
        el: "#app",// 由vue接管id为app区域
        data: {
            message: "Hello Vue!",//注意：此处不要加分号
            number: 100
        }
    });
</script>
</html>

Vue.js视频教程分享

星辉推出的Vue js视频教程全套免费下载,这是一套超级详细的Vue js项目视频教程,本套Vue js实战视频适合Vue js零基础学员学习,这套视频教程通俗易懂,是你学习Vue js的好帮手。

课程目标：通过本课程的学习，让大家掌握Vue.js及在项目中的使用。

适用人群：具有一定web开发基础的开发人员。

课程概述：Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。本课程将一步一步地让大家快速地掌握Vue.js这样一个前端核心框架，以适应公司的开发需要。

以上就是对“Vue.js视频教程分享，入门实践”的介绍，希望对大家有所帮助，还想学习更多关于Java的课程，可以关注星辉官网Java视频教程，免费下载学习。

上一篇：源码分析顺序栈下一篇：Servlet视频下载，经典实战教程