【Vue】基础 Vue 入门

本期内容

☆ Vue 基础语法
☆ 组件

参考视频：https://www.imooc.com/learn/980

本期内容根据该视频中的内容制作笔记整理，如侵删

目录

一、Vue 实例

二、数据 & 方法绑定

三、属性绑定 & 双向数据绑定

四、计算属性 & 侦听器

五、v-if & v-show & v-for & key

六、TodoList 简单控件

七、用 Vue-Cli 生成的 Vue 项目与原生 Vue 的差别

---

一、Vue 实例

• new 一个 vue 实例对象，通过 el 进行绑定，之后便可在 vue 对象中对该实例进行操作

• 把 script 文件放到 head 中而非 body 中可以防止页面抖屏
• 在挂载点中加入 template 模板

二、数据 & 方法绑定

• 数据绑定
  1. {{...}}插值表达式

     

  2. v-text="..."：参数为变量，在实例中声明变量的值，显示为纯文本

     

  3. v-html="..."：参数为变量，可将内容解析成 html 标签后显示

     

• 方法绑定

v-on:click="()=>{alert(123))}})"   // 会报错
v-on:click="handleClick"    // 正确
@click="handleClick"  // 简写

• 改变数据

改变对象中的数据，而非操作 DOM

三、属性绑定 & 双向数据绑定

• 属性绑定

v-bind:...
v-bind:title="title" // 例子
:title="title" // v-bind 简写

• 双向绑定（如：input，input 改变页面上数据，页面数据显示 input 的输入内容）

v-model="..."
v-model="content" // 例子

四、计算属性 & 侦听器

• 计算属性（如：firstName、lastName，通过字符串相加，显示 fullName）

如果值未改变，computed 中的值会使用上一次的缓存值

// 计算属性结构
computed:{
    fullName:(){
        ...
    }
}

• 侦听器（如：侦听更改 fullName 的次数）

// 侦听器结构
watch:{
    firstName:(){
        ...
    }
}

1. 侦听 data中的属性 变化

2. 侦听 计算属性 变化

五、v-if & v-show & v-for & key

属性名	特点	性能
v-if	取值 false 时，直接移除	频率小时，性能更好
v-show	取值 false 时，隐藏不移除	切换频率大时性能好，避免频繁删除和重构，相当于 display:none

• v-if

• v-show

• v-for：用 list 循环读取 item 中的值并展示

• key：提升循环性能，指定唯一索引，key 值不能相同
  1. 如果 item 值不相同，key 可以取值为 item

     

  2. 如果 item 值相同，则增加索引来确定 key 的唯一

     

六、TodoList 简单控件

• 设置空值、输入框和循环

• 编写 click 事件，将输入值传入到 list 中

• 效果图

• 将以上列表注册成模板 template
  1. 全局组件：Vue.component

     

  2. 局部组件：注册一个对象，内含模板。需在 Vue 对象中声明才可使用

     

     

  3. 父->子组件传参

     

• 删除 TodoList（本例中，父组件为：list，子组件为：list 下的 <li>）

七、用 Vue-Cli 生成的 Vue 项目与原生 Vue 的差别

• data 的表示
  1. 原生 Vue

     

  2. Vue-Cli 创建

     

  3. 使用 ES6 语法简化

     

      
• methods 的表示
  1. 原生

     

  2. vue-cli

     

• Vue-Cli 中组件的创建