2021.4.2-vue基础

vue基础

vue与原生js

原生js显示文本框内容

• 

vue显示文本框内容

• 

二者的区别是：vue不用操作 dom 节点

vue 的使用方法

• 1.创建dom结构，作为vue实例挂载点，vue实例中的所有数据只能在此dom范围内使用

2.通过 new Vue 创建 vue 实例 3.el 属性指定当前 vue 实例的挂载点 4.data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中通过下面方式访问data中数据

app.msg

5.可以通过插值表达式使用 data 中的数据

数据绑定

举例(内容绑定和属性绑定)

• 

• 效果图

  • 

双向数据绑定(v-model)

• 

  • 

• 复选框的数据绑定

  • 

  • 效果图

    -

• 单选按钮

  • 

  • 效果图

    • 

• 选择框

  • 

• 模板使用js表达式

  • 

• 列表渲染

  • 

• 条件渲染

  • 可以单独使用 v-if，或者 v-if 和 v-else，或者 v-if 和 v-else-if 搭配使用

  • v-if在单独使用的时候，与 v-show 的作用是一样的，都是根据变量的值决定是显示还是隐藏当前元素

  • 

  • 效果图

    • 

样式处理

vue操作class

• 1.class 与 v-bind:class 可以共存，但是其实最终操作的都是元素的 class 属性
  2.v-bind:class 的值可以是字符串、对象或者数组
  3.v-bind:class 的值如果为对象，如{active:isActive,color:isColor}，则属性名称是 style 中定义的样式类名称，属性值是 data 中定义的变量名称

• 举例

  • 

  • 效果图

    • 

vue操作style

• 

计算属性和选择器

计算属性

• 

• 效果图

  • 

使用methods格式化日期

侦听器

计算属性实现侦听器功能(computed)

• 

表格的CRUD

效果图

• 

组件

完整例子

• 

• 效果图

  • 

• 1.组件data 值是个函数
  2.组件中的数据主要来自于父组件
  3.子组件中使用 props 属性规定父组件传递过来的属性名称
  4.父组件根据属性名称传递数据
  5.一般情况下，组件的某个事件触发后，会通过$emit 方法向上广播，并可以传递参数过去，父组件在根组件上定义此自定义事件(不是js的原生组件)，并定义事件处理函数

为组件绑定事件

• 为组件绑定事件：也就是在组件模板中为每个组件绑定事件
  为跟组件绑定事件：在父组件中引入组件的地方绑定事件
• 

组建的互斥效果

• 

• 效果图

  •