Vue 基础总结

Vue 基础

day1—指令 ：

1.内容渲染指令 ：

· v-text —— 缺点 ：覆盖元素中的默认值

· {{}} —— 插值只能用在元素的内容节点，无法用在属性节点

· v-html —— 用处 : 把带有 HTML 标签的字符串，渲染为真正的 DOM 元素

2.属性绑定指令

· v-bind:

· 简写 ：

3.事件绑定指令

· v-on

· 简写 @

· @click="show" 和 @click="show(传参)"

· 内置的变量 $event —— @click="show(3，$event)"

· 事件修饰符 ：

①阻止默认行为 ：prevent

②阻止冒泡 ：stop

· 按键修饰符

①esc

       ②enter

4.双向绑定指令

· v-model —— 只能用在表单元素上

修饰符 :

①number

如果用户希望将输入表单的内容处理为Number类型，可以使用.number给v-model进行修饰

如果表单字符串无法被处理为数字，则返回原始的值

②trim

       可以自动过滤输入框的首尾空格

③lazy

默认情况下，v-model在input和textarea表单中进行同步输入框的改动

添加了.lazy修饰符之后，对应的v-model绑定事件触发机制将变为change事件，只有在光标失去焦点时会触发

5.循环渲染指令

· v-for="(item,index)in 数组"

· key="item.id"

· 拿索引当 key 没有意义

6.条件渲染指令

· v-if

①动态创建和移除元素

②v-else-if

③v-else

· v-show

动态添加和移除 display:none 样式

7.过滤器

· 全局过滤器

Vue.filter('名字'，function(过滤器前面的值){

return结果

}）

· 私有过滤器

定义到组件的filter 节点之下

· 调用

{{message | dateFormat}}

day2 :

· 侦听器 watch

方法格式 :

username(newVal,oldVal){}

对象格式 :

username:{

①handler(newVal,oldVal){},

    newVal 变化之后的新值

   oldVal 变化之前的旧值

②deep:true

     深度侦听 只要对象中的任何一个属性发生变化 都会触发"对象侦听器"

③immediate:true

    immediate 选项默认值是 flase

    immediate 的作用是 控制侦听器是否自动触发一次

}

·计算属性computed

①在定义的时候，要定义为function

②在使用的时候，当作普通属性即可

    在template 模板中可以使用

    在methods 方法中，也可以使用 —— this.计算属性的名字

③要return 一个计算属性

④只要任何一个依赖的数据发生了变化，计算属性就会重新求值

·vue-cli

全局安装 —— npm  install @vue/cli -g

创建项目 ——  vue create 项目名称

组件的构成有三部分 :

①template —— 只能有唯一的根节点

②script

exprot deefault{}

vue中的data 必须是方法

③style

启用less 语法 —— lang="less"

防止组件之间的样式冲突 ：

scoped

/deep/ 深度选择器 在需要覆盖的第三方组件的样式 的时候 会用到

day3:

props的作用于用法 ：

· props —— 极大的提高组件的复用性

·  定义props 有两种格式

①数组格式 ：简单

  props:[init]

②对象格式 :  props:{

            init:{

  type:Number,'

  default:0,

    require:true

      }

                  }

· props 因此在开发项目中 不要直接修改它的值 ——

    把propsd的值 ，"转存"到 data 中，就可以进行读写操作

生命周期 ：

·概念 ：在生命周期不同的阶段，会按次序，自动依次执行的函数，叫做生命周期，

    强调的是时间点

· 三个阶段 ：

创建阶段 —

beforeCreate

created : 发起Ajax 最早的时期 请求数据

beforeMount

mounted :

①组件第一次渲染到浏览器中

②操作 DOM 的最早的时机

运行阶段 —

beforeUpdate

updated : 能够操作到最新的 DOM 元素

销毁阶段 — 

beforeDestroy

destroyed

组件之间的数据共享 ：

父 --> 子 ：

自定义属性

①子组件中 通过 props 来定义属性

②父组件中 负责把 数据 通过 v-bind :绑定给予组件

子 --> 父 ：

自定义事件

兄弟组件共享数据 :EventBus