vue.js
1.vue是前端框架,react最流行的前端框架(可以用于开发网站和手机APP)2.vue.js, Angular.js, react.js是前端三大主流框架。
3.用于构建用户界面的框架,只关注视图层
4.相当于MVC中的V
VUE采用自底向上增量开发的设计,vue的核心库只关注视图层。VUE.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 最初在前端开发中,通过js在HTML页面中获得DOM节点及其节点内容后,在DOM节点上添加事件。业务的增加导致负重的逻辑和开发量。随后开发人员将js代码分为了三个模块。数据(Model),逻辑控制,视图(View),数据只负责数据部分,视图负责更改样式,逻辑负责联系视图和数据。需求发生改变,只需要更改对应的版块。 原先的DOM流是将DOM作为数据,从DOM中获得Model,又通过更改DOM来实现更改视图,视图与模型混合,不易维护。
Vue项目目录
1. index.html: 项目根视图
2. build:webpack的基本配置,开发环境配置,生成环境配置等
3. config:配置了路径端口值
4. Static: 静态文件
5. assets: 资源,图片
6. Node_modules: 依赖包,依赖的模块
7. main.js: Vue入口文件,初始化vue实例
8. package.json:定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)
Vue组成
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
...
</style>
1.templete 视图
2.script 逻辑
3.style 样式