热搜：编程 Python Microsoft 编程语言 C++

首页> 前端开发 > Vue > 正文

一、vue简介

发布时间：2024-10-25 11:24:53 来源：网络

.

vue官网一、vue基础入门一、声明式渲染 Vue js的核心是一个允许采用简洁的模板语法来声明数据渲染进DOM系统，如下：1

vue官网

一、vue基础入门

一、声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明数据渲染进DOM系统，如下：

 1 <div id="app">
 2   <!-- 渲染 -->
 3   {{ message }}
 4 </div>
 5 
 6 <script type='text/javascript'>
 7 var app = new Vue({
 8   el: '#app',
 9   data: {
10     // 声明变量
11     message: 'Hello Vue!'
12   }
13 })
14 </script>

二、组件化

组件系统是vue的一个重要概念，因为它是一种抽象的允许我们使用小型、独立和通常可复用的“小积木”构建大型应用。几乎任何类型的应用界面都可以抽象为一个组件树。

三、开发模式

开发模式：一个项目开发的方式或者标准，开发模式≠设计模式

1、MVC

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写

一种软件设计典范，用一种业务逻辑（C）、数据（M）、界面显示（V）分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

1、用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。

2、用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。

3、Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。

优点：耦合性低，重用性高，部署快，可维护性高，有利于软件工程化管理

缺点：由于模型model和视图view要严格的分离，给前端程序带来了很大的困难，每次操作需要彻底的测试

2、MVP

MVP是Model-View-Presenter简称，MVP是从经典的模式MVC演变而来

它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示：

1、各部分之间的通信，都是双向的。

2、View 与 Model 不发生联系，都通过 Presenter 传递。可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁。

3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

缺点：由于对视图的渲染放在了Presenter中，所以视图和Presenter的交互会过于频繁。一旦视图需要变更，那么Presenter也需要变更了。

3、MVVM

M：model，普通的javascript数据对象

V：view，前端展示页面

VM：ViewModel，用于双向绑定数据与页面，就是vue的实例

　　MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。这种模式下，页面输入改变数据，数据改变影响页面数据展示与渲染

优点：

1、避免直接操作DOM , 降低DOM操作的复杂性。

2、低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

3、可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

4、可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

四、Hello World

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

 1 <body>
 2     <!-- 1. 定义用于填充数据的标签 -->
 3     <div id="app">{{msg}}</div>
 4 </body>
 5 <!-- 2. 引入vue.js库文件 -->
 6 <script src="./js/vue.js"></script>
 7 <script type="text/javascript">
 8     // 3. 使用vue语法实现需求
 9     var vue = new Vue({
10         // 4. 将vue提供的数据填充到“第1步”中的标签里
11         el: "#app",
12         data: {
13             msg: "Hello World",
14         },
15         methods:{...}
16     });
17 </script>

vue实例分析：vue参数对象属性

1、el：元素挂载的位置，值可以是css选择器或者DOM元素

2、data：数据模型，值是一个对象

3、methods：定义方法，可以在其他地方调用，也可以在指令中使用

4、生命周期函数

5、...

插值表达式：{{msg}}将数据填充到html标签中

五、vue devtools工具

通过chrome中的谷歌插件商店安装Vue Devtools工具，此工具帮助我们进行vue数据调试所用，一定要安装。

Vue工具在谷歌商店的地址

六、模板语法

插值表达式（Mustache）：是vue框架提供的一种在html模板中绑定数据的方式，使用{{变量名}}方式绑定vue实例中data中的数据变量，会绑定的数据实时的在视图中显示出来

插值表达式的写法支持使用：

1、变量名

2、部分简单JavaScript表达式：{{}}括起来的区域，就是js语法区域，在里面可以写部分的js语法，不能写var a = 10；分支语句；循环语句

3、三元运算符

4、方法调用（方法必须要先声明）

 1 <body>
 2     <div id="app">
 3         <!-- 直接使用变量名 -->
 4         <h5>{{name}}</h5>
 5         <!-- 运算 -->
 6         <h5>{{name + '--好的'}}</h5>
 7         <h5>{{ 1 + 1 }}</h5>
 8         <!-- 使用函数 -->
 9         <h5>{{title.substr(0,6)}}</h5>
10         <!-- 三目运算 -->
11         <h5>{{ age > 18 ? '成年' : '未成年'}}</h5>
12     </div>
13 </body>
14 <script src="./js/vue.js"></script>
15 <script>
16     var vm = new Vue({
17         el: "#app",
18         data: {
19             title: "我是一个标题，你们看到没有",
20             name: "张三",
21             age: 20,
22         },
23     });
24 </script>