VueJS 概述与快速入门

最新推荐文章于 2022-11-26 21:32:18 发布

少营营

最新推荐文章于 2022-11-26 21:32:18 发布

阅读量663

点赞数

分类专栏： vue 文章标签： vue vue入门插值表达式

本文链接：https://blog.csdn.net/weixin_35674711/article/details/95509979

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

官网:https://cn.vuejs.org/

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

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

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

1，VueJS 快速入门

创建工程：

web工程

输入：

Name：archetypeCatalog

Value：internal

防止web项目加载过慢。

导入js

demo1.html

【需求】：使用vue，对message赋值，并把值显示到页面{{}}中。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入门</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <!--定义id=app的目的是：app定义的div标签中可以使用vue-->
      <div id="app">
         {{100+100+message}}<br>
         {{message>10?"ok":"不ok"}}<br>
         {{message1}}
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",// 表示当前vue对象接管了div区域
         data:{
            message:10, //model
            message1:"helloworld" //model
         }
      });
   </script>
</html>

data ：用于定义属性，实例中有2个属性分别为：message和message1。数据类型定义数字、字符串、json。

methods：用于定义的函数，可以通过 return 来返回函数值。

2. 插值表达式（{{message}}）

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对

象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

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

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

表达式，所以下面的例子都不会生效。

{{ if (ok) { return message } }}

少营营

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VueJS 概述与快速入门

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。官网:https://cn.vuejs.org/  <script src="https://cdn...
复制链接

扫一扫