Vue概述与快速入门

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

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

（2）MVVM模式：MVVM 模式和 MVC 模式一样，主要目的是分离视图（ View ）和模型（ Model), MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

（3）Vue入门案例----输出Hello world

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入门</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}} <!--Vue的插值表达式，把data中定义的数据显示到此处-->
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:'#app', //表示当前vue对象接管了div区域
         data:{
                message:'hello world' //注意不要写分号结尾
         }
      });
   </script>
</html>

（4）插值表达式：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入门</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}} <!--Vue的插值表达式，把data中定义的数据显示到此处-->

         <!-- 三元运算符 -->
         {{ false ? "OK" : "No" }}

         <!-- 数学运算-->
         {{number*3.14}}

         <!--插值表达式不支持
         {{var a = 1;}}
         {{if(a = 10){}}}
         -->
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:'#app', //表示当前vue对象接管了div区域
         data:{
                message:'hello world', //注意不要写分号结尾
            number:100
         }
      });
   </script>
</html>

szhwwjava

发布了10 篇原创文章 · 获赞 11 · 访问量 1824

私信关注

Vue概述与快速入门

猜你喜欢