vue的入门

第一模块

前端的MVVM和后端的MVC架构思想

 

 

Vue的js文件放到后面,加载太慢的情况网页会直接看到msg,所以利用v-cloak,配合

V-cloak

[v-cloak]{

         Display:none;

}

就可以在没加载之前进行隐藏,加载好js就会显示。

V-text

是有同样的功能:

  1. 解决闪烁问题
  2. H4标签中的内容会以vue对象内的data对象的msg为准,======不会被显示

V-html

         将展示的内容解析为标签,而不是原样输出

V-bind是用来绑定属性的指令

其中mytitle为一个变量,我们可以+’123’,这样进行了字符串的拼接,并成为title属性的值

其中:title为v-bind:title的简写

 

 

 

v-on是用来绑定事件对应的方法的

mouseover,click,doubleclick等事件都可以

 

小跑马灯效果

通过v-on绑定事件时候进行的定时器截取字符串拼接做成跑马灯效果。其中重要的是this是只vue本身这个类实例的方法,this.msg才能获取到。定时器没有办法通过this拿到,只能使用  ()=>{}  这种箭头函数将this指向外部的this;还有就是this.msg = ‘‘’,不仅仅改变的是这个类里面的方法或者数据,而且会自动刷新到页面上去,程序员只需要关心数据不需要重新渲染DOM页面的元素;

 

 

事件修饰符 一般来说就是 通过

公式:@事件(click).事件修饰符=’执行函数’

  v-on:  事件绑定的缩写

:     v-bind  属性绑定变量的缩写

其中事件修饰符可以连着几个

.stop:

         阻止上级所有冒泡行为(只执行自己,绑于自己)

.prevent:

         阻止默认行为:例如a标签的跳转行为(阻止此标签默认行为,绑于自己)

.capture:

         实现捕获事件:意思是对于此标签的下级标签进行了事件捕获,然后会限制性此标签的事件再实行下级标签的事件(从外到里,绑于高层标签)

.self

         只有点击自己的时候才会触发事件处理,跟stop相同的是他也阻止上级标签的冒泡行为,但是阻止上上级的标签冒泡行为;

 

其中

.once是说对前面的行为只执行一次:

         像是说这里只阻止一次默认行为

         亦或者可以写成:

         @click.stop.once=’link;’   此时他会只阻止一次默认行为;

 

v-model表单双向数据绑定

双向数据绑定就是说,你在页面上能够改变某些标签的值或者属性,利用v-model,可以将这个值同步到js的对象中的数据中同时进行改变

 

计算器实例:

 

通过class绑定样式属性:

 

 

为style属性绑定v-bind

 

v-for

循环遍历元素

☆:   

v-if和v-show

v-if是判断数据的bool来看看是不是创建或者删除此标签

v-show是来判断数据的bool来看看对display属性的改值

 

实际通过表单元素操作增删查:

增加:

删除:

查找:

过滤器:

 

私有的过滤器:放在自己vue对象内的filters中

 

时间补0的情况

 

 

自定义按键修饰符:

<input type=”text” class=”…” v-model=”name” @keyup.Enter = “add”>

<input type=”text” class=”…” v-model=”name” @keyup.113 = “add”>

其中keycodes = 113的时候是意味着f2

或者在:

<input type=”text” class=”…” v-model=”name” @keyup.f2 = “add”>

Vue.config.keyCodes.f2 = 113;

 

自定义全局指令:

 

自定义指令的传参:

 

私有的自定义全局指令

指令自定义缩写

 

组件周期函数(事件):

 

 

Vue发送ajax请求(http请求):

 

 

 

要做到页面预加载数据通过this.$http的方法进行请求的时候:

最好在生命周期方法created中进行数据请求。

全局启用http相关配置:

Vue实现动画效果:

 

 

定义作用范围

 

 

 

 

 

 

原文地址:https://www.cnblogs.com/hoewang/p/10257206.html