HTML5前端知识分享：Vue入门

Vue 是渐进式框架，自底向上增量开发，是构建数据驱动的web界面，他通过尽可能简单的API实现响应的数据绑定和组合的视图组件，与angularjs，相比它小巧，运行快数据绑定都使用{{}} ，与react相比都提供了组件化的试图组件，都集中在核心库，有丰富的插件库。

1. 常用标签

V-model 双向关联

V-else 与 v-else在上下相近的标签里使用，分开就会影响条件的判断

V-for （a ， b）in c 遍历c ，参数a 代表各个对象，b代表索引

V- text 想内部注入文本，标签内部不再写内容

V-html 内部可以注入标签，但也是黑客突破网络的窗口

V-bind 可以动态的绑定内容例如v-bind：src=“url” url在下方模块的data部分写路径

如果直接写入路径会报错

动态的绑定 component 中：is=“name”

2、监听

第一种写法

vm.$watch (‘’,function( newvalue , oldvalue){ } )

在vm=new vue外部写的 $watch 是因为在外部调用，升成全局同理 $el

第二种写法

直接在vue初始化中通过

vue内部写的

watch｛msg:function(newvalue,oldvalue){}

3、过滤器

（vue 1.0 有内置过滤器 vue2.0 自定义过滤器）

filter 是过滤器语法，写在 vue前

Vue.filter(‘过滤器名字’,function(value){

if(value ){

return //具体操作

}

if(value){

return //具体操作

}

})

调用

4、事件阻止冒泡

1）函数内部阻止事件冒泡 e.cancelBubble=true; // 在 vue 的methods 内声明事件是添加原话

2）标签内阻止事件冒泡 @click.stop=“show1()” //添加一个stop 即可，其他正常写

3）键盘事件 keydown 函数中获取键盘编码keyCode

4）在标签内直接绑定按键事件（英文名或键盘码）

@keyup.13=“functionname()” @keyup.enter=“functionname()”

5、生命周期共11个

通俗理解是一个组件之类的加载失效的过程，类比于生命的开始与结束，这些特殊的时间节点被当做事件的触发条件，省去了绑定事件发生的代码量。

箭头函数this指向父级不是实例，所以不能绑定生命周期

常用的几种

beforeMount在挂载开始之前被调用

Mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

6、传值

1）父传子

（通过在子组件标签上绑定自定义属性式的指令，值为传递的数据，

子组件内部通过props属性名接收（数组形式加引号【“ name”】），子组件的模板内，

直接解析加载接收的属性名。）

调用

2）子传父

（通过在子组件标签上绑定自定义事件，子组件内部通过$emit进行数据推送

父组件通过事件调用函数参数进行数据接收）

子组件script中

父组件body中

父组件的方法中将收到的数据赋予data

3）平行组件传值（非父子组件之间传值—空vue对象$emit(‘’,数据) 发送 $on 接收）

可看做将$emit升为全局

HTML5前端知识分享：Vue入门相关推荐

好程序员HTML5前端培训分享如何学好HTML5
好程序员HTML5前端培训分享如何学好HTML5,想学好HTML5前端开发,首先你要了解什么是HTML5前端,随着全球网络的使用量的增加,HTML5是万维网和的核心语言,HTML5具有及时更新.跨平台 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
vue 给取data值_web前端教程分享Vue相关面试题
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来就给大家分享一些Vue相关的面试题,帮助大家提升竞 ...
前端知识分享总结（实时更新......)
RESTful API REST 知识点:前端 - SegmentFault 思否 1.$(document).ready 与 window.onload 的区别 $(document).ready ...
HTML5 的知识分享（二）：HTML5 的常用标签
经过我的上一篇博客可以让大家简单地了解了一下 HTML5 的基础标签,现在再和大家分享一下 HTML5 的常用标签吧基础标签与常用标签的主要区别在于:要先有基础标签的基础才可以灵活的使用常用标签. ...
HTML5的知识分享（一）：HTML5的基础标签
标签是什么? 标签是HTML语言是基本的元素和组成部分,它使一个网页分出范围.内容区.解释区以及各种内容的引用.简单地说,标签是使网页内各种内容相互区分,使内容与数据更加有序的.特殊的.约定好的符号. ...
写给前端初学者的Vue入门教程
一.web应用开发 Vue是一款优秀的web应用开发框架,使用它可以让我们开发web应用时候更加高效.在学习Vue之前需要先了解一下web应用开发. 什么是web应用?当我们开发web应用时候,我们在 ...

HTML5前端知识分享：Vue入门

HTML5前端知识分享：Vue入门相关推荐

最新文章

热门文章