vue2 基础入门_vue入门

目录

vue 基础入门

vue 简介

1、vue 的特性

vue 的基本使用

1、基本使用步骤

2、vue 的调试工具

vue 的指令

1、内容渲染指令{{ }}

2、属性绑定指令 v-bind:

3、事件绑定  v-on:   @

4、双向绑定指令 v-model

5、 条件渲染指令 v-if v-show 

 6 、列表渲染指令 v-for

vue过滤器 

1、定义过滤器基本使用

2、 私有过滤器和全局过滤器

3、过滤器的注意点

watch 侦听器

1、使用 watch 检测用户名是否可用 

2、侦听器的格式

对象侦听器

deep 选项   

 计算属性

1、计算属性的特点

vue-cli 的使用 

1、安装和使用

2、vue 项目中 src 目录的构成：

3、vue 项目的运行流程

vue 组件

1、vue 组件的三个组成部分

template

script

style

2、组件之间的父子关系

3、通过 components 注册的是私有子组件

4、注册全局组件

5、组件的 props

6、组件之间的样式冲突问题

7、组件的生命周期

 8、组件之间的数据共享

vue 基础入门

vue 简介

是一套用于构建用户界面的前端框架。

1、vue 的特性

• 数据驱动视图
•  双向数据绑定

数据驱动视图

vue 会监听数据的变化，从而自动重新渲染页面的结构

双向数据绑定

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，

vue 的基本使用

1、基本使用步骤

1. 导入 vue.js 的 script 脚本文件
2.  在页面中声明一个将要被 vue 所控制的 DOM 区域
3. 创建 vm 实例对象（vue 实例对象）

   <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
     <div id="app">{{ username }}</div> //视图部分
    
     <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
     <script src="./lib/vue-2.6.12.js"></script>
     <!-- 2. 创建 Vue 的实例对象 -->
     <script>
       // 创建 Vue 的实例对象 
       const vm = new Vue({
         // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
         el: '#app',
         // data 对象就是要渲染到页面上的数据
         data: {
           username: 'zhangsan'
         }
       })
     </script>
   

2、vue 的调试工具

vue 的指令

指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

1. 内容渲染指令
2. 属性绑定指令
3. 事件绑定指令
4. 双向绑定指令
5. 条件渲染指令
6. 列表渲染指令

1、内容渲染指令{{ }}

•  v-text
•  {{ }}
• v-html

v-text 语法

<div id="app">
    <p v-text="username"></p>
    <p v-text="gender">性别：</p>
</div>

<p>姓名：{{ username }}</p>
    <p>性别：{{ gender }}</p>

<div v-html="info"></div>

3、事件绑定  v-on:   @

1. v-on: 简写是 @

2. 语法格式为：

   <button @click="add"></button>
    
   methods: {
      add() {
               // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
               this.count += 1
      }
   }
   

3. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

   <button @click="add(3, $event)"></button>
    
   methods: {
      add(n, e) {
               // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
               this.count += 1
      }
   }
   

4. 事件修饰符：

   • .prevent  阻止默认行为

     <a @click.prevent="xxx">链接</a>
     

   • .stop  阻止事件冒泡

     <button @click.stop="xxx">按钮</button>
     

     
5. 按键修饰符

   <div id="app">
       <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
     </div>
   

4、双向绑定指令 v-model

<div id="app">
    <p>用户的名字是：{{ username }}</p>
    <input type="text" v-model="username">
    
    <hr>
    <select v-model="city">
      <option value="">请选择城市</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
    </select>
  </div>

1. input 输入框
   • type="radio"
   • type="checkbox"
   • type="xxxx"
2. textarea
3. select

语法：

 <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>

5、 条件渲染指令 v-if v-show 

1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
   • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
   • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

v-if 指令在使用的时候，有两种方式：

1. 直接给定一个布尔值 true 或 false

   <p v-if="true">被 v-if 控制的元素</p>
   

2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

   <p v-if="type === 'A'">良好</p>
   

 6 、列表渲染指令 v-for

• list 是待循环的数组
•  item 是被循环的每一项

<tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>

vue过滤器 

 <div id="app">
    <p>message 的值是：{{ message | capi }}</p>
  </div>

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js'
      },
      // 过滤器函数，必须被定义到 filters 节点之下
      // 过滤器本质上是函数
      filters: {
        // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
        capi(val) {
          // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
          // val.charAt(0)
          const first = val.charAt(0).toUpperCase()
          // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
          const other = val.slice(1)
          // 强调：过滤器中，一定要有一个返回值
          return first + other
        }
      }
    })
  </script>

2、 私有过滤器和全局过滤器

 // 使用 Vue.filter() 定义全局过滤器
    Vue.filter('capi', function (str) {
      const first = str.charAt(0).toUpperCase()
      const other = str.slice(1)
      return first + other + '~~~'
    })

 连续调用多个过滤器

过滤器传参

第一个参数已经固定，传参只能在第二个

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

watch 侦听器

语法格式如下：

 <div id="app">
    <input type="text" v-model="username">
  </div>
 
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal,oldVal) {
         console.log(neVal,oldVal)
         
        }
      }
    })
  </script>

1、使用 watch 检测用户名是否可用 

语法：

watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal) {
          if (newVal === '') return
          // 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
          $.get('请求url/' + newVal, function (result) {
            console.log(result)
          })
        }
      }

2、侦听器的格式

1. 方法格式的侦听器
   • 缺点1：无法在刚进入页面的时候，自动触发！！！
   • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦器！！！
2. 对象格式的侦听器
   • 好处1：可以通过 immediate 选项，让侦听器自动触发！！！
   • 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

对象侦听器

immediate 选项语法：

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
        }
      }
    })
  </script>

deep 选项   

语法：  深度侦听   、  侦听的是对象的子属性的变化

 <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户的信息对象
        info: {
          username: 'admin',
          address: {
            city: '北京'
          }
        }
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        /* info: {
          handler(newVal) {
            console.log(newVal)
          },
          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
          deep: true
        } */
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username'(newVal) {
          console.log(newVal)
        }
      }
    })
  </script>

 计算属性

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性，都要定义到 computed 节点之下
      // 计算属性在定义的时候，要定义成“方法格式”
      computed: {
        // rgb 作为一个计算属性，被定义成了方法格式，
        // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    });

1、计算属性的特点

特点：

1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可

好处：

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

vue-cli 的使用 

1、安装和使用

 选择2.X

 选择

<script>
// 默认导出。这是固定写法！
export default {
  // data 数据源
  // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。
  // 注意：组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中，可以定义数据
    return {
      username: 'admin'
    }
  },
  methods: {
    chagneName() {
      // 在组件中， this 就表示当前组件的实例对象
      console.log(this)
      this.username = '123'
    }
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  // 当前组件中的过滤器
  filters: {}
}
</script>

<style lang="less">
.test-box {
  background-color: pink;
  h3 {
    color: red;
  }
}
</style>

import Left from '@/components/Left.vue'

  // 2. 注册组件
  components: {
    Left,
    Right,
    Test
  }

<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3. 以标签形式，使用注册好的组件 -->
      <Left></Left>
      <Right></Right>
    </div>

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
//参数一：注册名称 参数二：需要注册全局的哪个组件
Vue.component('MyCount', Count)

props: ['自定义属性']

<MyCount :init="6"></MyCount>

data() {
    return {
      // 把 props 中的 init 值，转存到 count 上
      count: this.init
    }
  }

props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },

 解决组件样式冲突的问题

<style lang="less" scoped>

/deep/ 样式穿透

​​​​​​​

如果给当前组件的 style 节点添加了 scoped 属性，则 当前组件的样式对其子组件是不生效的 。如果想让某些样 式对子组件生效，可以使用 /deep/ 深度选择器 。

// h5[data-v-3c83f0b7]
// [data-v-3c83f0b7] h5
 
// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {
  color: pink;
}

​​​​​​​注意：/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/

 7、组件之间的数据共享

组件之间的关系

1. 父子关系
2. 兄弟关系

父子组件之间的数据共享又分为：

① 父 -> 子 共享数据 ：父组件向子组件共享数据需要使用 自定义属性

//父组件
<Left :msg="message" :user="userinfo"></Left>
 
 
data() {
    return {
      message: 'hello',
      userinfo: { name: 'zs', age: 18 },
     
    }

//子组件
<p>msg 的值是：{{ msg }}</p>
    <p>user 的值是：{{ user }}</p>
 
 
 
props: ['msg', 'user']
 
 

② 子 -> 父 共享数据 ：子组件向父组件共享数据使用 自定义事件

//子组件
export default {
  data() {
    return {
      // 子组件自己的数据，将来希望把 count 值传给父组件
      count: 0
      
    }
  },
 
methods: {
    add() {
      // 让子组件的 count 值自增 +1
      this.count += 1
      // 把自增的结果，传给父组件   定义事件numchange名字
      this.$emit('numchange', this.count)
    }
  }

 //父组件
 
<Right @numchange="getNewCount"></Right>
 
data() {
    return {
   
      // 定义 countFromSon 来接收子组件传递过来的数据
      countFromSon: 0
    }
  },
 
methods: {
    // 获取子组件传递过来的数据
    getNewCount(val) {
      console.log('numchange 事件被触发了！', val)
      this.countFromSon = val
    }
  }

兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus 。

EventBus 的使用步骤

1.  创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

   import Vue from 'vue'
    
   export default new Vue()
   

2.  在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

   <button @click="send">发给 Right</button>
    
   // 1. 导入 eventBus.js 模块
   import bus from './eventBus.js'
    
   export default {
     data() {
       return {
         str: `hello`
       }
     },
     methods: {
       send() {
         // 2. 通过 eventBus 来发送数据
         bus.$emit('share', this.str)
       }
     }
   

3.  在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

   // 1. 导入 eventBus.js 模块
   import bus from './eventBus.js'
    
   export default {
     data() {
       return {
         msgFromLeft: ''
       }
     },
     created() {
       // 2. 为 bus 绑定自定义事件
       bus.$on('share', val => {
         this.msgFromLeft = val
       })
     }
   }
   

 组件的生命周期

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

生命周期 & 生命周期函数

从 Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。 。

生命周期函数 ：是由 vue 框架提供的 内置函数 ，会伴随着组件的生命周期， 自动按次序执行 。

注意： 生命周期 强调的是 时间段 ， 生命周期函数 强调的是 时间点 。

组件生命周期函数的分类

https://cn.vuejs.org/v2/guide/instance.html# 生命周期图示

 // created 生命周期函数，非常常用。
    // 经常在它里面，调用 methods 中的方法，请求服务器的数据。
    // 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！