Vue学习笔记---------Vue入门（三）

最新推荐文章于 2024-07-19 14:16:29 发布

神秘的帅哥

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量163

点赞数

分类专栏： Vue 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/qq_50680212/article/details/125491188

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue学习笔记---------Vue入门（三）

收集表单数据

若：，则v-model收集的是value值，用户输入的就是value值
若：，则v-model收集的是value值，切要给标签配置value值
若：
- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 配置input的value属性
  - v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效数字
- trim：输入首尾空格过滤

过滤器*

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
1. 过滤器也可以接收额外参数、多个过滤器也可以串联
2. 并没有改变原本的数据, 是产生新的对应的数据

内置指令

v-text指令

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

v-cloak指令

本质是一个特色属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了

以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

<h2 v-once>初次数据：{{n}}</h2>
<h2>{{n}}</h2>
<button @click="n++">点我n++</button>

v-pre指令

跳过其所在节点的编译过程

可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<h2 v-pre>hai</h2>
<h2 v-pre v-once>初次数据：{{n}}</h2>
<h2>{{n}}</h2>
<button v-pre @click="n++">点我n++</button>

自定义指令

定义语法：
1. 局部指令：局部指令：new Vue( {directives:{指令名:配置对象} } ) 或 new Vue( {directives{指令名:回调函数} } )
2. 全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调：
1. bind：指令与元素成功绑定时调用
2. inserted：指令所在元素被插入页面时调用
3. update：指令所在模板结构被重新解析时调用

备注：

指令定义时不加v-，但使用时要加v-
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

directives:{
    big(element,binding){
        element.innerText = binding.value * 10
    },
	fbind:{
        bind(element,binding){
            element.value = binding.value
        },
		inserted(element,binding){
            element.focus()
		},
		update(element,binding){
            element.value = binding.value
		}
	}
}

生命周期

又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内荣是程序员根据需求编写的
生命周期函数中的this指向是vm 或组件实例对象

常用的生命周期钩子：

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义时间会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程

非单位件组件

组件理解

用来实现局部(特定)功能效果的代码集合(html/css/js/image……)

Vue中使用组件的三大步骤：

定义组件（创建组件）
注册组件
使用组件（写组件标签）

如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
- el不要写，为什么？--------最终所有的组件都要经过一个vm的管理，由vm中的el决定服务拿个容器
- data必须要写成函数，为什么？---------避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构

如何注册组件？

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component(‘组件名’，组件)

编写组件标签：

<school></school>

<div id="app">
   <!-- 第三步：编写组件标签 -->
   <school></school>
</div>
<script>
   Vue.config.productionTip = false
       //第一步：创建school组件
   const school = Vue.extend({
      template:`
               <div>
               <h2>hello,{{ name }}</h2>
               <h2>hello,{{ address }}</h2>
               </div>
      `,
      data(){
          return {
              name:'ycu',
             address: 'yc'
          }
      }
   })
       //第二步：注册组件（全局注册）
   // Vue.component('sc',school)
   new Vue({
      el:'#app',
           //第二步：注册组件（局部注册）
      components:{
          school
      }
   })
</script>

几个注意点

关于组件名：
1. 一个单词组成：
  1. 第一种写法（首字母小写）：school
  2. 第二种写法（首字母大写）：School
2. 多个单词组成：
  1. 第一种写法（kebab-case命名）：my-school
  2. 第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
3. 备注：
  1. 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
  2. 可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签：
1. 第一种写法：
2. 第二种写法：
3. 备注：不适用脚手架时，会导致后续组件不能渲染
一个简写方式：
1. const school = Vue.extend(options) 可简写为：const school = options

关于VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的，new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
关于this指向：
1. 组件配置中：
  
  data函数、methods中的函数、watch中的函数、computed中的函数它们的this均【VueComponent实例对象】
2. new Vue(options)配置中：
  
  data函数、methods中的函数、watch中的函数、computed中的函数它们的this均【Vue实例对象】
VueComponent的实例对象，简称vc（也可称之为：组件实例对象）

Vue的实例对象，简称vm