vue.js是基于javascript吗？

vue.js是一套用于构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue官网介绍

vue是渐进式JavaScript框架

“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念

Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，并且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用

特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

Vue是一个MVVM的js框架，但是，Vue%20的核心库只关注视图层，开发者关注的只是m-v的映射关系

Vue.js%20的目标是通过尽可能简单的%20API%20实现响应的数据绑定和组合的视图组件。

使用

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

<script%20src="vue.js"></script>

2、创建Vue对象

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

3、展示模型数据

两标签之间的普通文字，要从模型中获取数据，语法使用%20{{模型数据的名称}}

标签的属性需要从模型中获取值：v-bind:属性名%20(v-bind%20绑定指令)，也可以被简化为%20:属性名

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

<div%20id="app"> %20%20%20%20 %20%20%20%20<h1>姓名：{{name}},%20年龄:%20{{age}},%20图片%20{{photo}}</h1> %20%20%20%20 %20%20%20%20<img%20v-bind:src="photo"> </div> <script> //%20el%20->%20element var%20vue%20=%20new%20Vue({ %20%20%20%20el:%20'#app',%20/*vue%20对象对应的视图是id为app的标签*/ %20%20%20%20data:%20{%20/*data%20中包含的是模型数据*/ %20%20%20%20%20%20%20%20name:'zhangsan', %20%20%20%20%20%20%20%20age:%2018, %20%20%20%20%20%20%20%20photo:%20'2_1.bmp' } }); </script>

vue的一些常用指令

1、v-for 用来遍历一个集合

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

2、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>

3、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, 不仅是数据改变影响视图，而且视图改变也会影响数据，尤其配合表单使用

代码演示

v-bind和语法使用 {{模型数据的名称}}的使用

<!DOCTYPE html>
<html>
<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>

更多web前端自学相关知识，请查阅 HTML中文网！！

以上就是vue.js是基于javascript吗？的详细内容，更多请关注易知道|edz.cc其它相关文章！