2019-10-01

vue基本用法

事件绑定-参数传递
1’在组件标签中，例@click=“handle(参数一，参数二，事件对象$event)”
2’在methods中 定义一个函数（也称为方法）
handle （p，p1，event）｛
console.log（p，p1，event.target.innerHTML）
｝

注：1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
2、如果事件函数调用、那么事件对象必须作为最后一个参数进行传递

样式绑定

1、数组的方式

这样的话直接就可以得到当前组件的样式

2、对象的方式

data中isActive是一个布尔值
可以通过按钮绑定事件进行样式切换
this.isActive=！this.isActive来回切换

1. 对象绑定和数组绑定可以结合使用
2. class绑定的值可以简化 默认的class和：class可以同时用
3. 默认的class##
   

属性绑定

：href=“url”
data中url=“www.baidu.com”
button绑定一个事件@click=“handle”
methods定义handle （）｛
this.url=“www.taobao.com”
｝

样式绑定style

过滤器的使用

使用场景两个地方，一是差值表达式｛｛｝｝中，一个是v-bind。
使用为Vue.filter（“过滤器的名称”，function（data）｛
return data+“123”
｝）
过滤器中的function，第一个参数，已经规定死了，永远都是过滤器 管道符前面 传递过来的数据

创建组件

1. 第一种使用Vue.extend来创建全局的Vue组件
   
   注：如果使用Vue.component定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时两个单词之间，使用-连接；
   如果不使用驼峰，则直接拿名称来使用即可；
   可简写为如图
   注：第一个参数：组件的名称
   引用的时候直接标签形式来引入即可。
   第二个参数：Vue.extend创建的组件，其中templete就是组件将要显示的html内容。

2. 创建组件的第二种方式 字面量对象的形式、直接上图
   第二种虽然简单 但是template模版里面没有智能提示。
   注：所有创建组件的方式在template模版中必须要有一个根元素

3. 第三种写一个template模版单独抽离出去