Vue概述及入门
vue概述及入门
Vue的基础认识
什是Vue.js ( 官网:https://cn.vuejs.org/ )
- Vue.js是目前比较火、比较流行的框架
- Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架（渐进式：由浅入深的、由简单到复杂的方式使用vue.js）。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue特点 ：易用，灵活，高效
vue全家桶：Vue+components(vue element/iview…)+vue-router+vuex+vue-cli
vue.js优点： - 体积小
压缩后 20kB min+gzip - 更高的运行效率
基于虚拟DOM，一种可以预先通过Javascript进行各种计算，把最终的DOM操作计算 - 双向数据绑定
让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上 - 生态丰富、学习成本底
市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件！拿来即用实现快速开发！ - 使用场景广泛
被广泛的用于web端、移动端、跨平台应用开发 对初学者友好、入门容易、学习资料多
为什么要学习流行框架
Ø 企业为了提高开发效率
Ø 提高开发效率的发展历程：原生JS -->Jquery之类的类库 -->前端模板引擎 -->Angular.js/Vue.js(能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】)
在Vue中，一个核心的概念，就是让开发者不再操作DOM元素，解放了开发者的双手，让程序员可以更多的时间去关注业务逻辑！
类库、插件、组件、框架的区别
类库：jquery、zepto、underscore等 类库提供的是项目常用的方法，相当于一个工具包，可以基于工具包快速开发项目
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目 库（插件）：提供了某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
声明式和命令式
命令式编程
命令”机器”如何去做事情（how）,这样不管你想要的是什么（what），它都会按照你的命令实现，例如for循环l 声明式编程
声明式编程
告诉”机器” 你想要的是什么（what），让机器想出如何去做（how）,例如数组内置方法forEach等
渐进式框架
渐进式：类库或者框架都是重量级的，里面包含很多方法，但是实际项目开发中，我们用不到这么多东西，所以在开发他们的时候，会把功能按照模块进行单独开发，使用者可根据自身情况选择一个模块一个模块的导入使用
vue起步
安装
最新稳定版
$npm install vue
基本使用
Vue对象的选项
El：
Data：
Methods：
Computed：
5.-表单双向绑定
表单数据的双向绑定
6.-事件处理
定义事件处函理数
绑定事件处理函数
V-on:事件名称=”事件处理函数”
缩写:@事件名称 = “事件处理函数”
7.-生命周期
定义过滤器
Vue.filter(filterName,function(){
Return newValue
})
使用过滤器
{{myData | fiterName}}
{{myData | fiterName(arg)}}
9.-指令
v-html 更新元素的innerHTML
v-show 通过控制display样式来显示与隐藏
v-if 如果为true,当前标签渲染到页面中
v-else 如果为false,当前标签渲染到页面中
v-else-if
v-for 遍历数组/对象
v-on 绑定事件监听,一帮简写@
v-bind 强制绑定解析表达式,可以省略v-bind 直接使用:冒号即可
v-model 双向数据绑定
v-slot v-pre
v-cloak使用它可以防止闪现,必须与css搭配使用:[v-cloak]{display:none}如果想使用{{}} 又不想出现闪烁问题,则使用v-cloak来进行处理
使用：
在头部添加一个特殊的样式:[v-cloak]{display:none}
在vue管理的模板入口节点上使用v-cloak指令
原理：
默认一开始被vue管理的模板是隐藏这的,当vue解析处理完dom模板之后,会自动把这个样式去掉,然后显示出来
v-once 只生效一次
10.-Vue-cli 脚手架
官方提供的脚手架工具
GitHub :https://github.com/vuejs/vue-cli
下载模板项目:https://github.com/vuejs-templates/webpack
用法
这是vue-cli的项目模板。建议使用npm 3+以获得更有效的依赖关系树。
1.-创建vue项目
（1）1- Npm install -g vue-cli
- Vue-V
（2）Vue init wepack my-project
2.项目的打包与发布
(1) 打包
① Npm run build
(2) 发布:静态服务器工具包
① Npm install -g serve
② Serve dist
③ 访问:localhost:5000
3.-组件定义与使用
基本使用
标签名与标签属性名书写问题
4.-组件间的通信
组件间通信方式
组件间通信方式：props
定义组件标签
·····在组件内声明所有的propsu
方法1:只指定名称
······Props:[‘todos’,’deleteTodo’]
方法2:指定名称和类型
······Props:{n Todos:Array,n deleteTodos:Functionl }
方法3:指定名称/类型/必要性.默认值
·······Props:{n todos:{type:Arrya,required:true,default:[‘11’]}l }
注意: 此方式用于父组件向子组件传递数据
所有标签属性都会成为组件对象的属性,模板页面也可以直接引用
问题
如果需要向非子组件传递数据必须逐层传递
兄弟组件间也不能直接props通信,不许借助父组件才可以
组件通信 2：vue自定义事件
1-.绑定事件监听
This. r e f s . x x x . refs.xxx. refs.xxx.on(“delete_todo”,function(todo){
This.deleteTodo(todo)
})
2.触发事件(只能在父组件中接收) This.$emit(eventName,data)
3.注意
1.订阅消息[绑定事件监听]PubSub.subscribe(msg,function(“msg”,data){})
2.发布消息[触发事件]PubSub.publish(“msg”,data)
3.注意
可以实现任何组件间通信，想使用这个库必须先安装
11.-Vue–前后端交互
标签：
相关文章
-
无相关信息