Vue学习笔记——指令和部分组件

Vue实例 2

v-model 2

v-if v-else v-show 2

v-for 3

Computed运算数据 3

Computed运算数据之排序数组 4

V-text和v-html 4

Methods 4

V-model和form表单的绑定 5

三个修饰符 5

复选框中加v-modle 6

将数据和表单标签进行绑定 7

V-bind 7

动态标签绑定 7

绑定样式 8

Style 样式绑定在data数据中 9

Style 绑定json语句 9

其他的指令 10

V-Pre指令 10

V-cloak外套， 10

V-once只显示一次 11

全局API 11

自定义指令 11

指令生命周期 11

Vue.extend挂载 13

V-set 14

构造器生命周期 15

Teamplate模板 16

组件-1Component 16

组件-2 props 17

组件-2 props 18

组件-2 component标签 19

选项 21

propsData 开发环境数据测试而已 21

Methods 22

Watch 24

Mixin混入 25

Extend 26

选项 26

Render 26

实例$ 26

实例事件 26

在外部创建方法 26

在外部调用构造器的方法 27

Slot 27

Vue的Ajax 28

Translation 标签 29

Css动画库 30

过滤器 31

V-for和过滤器 32

 

笔记:本版本是vue2.0

在使用Vue.js的过程中，先引入脚本

在js中 new  Vue（{ key:value,key:value}）一个实例化。

其中 el:''代表作用域，''中填作用域的‘#+ID’

data键中可以继续定义键值对

{

key:value,

key:value,

}

在body 中使用 {{key}} 来显示Vue中data的键所代表的值。

Vue实例

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
      //可以自定义键值对
  }
})

 

v-model 

 

该属性是使用绑定标签，在某一个标签改变的时候，对应的data里面的key对应的值也会改变，使得引用这个键的地方的值也随着改变。

使用方式：<input v-model="message">

v-if v-else v-show

 该属性可以判断Vue实例中的data中key对应的值

比如

<p v-if="seen">表示data中有个key 来判断显示p> 

<p v-else>显示反方向的p> 

<p v-show>简简单单的显示p> //代表css中的display要显示的主键

 

注意：以上标签必须在 el书写的作用域中

 

 

v-for

在Vue实例中的data中存在一个键值对分别是

todo:[
   {text:"1"},
   {text:"1"},
   {text:"1"}
   
],
   student:[11,22,33,44,45]

一个对象数组

一个数值数组

使用的方式，跟json差不多 直接用in在标签上遍历

<p v-for="q in todo">
    {{q.text}}
p>
    <p v-for="stu in student">
        {{stu}}
    p>

 

Computed运算数据

在data中添加一个键值，但是值是空的，通过

方法运行数据 赋值的空的数据中

比如

studentsort:'',
computed:{
    studentsort:function () {
      return this.student.sort()
  }

那么studentsort这个的值会变成 student 运算后的值

也就是说源数据是不能污染的，只能重新定义一个接收，下次才能再使用源数据处理成不同的数据

Computed运算数据之排序数组

 

如果是值的对象，可以通过

自定义的function在外部书写好后 在commputed里面进行 调用排序，

 

在对象数值中，写入按照谁进行数据的排序

 

V-text和v-html

前者即使文本里面有标签，也会显示标签，

后者会编译文本中的标签进行显示

 

Methods

在data数据中添加键值对

 

使得源数据的响应发生对应的改变

可以绑定文本字进行使用

键值表的使用

 

 

可以使用按键来触发事件

 

 

V-model和form表单的绑定

三个修饰符

.lazy 鼠标移开的时候才改变对应的值（输入完了懒加载搜索信息）

.number 自动格式 数据可以直接运算，只能针对数值

.trim 前后删除空格。

注意 插值 {{}} 是无法绑定标签的  只能加载一次   要绑定的话 必须加 v-model=”message”

 

 

 

复选框中加v-modle

 

 

 

将数据和表单标签进行绑定

 

 

V-bind

动态标签绑定

V-bing:属性 比如V-bing:src=”key” : width=”key”

:绑定属性

@绑定事件

 

 

绑定样式

样式名的绑定 :class=’样式名称’

样式名的绑定 :class=’[样式名称’,样式名称’]

样式名的绑定:class=’{样式名字,data中key}’ 是否显示  key:’true’

 

三元表达式的使用

[key?data中的key样式1：data中的key样式名字2]

 

判断组合

’[{样式名字,data中key},data中的key样式名字2]’ 是否显示  key:’true’

 

 

 

 

Style 样式绑定在data数据中

:style=’{ color:data的key }’  key必须在 data中的数据有对应的值

 

 

Style 绑定json语句

:style=”fontStyle”.

在data写个数组 键值对的形式 变成样式

 

 

其他的指令

V-Pre指令

使插值{{}}不生效。

V-cloak外套，

是一种样式

[V-cloak]{

Display:none

}

 

样式要放在script之前

 

 

V-once只显示一次

 

 

以上都是vue指令的内容

 

全局API

自定义指令

指令需要构造器，一些计算放在构造器在哪里

自定义指令，就是v-自己定义的

 

@事件

后面jia是methods中的方法

 

指令生命周期

 

Bind被绑定

Inserted绑定到节点

以上是绑定的时候

Update组件更新

componentUpdated更新完成

绑定好了进行操作更新

Vue.directive(

‘wos’,{

 

}

 

 

 

如果构造器解绑了就不控制组件了

Vm.$destroy();

 

操作就没有了

 

)

 

 

 

 

一开始绑定的时候样式或者信息

更新的时候 操作时候 样式的修改

一般是在 bind 和update这俩个自定义的指令中设置

 

Vue.extend挂载

延伸构造器，最常用的页面头部

Var vm=Vue.extend({

键值对

Template:”模板”，

Data:function(){

Return {

键值对

Message:”标签”

}

}

})

以上就是延伸

 

然后对延伸进行生效

就是将定义的值

Vm实例化出来，挂载到指定标签中

New vm().$mount(‘#id’)

V-set

创建一个json字符对象

Var ong={

Key : value,

key:[

{},

{}

]

}

然后在构造器的data中引用当前的数据

Data:ogn,

那么ong里面的数据都会放在data中

不常用

、

 数组名.push追加 数据 一般请求了数据就可以得到数组追加到后面响应的更新数据

 

响应式更新必须把方法写在，data的下方methods中才能对data的数据进行更新、

Methods：{

方法名：function（）{

This.data中的数据=null;

}

}

Null代表数据不在内存中了，不在对其操作了

 

构造器生命周期

Vue的生命周期

用户部署数据

生命周期是放在data数据的下面

前四个先初始化

 

 

脚本的数据写在 mounted、创建的时候，挂载的时候

前三个不允许任何操作

 

 

更新的记录

 

 

这是在点击销毁的时候”vm.$destroy();”

 

 

4,6,9用来更新数据

Teamplate模板

模板

1.放在构造器的

Template:`

最简单的模板

`

嵌入到外部构造器

 

2. 标签的模板

引用外部的模板

1的构造器中将id放在` #id`中

3. 放在script中

 

 

不同的环境写不同的模板

 

组件-1Component

一种自定义标签

使用自己的标签

1.直接全局Vue.component(‘标签名字’,{

Template:’源码’

})

只能在作用域，就是标签要在构造器中声明

 

Var component={

“内容”

}

2. 在构造器中声明的局部

Components:{

“world”:组件名称不需要””;

}

 

组件-2 props

把属性传入组件

Props是一个组件

Var component={

“内容”；

Props:[‘插值内容’]

}

 

上面是直接写在属性的

 

 

我们可以用v-bind绑定data中的数据

 

 

验证数据

Props：{

 

}

 

数据验证的方式

组件-2 props

在一个组件中引入另外一个组件

Var conpnentChid={

Template:`

`

 

}

Var component={

“内容”；

Components:{

“新标签名”:局部组件名称

}

}

 

父组件中引用子组件

 

 

 

组件-2 component标签

Vue已经写好的标签

先挂载组件

 

如果需要插值的时候

可以在组件中定义方法data:function(){

Return{

A:’1’;

}

}

 

选项

propsData 开发环境数据测试而已

 

 

 

Computed:{

Message:funtion(){

Return this.mesage=’计算’;

}

}

名字就是处理后的数据返回放到名字中多个方法，号隔开处理数据。相当于data中的属性

计算后再显示出来。数据计算处理格式化。比如json数据经过处理再显示

Methods：{

 

}

这是事件的处理

 

改变原数据时候，其他数据会实时更新

 

Methods

如果简单的简单的操作

 

Jia(1,$event)

 

 

鼠标事件

 

 

组件使用的变迁引用本地的方法

 

 

外部引用内部的方法

Vm.jia();

 

 

V-on的事件

V-on.click.stop阻止冒泡

V-on:submit.prevent 表单上使用 阻止返回上一个页面

V-on:click.captrue 捕获模式

修饰符可以串联起来

 

Native的修饰符

Watch

监控，监察数据的变化，控制返回值

Watch:{

n:funtion(a,b){

//n是原来的那个数据data中的

A代表修改后的值

B代表之前的值

//通过判断ab来设置this.n的值

}

}

以上实在构造器的

可以写在构造器以外的

//一种策略模块化加载

Vm.$watch(n,function(a,b){

 

});

 

Mixin混入

Mixins:[aaa]

 

Var aaa={

Created:fnction(){

This.message=”我被混入了”

}

}

 

先执行混入的再执行原装的

 

全局混入的

Vue.mixin({

})

 

日志管理，用户的行为和使用习惯

Extend

用来扩展新的  和混入差不多

 

选项

Render

引用外部组件的时候

This.parent.message父辈的message

 

Delimiters插值写法的改变

 

 

实例$

 

引入jq，可以在methods里面，或者生命周期中mounted：function（）{}

 

实例就是vue对外的接口，数据操纵

实例事件

在外部创建方法

Vm.$on(‘函数名’,function(){})  将方法放入构造器

.$forceUpdate()

.$destroy

在外部调用构造器的方法

Vm.$emit(‘函数名’,参数)

 

Vm.$onece只执行内部一次

 

 

Vm.$off(‘内部事件’)关闭内部方法或者事件

 

Vm.$nextTick(function(){

 

})

Slot

用于自定义标签的传值

在现实的标签中加 slot属性

在模板中也加属性

 

一种好标签的内容扩展

内容到模板

 

Vue的Ajax

Vue-resource

放在beforemount:function(){

This.$http.get(‘url’).then(response)=>{

 

},(response)=>{

}

}

 

 

Vue-else-if

 

 

Translation 标签

 

 

Css动画库

 

 

过滤器

 

Debounce=1000;防止输入过快攻击

ms 默认是300ms

延迟绑定数据

V-for和过滤器

 

默认显示

 

limitBy 第一个是显示的个数

第二个是从哪一个开始显示

 

 

 

从哪里找

 

 

使用

 

 

 

 

0是正序 -1是反序