vue基础

使用步骤

1. 引包 具备Vue对象
2. 启动Vue， 通过Vue对象 去new Vue(options)
3. 配置options的选项对象
4. el:‘目的地’, template:‘模板’， data:function(){
   return {要使用的key：数据}
   }
5. 页面中存在该目的地，目的地字符串描述同jQuery一样

---

什么是指令

1. 在Vue中提供了一些对于页面+数据的更为方便的输出，这些操作就是指令，一v-xxx表示

• 类似于HTML页面中的属性

2. 指令中封装了一些DOM行为结合属性作为一个暗号，根据不同暗号进行相关DOM操作绑定

---

常用指令：更便捷操作DOM及数据

1. v-text ：

• 其实是给元素的innerText赋值
• 必须是双标签

2. v-html

• 其实是给元素的innerHtml赋值

3. v-if

• 元素的插入或移除

4. v-else-if

5. v-else

• v-if、v-else-if、v-if三者必须连在一起写，中间不能有其他的元素

6. v-show

• 控制元素显示隐藏

---

v-bind绑定属性

1. 给元素的属性赋值（任何属性），是从Vue到页面的单项数据流

• 可以给已存在的属性赋值 ，如input的value属性
• 也可以给自定义属性赋值

2. 语法：在元素上 v-bind：属性名=" ‘常量’||变量名 "。若为常量必须用 ‘’ ,否则会报错
3. 简写形式 :属性名=" ‘常量’||变量名 "

<div v-bind:原属性名="变量"></div>

<div :原属性名="变量"></div>

---

v-on：绑定事件

1. 处理自定义原生事件，给按钮添加click并使变量样式改变
2. 在元素上 v-on：原生事件名=“表达式||函数名”
3. 简写形式 @原生事件名=“表达式”

---

v-model

1. 双向数据绑定（只能给具备value属性的元素进行双向数据绑定）

---

v-for

1. 基本语法 v-for=“item in arr”
2. 对象操作 v-for=“item in obj”
3. 如果是数组，没有id

• v-for="(item,index) in arr" :class=“index”

4. v-for的使用中，除了item输出，还有一些辅助属性
5. v-for属性的顺序

• 数组：item -> index
• 对象: value -> key -> index

---

关于对象内的this

1. Vue已经把以前this是Window或者事件对象的问题解决了
2. methods和data本身在同一个对象中，所以在该对象中可以通过this随意取
3. this.xxx取的是data中的值，this.xxMethod调用methods中的函数

---

渲染组件-父使用自组件

1. 创建子组件（对象）

var Header={
    template:'模板',
    data是一个函数，
    methods：功能，
    components：子组件们
}

2. 在父组件中声明，根属性components:{ 组件名：组件对象 }
3. 在父组件药用的地方使用<组件名><组件名/>

• 组件名：MyHeader
• 使用：my-header

4. 总结：有父 -> 生子 -> 声明 -> 使用

---

父子组件传值（父传子）

1. 父用子的时候通过属性传递
2. 子要声明props:[ ‘属性名’ ]来接收
3. 收到后就可以随便使用了

• 在template中直接使用
• 在js中this.属性名 用
• 常量传递直接用，变量传递加冒号

变量： <son :title="xxx"></son>
常量： <son title="xxx"></son>

4. 总结

• 父用子 ： 先有子 -> 声明子 -> 使用子
• 父传子 ： 父传子（属性） -> 子声明（收） -> 子直接用（就是自己的一样）

---

注册全局组件

1. 应用场景：多处使用的公共性功能组件，就可以注册成全局组件，减少代码冗余
2. 全局API Vue.component(‘组件名’,‘组件对象’)

---

附加功能

1. filter || filters

• 将数据进行添油加醋的操作
• 过滤器分为两种
  
  （1）组件内的过滤器（组件内有效）Vue.filter(‘过滤器名’,‘过滤方式fn’)
  
  （2）全局过滤器（所有组件共享）Vue.filters( ’ 过滤器名 ’ , ’ 过滤方式fn ’ )
• 先注册，后使用
• 组件内filters:{ 过滤器名:过滤器fn }，最终fn内通过return产出最终数据
• 使用方式{{ 原有数据 | 过滤器名 }}
• 需求：页面input框输入字符串，反转字符串输出，按参数显示label
• 过滤器fn：
  
  （1）声明function(data,argv1,argv2…)
  
  （2）使用{{ 数据 | 过滤器名（参数1，参数2）}}

---