欢迎光临
我的个人博客网站

Vue概述

Vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计。Vue的核心库关注于视图(html),不仅易上手,还便于与第三方库或项目整合。

渐进式:一步一步,不是将所有的东西都学完才能使用。

自底向上设计:一种设计程序的过程和方法,就是先编写出基础程序段,然后在逐步扩大规范、补充和升级某些 功能,实际上是一种自底向上构造程序的过程。

 

Vue.js的核心是允许采用简洁式模板语法来声明的将数据渲染进DOM的系统

在使用数据之前需要先进性声明才可以使用

  <!-- 定义Vue要渲染/控制的部分 -->     <div class='app'>         <!-- 使用差值表达式进行渲染 -->         <p> {{message}} </p>      </div>     </body>     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>     // 创建Vue实例     new Vue({         // 指定Vue要渲染/控制的元素         el: '.app',         // 数据         data: {             message: '这是通过插值表达式进行渲染的',         },            })  </script>

常见的开发模式有MVC、MVP、MVVM。

 

使用Vue.js实现输出“Hello World”

步骤:

1、定义用于填充数据的标签

2、引入Vue.js库文件

3、使用Vue语法实现需求

4、将数据填充到“第1步”的标签里面

    <!-- 定义Vue用于填充数据的标签 -->     <div class='app'>         <!-- 使用差值表达式进行渲染 -->         <p> {{message}} </p>      </div>     </body>     <!-- 引入Vus.js文件 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>     // 创建Vue实例     new Vue({         // 元素怪哉的位置,可以是CSS选择器,也可以是DOM元素         el: '.app',         // 模型数据         data: {             message: 'Hello Word',         },            })  </script>

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue概述
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏