vue是html吗,vue.js是基于javascript吗？

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

Vue官网介绍

vue是渐进式JavaScript框架

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

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

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

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

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

使用

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

2、创建Vue对象var vue = new Vue({

el: 视图对应的标签

data: 模型数据

methods:{

方法1：function(){},

方法2：funciton(){},

...

}

});

3、展示模型数据

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

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

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

姓名：{{name}}, 年龄: {{age}}, 图片 {{photo}}

// el -> element

var vue = new Vue({

el: '#app', /*vue 对象对应的视图是id为app的标签*/

data: { /*data 中包含的是模型数据*/

name:'zhangsan',

age: 18,

photo: '2_1.bmp'

}

});

vue的一些常用指令

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

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

2、v-if

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

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

用户名不正确

var vue = new Vue({

el:"#app",

data:{

hasError:false /*没有错误*/

}

});

3、v-show

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

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

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

事件处理

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

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

如果方法有参数的话就在方法名后面加上括号里面写上参数，如 ，没有参数就直接写方法名

双向绑定 v-model

v-bind 模型数据发生了改变，视图也会重新渲染，模型会影响视图，而反之不行

v-model, 不仅是数据改变影响视图，而且视图改变也会影响数据，尤其配合表单使用

代码演示

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

Document

姓名：{{name}}, 年龄: {{age}}, 图片 {{photo}}

{{name}}

// el -> element

var vue = new Vue({

el: '#app', /*vue 对象对应的视图是id为app的标签*/

data: { /*data 中包含的是模型数据*/

name:'zhangsan',

age: 18,

photo: '2_1.bmp'

}

});

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