Vue入门

时间 2019-11-26

标签 vue 入门繁體版

原文原文链接

1、什么是Vue?javascript

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

渐进：vue

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

2、为何要使用Vue?npm

这里用jQuery和Vue来作比较app

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

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

　　Vue的特色：函数

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

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

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

框架和库的区别：

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

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

3、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实现的双向数据绑定。

4、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被解析。

5、基础指令

1. Vue入坑——vue-router（vue路由）入门
2. Vue入门篇
3. Vue入门
4. vue入门
5. VUE入门
6. vue入门（一）
7. vue入门一
8. Vue 入门
9. 入门VUE
10. Vue CLi3入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用