Vue（vue.js）框架介绍及简单应用

2019-08-03 本文已影响88人木丿灬易

1.前端框架介绍
老牌

jquery -> 更简单的方式去操作 dom 对象（标签对象）
extjs -> 更适合做后台管理系统
easyui -> 模仿了 extjs 免费
新式

vue 国内开源的js框架
argularjs 国外js框架
他们都提倡前后台分离，下面是对前后台分离的解释：

传统的后台开发人员，需要做一下步骤：
controller -> jsp， service， dao -> 页面展示部分，需要用jsp等技术负责数据展示

前后台分离之后，后台开发人员，需要做一下步骤：
service, dao -> 负责准备模型数据即可

前台开发人员，负责页面之间的跳转、从后台获取模型数据，展示数据

2.VUE
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架，它只关注视图层，采用自底向上增量开发的设计，它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
简单来说其实就是：
vue是一套构建用户界面的框架。在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。简单说就是对于vue中你不熟悉不太把握的模块或者功能，你可以不用它，或者你可以用你熟悉有把握的技术进行代替。这样子看来是不是感觉很友好，相对于其他框架硬要求很少了，你可以逐渐性的使用框架。
3.使用

引入vue.js，可以去网上下载，也可以把内容复制到本地的js文件中

<!-- 引入 vue.js -->
<script src="vue.js"></script>

创建Vue对象

var vue = new Vue({
    el: 视图对应的标签
    data: 模型数据
    methods:{
        方法1：function(){},
        方法2：funciton(){},
        ...
    }
});

展示模型数据

两标签之间的普通文字，要从模型中获取数据，语法使用 {{模型数据的名称}}
标签的属性需要从模型中获取值：v-bind:属性名 (v-bind 绑定指令)，也可以被简化为 :属性名

例子如下，绑定图片属性，获得图片地址：

<!-- 视图 -->
<div id="app">
    <!-- 给文本赋值 用  {{模型变量名}}-->
    <h1>姓名：{{name}}, 年龄: {{age}}, 图片 {{photo}}</h1>

    <!--  给属性赋值需要用 v-bind 指令 -->
    <img v-bind:src="photo">
</div>
<script>
// el -> element
var vue = new Vue({
    el: '#app', /*vue 对象对应的视图是id为app的标签*/
    data: { /*data 中包含的是模型数据*/
        name:'zhangsan',
        age: 18,
        photo: '2_1.bmp'
    }
});
</script>

vue的一些常用指令

v-for 用来遍历一个集合

v-for="(临时变量名,下标变量) in 集合名" 其中下标变量从0开始

v-if

用来进行条件判断，当条件成立，才会渲染视图，如果条件不成立，不会生成html代码

例子如下，因为hasError后面是false，所以不会输出用户名不正确这一行字：

<div id="app">
    <h3 v-if="hasError">用户名不正确</h3>
</div>

<script>
var vue = new Vue({
    el:"#app",
    data:{
        hasError:false /*没有错误*/
    }
});
</script>

v-show

用来进行条件判断，当条件成立（true），把此标签显示出来，如果条件不成立（false），会把此标签隐藏起来

如：v-show="hasError" ， hasError:false，所以会把此标签隐藏起来

注：这和 v-if 虽然都是可以判断之后让某些东西不显现，但是它们两个还是有不同之处，v-if 只要不满足条件就不会生成 html 代码，而 v-show 则是生成了 html 代码，只是隐藏了而已。

事件处理

传统方式处理事件，事件名称="函数()" ，如以下

<input type="button" onclick="函数()">

vue 来处理事件格式：v-on:事件名称 ="方法名"，也可以被简化为 @事件名称 ="方法名"，事件名称前不需要再加on了，加v-on，如以下

<input type="button" v-on:click="方法名">
<input type="button" v-on:mouseout="方法名">

如果方法有参数的话就在方法名后面加上括号里面写上参数，如 <input type="button" v-on:click="方法名(12)">，没有参数就直接写方法名

双向绑定 v-model
v-bind 模型数据发生了改变，视图也会重新渲染，模型会影响视图，而反之不行
v-model, 不仅是数据改变影响视图，而且视图改变也会影响数据，尤其配合表单使用
代码演示
1、v-bind和语法使用 {{模型数据的名称}}的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 vue.js -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 视图 -->
    <div id="app">
        <!-- 给文本赋值 用  {{模型变量名}}-->
        <h1>姓名：{{name}}, 年龄: {{age}}, 图片 {{photo}}</h1>

        <!--  给属性赋值需要用 v-bind 指令 -->
        <img v-bind:src="photo">
        <img :src="photo">
    </div>

    {{name}}


    <script>
    // el -> element
    var vue = new Vue({
        el: '#app', /*vue 对象对应的视图是id为app的标签*/
        data: { /*data 中包含的是模型数据*/
            name:'zhangsan',
            age: 18,
            photo: '2_1.bmp'
        }
    });
    </script>
</body>
</html>

Vue（vue.js）框架介绍及简单应用

猜你喜欢

热点阅读

Vue（vue.js） 框架 介绍及简单应用

猜你喜欢

热点阅读

Vue（vue.js）框架介绍及简单应用