Vue入门 - 码农教程

一、什么是Vue?

　　官方解读：Vue(读音 /vju:/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为“自底向上逐层应用”。Vue的核心库只关注视图层，易于上手，便于与第三方库或现有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。简单来说，Vue就是一个用于搭建表单项繁多且内容需要根据用户的操作进行修改的网页应用的框架。

渐进：

声明式渲染(Declaralive Rendering)-->组件系统(Component System)-->客户端路由(Client-Side Routing)-->大规模状态管理(Large Scale State Management)-->构建工具(Build System)

二、为什么要使用Vue?

这里用jQuery和Vue来做比较

　　jQuery是使用选择器$选取DOM对象，对其进行赋值、取值、绑定事件等操作，和原生HTML的区别只在于更方便的选取和操作DOM对象，数据和界面还是绑定在一起的。比如获取label标签的内容：$("label").val();它还是依赖DOM元素的值。

　　Vue则是通过Vue对象把数据和界面完全分离开了，对数据进行操作不用再引用对应的DOM元素了，通过Vue对象的vm实现相互的绑定，就是MVVM。

　　Vue的特点：

　　1.易用：Vue它能让团队书写js更加容易并且简化了js，上手容易，源码可读性高。

　　2.灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

　　3.高效：20KBmin+gzip运行大小，超快虚拟DOM，最省心的优化。

框架和库的区别：

　　库是将代码集合成一个产品，供开发者去使用，开发者去调用库中的方法去实现自己的功能。

　　框架是为了解决一类问题而开发出来的产品，基于自身的特点向用户提供一套完整的解决方案。

三、Vue的使用

　　1.引用Vue

　　引用Vue分为两个版本

　　　　开发版本（包含完整的警告和测试模式）

　　　　生产版本（删除了警告，33.30KBmin+gzip）

　　引用方式：

　　　　　我这里使用了CDN的方式，在</head>的上一行加入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

　　　　　其他方式可以在官网进行学习使用

1     <head>
2         <meta charset="utf-8">
3         <title>Vue入门</title>
4         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5     </head>

　　2.添加一个DOM元素作为Vue实例的挂载目标

1     <body>
2         <div id="app">
3             
4         </div>
5     </body>

　　3.创建Vue对象的实例

 1     <body>
 2         <script type="text/javascript">
 3             var vue = new Vue({
 4                 el:'#app',
 5                 data:{
 6                     
 7                 }
 8             })
 9         </script>
10     </body>

现在数据data和DOM（id=“app”的div）已经被建立了关联，所有东西都是响应式的，响应式即是Vue实现的双向数据绑定。

四、Vue插值和表达式绑定数据

　　1.插值，使用{{ }}将数据编译成普通文本，并输出到插值位置。

　　注意：{{ }}绑定可以放置在Vue挂载目标节点内的任意位置，而不需要额外的DOM标签。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Vue_插值</title>
 6         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             {{ msg }}
11         </div>
12         <script type="text/javascript">
13             var vue = new Vue({
14                 el:'#app',
15                 data:{
16                     msg:'Hello Vue!!!'
17                 }
18             })
19         </script>
20     </body>
21 </html>

效果：

插值标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

Vue的数据绑定是数据驱动。即：当数据发生变化时会触发html页面更新，所有相关联绑定的值也会随之一起变化。

　　2.表达式

　　Vue的数据绑定不仅限于简单的属性键值，Vue对所有的绑定，都支持JavaScript表达式绑定。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Vue_插值_表达式</title>
 6         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <!-- 1.绑定函数 -->
11             <p>
12                 {{ msg.toUpperCase() }}
13             </p>
14             <!-- 2.绑定一个计算 -->
15             <p>
16                 {{ 100*100 }}
17                 {{ count*100 }}
18             </p>
19             <!-- 3.绑定三元表达式 -->
20             <p>
21                 {{ count > 0 ? 'Yes':'No' }}
22             </p>
23         </div>
24         <script type="text/javascript">
25             var vue = new Vue({
26                 el:'#app',
27                 data:{
28                     msg :'hello vue!!!',
29                     count :1
30                 }
31             })
32         </script>
33     </body>
34 </html>

效果：

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript被解析。

五、基础指令

原文地址：https://www.cnblogs.com/sqyss/p/11934601.html