初步了解Vue

时间  2019-11-07
标签 初步 了解 vue 繁體版
原文   原文链接

Vue官网地址javascript

1. 网站交互及开发方式

1.1.经典的多页面

例如：京东商城、惟品会php

  • 先后端糅合在一块儿，开发维护效率低下
  • 用户体验通常，点击刷新跳转，等待时间过长
  • 每一个页面都须要从新加载渲染，速度慢
  • 有利于SEO搜索引擎搜索（（Search Engine Optimization）：汉译为搜索引擎优化。）

1.2单页面应用程序（SPA）

例如：网易云音乐 单页面应用程序的最主要目的是为了让你的先后端开发可以分离，用户体验反而是其次的html

  • 开发方式好，先后端分离，开发效率高，可维护性好（服务端不关心页面只关心数据、客户端不关心数据操做，只关心经过接口拿数据和服务端交互，处理页面）
  • 用户体验好，就像一个原生的客户端软件同样使用
  • 只须要加载渲染局部视图便可，不须要整页刷新
  • 单页面应用开发技术复杂，因此诞生了一堆开发框架（Angularjs\Rrectjs、VueJS）
  • 单页面技术已经很成熟了，可是都没法兼顾低版本浏览器
  • 可是如今除了一些电商网站，其实已经不多有系统须要去兼容低版本浏览器
  • 大部分都是IE9以上
  • 单页面因为数据都是异步加载过来的，因此不会被搜索引擎搜索到，不利于SEO
  • 手机Web网页
  • 管理系统

1.3 多页面：以服务端为主导，先后端混合

  • PHP案例，.php 文件

1.4 单页面：先后端分离，各司其职

  • 服务端只处理数据
  • 前端只处理页面（二者经过接口来交互）

1.5 模拟先后端分离开发模式

  • 项目立项
  • 需求分析
  • 服务端的工做
    • 需求分析
    • 设计数据库
    • 接口设计（有时候也须要前端参与其中）
    • 接口（处理页面）开发
  • 前端的工做
    • 需求分析
    • 写页面
    • 页面写好写功能
    • 经过接口和服务端进行交互
  • 先后端分离：多页
  • 先后端分离：单页

什么是Vue.js

  • Vue.js目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还能够开发手机App，Vue语法也是能够用于进行手机App开发的，须要借助于Weex）
  • Vue.js是前端的主流框架之一，和Angular.js、React.js一块儿，并称为前端三大主流框架
  • Vue.js是一套构建用户界面的——渐进式框架，只关注视图层，它不只易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，能够整合起来作大型项目的开发）
  • 前端的主要工做？主要负责MVC（Model View Controller 是模型(model)－视图(view)－控制器(controller)的缩写） 中的V这一层； 主要工做就是和界面打交道，来制做前端页面效果；

提升开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js/Vue.js （可以帮助咱们减小没必要要的DOM操做；提升渲染效率；双向数据绑定的概念【经过框架提供的指令，咱们前端程序员只需关心数据的业务逻辑，再也不关心DOM是如何渲染的了】）

在Vue中，一个核心的概念，就是让用再也不操做DOM元素，解放用户的双手， 让程序员能够更多的时间去关注业务逻辑；

和JQ彻底操做dom不一样，他是经过一些特殊的html语法，将dom和数据绑定，建立了这种绑定，DOM和数据保持同步，一更新数据，dom自动更新。

JQ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype以后又一个优秀的JavaScript代码库（或JavaScript框架）。
DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。前端

框架和库的区别

  • 框架：是一套完整的解决方案；对项目的侵入性较大，项目若是须要更换框架，则须要从新架构整个项目。
  • 库（插件）：提供某一个小功能，对项目的侵入性小，若是某个库没法完成某些需求，能够很容易切换到其余库实现需求

Node（后端）中的MVC与前端中的MVVM之间的区别

  • MVC是后端的分层开发概念；
  • MVVM是前端视图层的概念；

Vue.js基本代码和MVVM之间的对应关系

  • vue.js是javascript MVVM库（model-view-ViewModel）
  • ViewModel是vue.js核心，它是一个vue实例。vue实例做用在某个html元素上，能够是body，也能够是某个指定id的元素。

vue.js能够实现双向绑定。双向绑定是什么呢？两个‘向’分别是UI界面和js里的vue实例的data属性，改变其中的一个，另外一个也随着改变。好比，data里有一个user对象，user对象有个name属性。ui是一个input框。若是咱们给name属性赋了一个新值，input框里会自动显示新的名字。相应的，若是咱们在Input框里输入了一个新名字，user对象的Name属性值也会变成Input框里的内容。

那么建立了一个ViewModel，双向绑定是怎么达到的呢？vue

如图ViewModel里有DOM Listeners 和Data Bindings ,可看做是两个工具。实现双向绑定的利器。

从view这边看，DOM Listeners 能够监听DOM元素的变化，一旦有变化，就更新Model。java

从Model这边看， 当咱们更新了Model后，DOM Bindings就会帮咱们更新Dom元素。程序员

下面示范了一个简单的（注意注释）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--view层
{{}}表示文本插值，运行{{message}}会被数据对象的message属性替换。
  -->
<div id="app">
{{message}}
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */
var exampleData ={
message: 'hello World!'
}
/*     ViewModel层,链接view和model层
    vue实例须要传入一个选项对象
&emsp;&emsp;    选项对象包括挂载对象，数据，方法，模生命周期钩子（？）
    el属性指向view,表示把vue实例绑定某个dom元素
 */
new Vue({
  el:'#app',
  data:exampleData
})
</script>
</html>
复制代码

效果示例： hello World!ajax

双向绑定举例：

view层改为这样，其余不变。数据库

<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message" />
</div>
复制代码

效果示例：编程

{{message}}

下面举例子示范一下，双向绑定在表单不一样元素效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
<body>
<!--view层  -->
<div id="app">
   <table>
            <tbody>
                <tr> 
                   <td>单个复选框举例,单行文本和多行文件框相似。</td>
                   <td><input type="checkbox" v-model="message" >
                   </td>
                   <td>{{message}}</td>
                </tr>
                 <tr >
                 <td>多个复选框举例</td>
                 <td>
                 <label for="小鱼">小鱼</label>
                 <input type="checkbox" value="小鱼" v-model="checked">
                  <label for="小花"> 小花</label>
                  <input type="checkbox" value="小花" v-model="checked">
                  <label for="小草">小草</label>
                  <input type="checkbox" value="小草" v-model="checked">
                 </td>
                 <td>{{checked}}</td>
                 </tr>
                  
                   <tr >
                 <td>单选按钮举例</td>
                 <td>
                  <label for="小鱼">小鱼</label>
                  <input type="radio" value="小鱼" v-model="radio">
                  <label for="小花">小花 </label>
                  <input type="radio" value="小花" v-model="radio">
                  
                 </td>
                 <td>{{radio}}</td>
                 </tr>
                  <tr >
                 <td>单选选择框举例</td>
                 <td>
                     <select v-model="select" >
                       <option disabled="disabled" value="">---请选择--</option>
                       <option value="小花">小花</option>
                       <option value="小草">小草</option>
                       <option value="小鱼">小鱼</option>
                     </select>
                 </td>
                 <td>{{select}}</td>
                 </tr>
                 <tr >
                 <td>多选选择框举例</td>
                 <td>
                            经过Ctrl或shift进行多选
                     <select v-model="multiple_select" multiple="multiple">
                       <option disabled="disabled" value="">---请选择--</option>
                       <option value="小花">小花</option>
                       <option value="小草">小草</option>
                       <option value="小鱼">小鱼</option>
                     </select>
                 </td>
                 <td>{{multiple_select}}</td>
                 </tr>
                 <tr> 
                   <td>修改默认值的单个复选框举例</td>
                   <td><input type="checkbox" true-value="yes" false-value="no" v-model="toggle" >
                   </td>
                   <td>{{toggle}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */
var exampleData ={
message: '',
checked:[],
radio:'',
select:'',
multiple_select:[],
toggle:''
}
/*     ViewModel层,链接view和model层
    vue实例须要传入一个选项对象
&emsp;&emsp;    选项对象包括挂载对象，数据，方法，模生命周期钩子（？）
    el属性指向view,表示把vue实例绑定某个dom元素
 */
new Vue({
  el:'#app',
  data:exampleData
})
</script>
</html>
复制代码

效果示例：

单个复选框举例,单行文本和多行文件框相似。 {{message}}
多个复选框举例 {{checked}}
单选按钮举例 {{radio}}
单选选择框举例 {{select}}
多选选择框举例 经过Ctrl或shift进行多选 {{multiple_select}}
修改默认值的单个复选框举例 {{toggle}}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程