阅读 45

初步了解Vue

Vue官网地址

1. 网站交互及开发方式

1.1.经典的多页面

例如:京东商城、唯品会

  • 前后端糅合在一起,开发维护效率低下
  • 用户体验一般,点击刷新跳转,等待时间过长
  • 每个页面都需要重新加载渲染,速度慢
  • 有利于SEO搜索引擎搜索((Search Engine Optimization):汉译为搜索引擎优化。)

1.2单页面应用程序(SPA)

例如:网易云音乐 单页面应用程序的最主要目的是为了让你的前后端开发能够分离,用户体验反而是其次的

  • 开发方式好,前后端分离,开发效率高,可维护性好(服务端不关心页面只关心数据、客户端不关心数据操作,只关心通过接口拿数据和服务端交互,处理页面)
  • 用户体验好,就像一个原生的客户端软件一样使用
  • 只需要加载渲染局部视图即可,不需要整页刷新
  • 单页面应用开发技术复杂,所以诞生了一堆开发框架(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,双向绑定是怎么达到的呢?

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

从view这边看,DOM Listeners 可以监听DOM元素的变化,一旦有变化,就更新Model。

从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!

双向绑定举例:

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}}