Vue快速入门

2020-04-14 本文已影响0人勿念及时雨

MVVM模式

什么是MVVM模式？

MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上运行的 WPF）的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表。MVVM 已经非常成熟了，当下流行的 MVVM 框架有 Vue.js ， AngularJS 等。
MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定。
向下与Model层通过接口请求进行数据交互。

MVVM模式示意图

为什么要使用MVVM？

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），它有几大好处：

低耦合：视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可复用：你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发。（ViewModel），设计人员可以专注于页面设计。
可测试：界面素来是难以测试的，而现在测试可以针对 ViewModel 来写。

所有的架构本质上都是为了解耦。、

MVVM的组成部分

MVVM架构如下图所示。

MVVM架构图
View
View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf 等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。
Model
Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。
ViewModel
ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。
需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的。

页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）。
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）。

视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。
由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。
MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与Model 层交互，这就完全解耦了 View 层和 Model 层。这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

第一个Vue程序

什么是Vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

测试第一个程序

1、编写视图层，这里使用了Vue的插值表达式{{data中的变量}}。

<div id="app">
  {{message}}
</div>

2、编写Vue对象，需要先导入vue.js。

<script src="../lib/vue.js"></script>
<script>
    //ViewModel Vue对象
    var vm=new Vue({
        //1、绑定前端页面,和jquery绑定一样
        el:'#app',
        //2、连接后台数据
        data:{
            //未来这里的数据是从后台获取的
            message:'hello vue!'
        }
    })
</script>

3、给data中的变量message提供数据。

message:'hello vue!'

Vue的基本指令

在创建Vue示例时，我们可以使用console.log在浏览器控制台打印一下Vue实例对象，查看打印的信息，可以看到Vue实例对象中有些函数带$，有些函数不带$。带$ 的是Vue实例对象自带的函数，不带$的是我们自己定义的函数。
一个完整的前端项目应该包含以下部分：

视图 v-bind(HTML+JS)
事件 v-on(JS)
判断 v-if
循环 v-for
双向绑定 v-model（表单中的常用标签都可以进行绑定）
通信（Vue是专注于视图层的框架，没有通信功能，官方推荐使用axios）

v-bind

Vue的基本指令一般形式为：v-xxx，和Thymeleaf的th:xxx类似。
v-bind 用于绑定数据和元素属性。由于v-bind经常使用，因此可以简写为:。示例代码如下：

<!--v-xxx vue的指令-->
<!--v-bind:title  类似于 th:title-->
<div id="app" >
    <!--通过v-bind绑定vm中的data数据-->
    <p v-bind:title="message">这是标题</p>
    <!--由于v-bind常常使用，可以简写为:-->
    <p :title='message'>这是标题</p>
</div>

<script src="../lib/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'时间：'+new Date().toLocaleString()
        }
    })
</script>

v-if

v-if 用于条件判断，当判断为真，会对条件块进行渲染，否则不渲染。示例代码如下：

<div id="app" >
    <!--如果返回true则显示这个标签，否则隐藏-->
    <h2 v-if="type==='A'">type=A</h2>
    <h2 v-else-if="type==='B'">type=B</h2>
    <h2 v-else-if="type==='C'">type=C</h2>
    <h2 v-else>type=other</h2>
 
</div>
<script src="../lib/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            type:'A'
        }
    })
</script>

v-for

v-for 用于循环或遍历对象。示例代码如下：

<!--vue是一个专注于视图层的框架，相当于一个模板，自动套数据就好了-->
<!--在html中的固定模板-->
<div id="app" >
    <!--遍历items,每一个节点为item-->
    <li v-for="item in items">
        {{item.message}}    
    </li>
</div>
<script src="../lib/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            //mock数据
            items:[
                {message:'hello vue'},
                {message:'hello wunian'}
            ]
        }
    })
</script>

v-on

v-on 用于事件监听。和v-bind一样也被经常使用，因此可以简写为@。示例代码如下：

<div id="app" >
    <!--v-on也是经常使用的，可以简写为@-->
    <button v-on:click="sayHello">点我</button>
    <button @click="sayHello">点我</button>
</div>
<script src="../lib/vue.js"></script>
<script>
    //获取当前对象，在vm中直接使用this即可
    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello v-on'
        },
        //所有的方法都放在这里，放在vm中的方法可以通过v-on指定进行调用
        methods:{
            sayHello:function(){
                alert(this.message)
            }
        }
    })
</script>

v-model

v-model 用于表单数据的双向绑定。当数据变化时绑定的表单的值也会变化，同样当表单的值变化时绑定的数据也会变化。示例代码如下：

<div id="app" >
    <!--v-bind 绑定data中的值，只能显示data中的值-->
   <input type="text"   :value="searchMap.keyword">
   <!--v-model 双向绑定，可以显示data中的值，但是值改变了，data也会变
        一般用在表单中
    -->
   <input type="text" v-model="searchMap.keyword">
</div>
<script src="../lib/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            searchMap:{
                keyword:'wunian'
            }
        }
    })
</script>

Vue的生命周期

下图展示了实例的生命周期。随着我们的不断学习和使用，它的参考价值会越来越高。

Vue的生命周期

关注两个最常用的钩子函数：

created：Vue实例创建后调用，在模板渲染成html前调用。通常用于初始化某些属性值，然后再渲染成视图。例如可以在created函数中调用ajax获取页初始化所需的数据。
mounted：el被新创建的 vm.$el替换，并挂载到实例上去之后调用，在模板渲染成html后调用。通常用于初始化页面完成后，再对html的dom节点进行一些需要的操作。

axios

axios是一个易用、简洁且高效的http库，用于通信。例如在页面加载完成后访问后端请求获取数据，示例代码如下：

<!--使用axios--> 
<script src="../lib/axios.js"></script> 
<script> 
  var vm=new Vue({
        el:'#app',
        data(){
            //编写对象格式，是空的，可以把它看成一个模型
            return{
                info:{
                    name:null,
                    address:{
                        street:null,
                        country:null
                    },
                    url:null
                }
            }
        },
        // 获取后端或者mock数据！ 
        mounted(){ // 在页面加载完成之前执行！ 跨域问题！一般都在后端解决，解决响应头信息！ 
          axios
            .get('localhost:8080/getUser') 
            .then(response=>(this.info = response.data)); 
            // response 就是请求响应回来的数据
    } 
</script>

组件

组件，其实就是自定义标签，其内容定义在template中。示例代码如下：

<div id="app" >
    <!-- 组件：自定义标签，内容就是template-->
   <component-li v-for="item in items" v-bind:comitem="item">

   </component-li>
</div>
<script src="../lib/vue.js"></script>
<script>
   //先注册一个组件
   Vue.component('component-li',{
       props:['comitem'],
       template:"<li>Hello li</li>"
   })
    var vm=new Vue({
        el:'#app',
        data:{
            items:['1.xxx','2.xxxx','3.xxx']
        }
    })
</script>

组件的注册和使用

路由

在Vue中使用Vue-router来创建路由，页面路由实际上就是一个个a链接。其原理和使用场景如下图所示。

vue-router的原理示意图

使用vue-router之前需要先安装。

npm install vue-router

示例代码如下：

<div id="app" >
   <!--页面 路由就是a链接-->
   <router-link to="/">首页</router-link>
   <router-link to="/student">学员</router-link>
   <router-link to="/teacher">老师</router-link>
    <!--页面视图渲染-->
   <<router-view></router-view>

</div>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script>
   
   //1、定义路由组件
   const Welcome={template:'<div>欢迎</div>'}
   const Student={template:'<div>Student</div>'}
   const Teacher={template:'<div>Teacher</div>'}   

   //2、定义路由（核心）
   const routes=[
       //请求这个路由会跳转到对应的视图中
       {path:'/',redirect: "/welcome"}, //重定向到请求
       {path:'/welcome',component: Welcome},//组件直接对应上面定义的组件即可
       {path:'/student',component: Student},
       {path:'/teacher',component: Teacher},
   ]

   //3、创建router实例
   const router=new VueRouter({
       //routes:routes（如果同名的话可以缩写）
       routes
   })

    var vm=new Vue({
        el:'#app',
        router
    })
</script>

vue-cli

vue-cli是官方的脚手架工具，以后我们的项目都使用vue-cli来创建。
全局安装vue-cli工具。

npm install vue-cli -g

安装完成后，使用如下命令进行检测。

vue list

如果输出了如下图所示信息说明vue-cli安装成功。

检测vue-cli是否安装成功

创建项目后可以使用如下命令进行初始化。

vue init webpack 项目名

Vue快速入门

MVVM模式

第一个Vue程序

Vue的基本指令

组件

路由

vue-cli

猜你喜欢

热点阅读