112.【Vue-细刷-03】(四)

简介: 112.【Vue-细刷-03】

4.Vue中使用ref的Dom节点

  1. v-model: 获取的是值

School.vue

<template>
    <div>
        <h2>学校名: {{name}}</h2>
        <h2>学校地址: {{address}}</h2>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name:'长春工业大学',
            address:'净月高新经济区'
        }
    },
}
</script>
<style>
h2{
    background-color: blue;
}
</style>

App.vue

<template>
  <div>
    <button @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签 -->
    <input type="text" v-model="keyWords"/>
    <School></School>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
export default {
    // 局部注册组件
    components:{
        School
    },
methods:{
      showData(){
        alert(this.keyWords)
      }
    },
    data() {
      return {
        keyWords:''
      }
    },
}
</script>
<style>
</style>

main.js

import  Vue  from 'vue'  // 引入阉割版本的vue
import  App  from './App.vue' // 引入App.vue组件
new Vue({
    render:h=>h(App)
}).$mount('#app');

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 能够获得更好的浏览器兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 做移动端需要添加的 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 网站图标定制路径 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 自动读取包下package.json的名字 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app">
      <App></App>
    </div>
  </body>
</html>

如果运行的时候显示:

Vue报错“Component name “School“ should always be multi-word”

vue.config.js代码全选修改成如下: 关闭语法检查

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave:false // 关闭语法检查
})

  1. ref-> 这里获取的是Dom节点

我们打印this发现是VC的实列对象。这里面存在着一个$refs的原生属性。是一个节点

其他的不更改,我们只负责更改App.vue组件

<template>
  <div>
    <button @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 -->
    <input type="text" ref="keyWords"/>
    <School></School>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
export default {
    // 局部注册组件
    components:{
        School
    },
methods:{
      showData(){
        console.log(this.$refs.keyWords.value)  // 通过ref获取值
      }
    },
}
</script>
<style>
</style>

通过DOM节点获取文本框的value值

通过dom节点获取按钮的value值

App.vue

<template>
  <div>
    <button ref="btn" @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 -->
    <input type="text" ref="keyWords"/>
    <School></School>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
export default {
    // 局部注册组件
    components:{
        School
    },
methods:{
      showData(){
        console.log(this.$refs.btn.innerText)
      }
    },
}
</script>
<style>
</style>

  1. 举列子: 点击按钮获取焦点
<template>
  <div>
    <!-- 
        ref的使用方式:
          1.标签中直接编写 ref="xxx"
          2.通过this.$refs.xxx获取Dom节点
          3.备注:
            (1).若给html内置标签打ref,则获取到的是真实地Dom节点
            (2).若给组件标签打ref,则获取到地是组件实列对象。
     -->
    <button ref="btn" @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 -->
    <input type="text" ref="keyWords"/>
    <School></School>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
export default {
    // 局部注册组件
    components:{
        School
    },
methods:{
      showData(){
        this.$refs.keyWords.focus();
      }
    },
}
</script>
<style>
</style>

5.Vue中的props

App.vue: 主要作用是: 创建data

<template>
  <div>
    <!-- 
        ref的使用方式:
          1.标签中直接编写 ref="xxx"
          2.通过this.$refs.xxx获取Dom节点
          3.备注:
            (1).若给html内置标签打ref,则获取到的是真实地Dom节点
            (2).若给组件标签打ref,则获取到地是组件实列对象。
     -->
    <button ref="btn" @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 -->
    <input type="text" ref="keyWords"/>
    <School :username1="username"/>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
export default {
    // 局部注册组件
    components:{
        School
    },
methods:{
      showData(){
        this.$refs.keyWords.focus();
      }
    },
data() {
  return {
    username:'马自达'
  }
},    
}
</script>
<style>
</style>

School.vue: 声明props对象用来接受数据

1. 全面写法
    // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值
    props:{
        // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致
      username1:{
        type:String,  // 接受地类型
        required:true, // 是否必须要接受
        default:'宝马' // 假如没有数据,默认值就是宝马
      }
    }
2.精简写法1:  只限制类型
props:{
  username1:String
}   
3.精简写法2:  什么都不限制
props:['username1'] 
<template>
    <div>
        <h2>学校名: {{name}}</h2>
        <h2>学校地址: {{address}}</h2>
        <h2>我收取的名字是:{{username1}}</h2>
    </div>
</template>
<script>
export default {
    data() {
        console.log('school',this)
        return {
            name:'长春工业大学',
            address:'净月高新经济区'
        }
    },
    // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值
    props:{
        // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致
      username1:{
        type:String,  // 接受地类型
        required:true, // 是否必须要接受
        default:'宝马' // 假如没有数据,默认值就是宝马
      }
    }
}
</script>
<style>
h2{
    background-color: blue;
}
</style>

6.Vue的作用域(Scope)

  1. 汇总组件和其中一个子组件无颜色,另一个有颜色。

子组件: wecome.vue: 无颜色

<template>
   <div>
    <h2 class="demo">您好,欢迎来welcome页面</h2>
   </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

子组件:school.vue 有颜色

<template>
    <div>
        <h2 class="demo">学校名: {{name}}</h2>
        <h2>学校地址: {{address}}</h2>
        <h2>我收取的名字是:{{username1}}</h2>
    </div>
</template>
<script>
export default {
    data() {
        console.log('school',this)
        return {
            name:'长春工业大学',
            address:'净月高新经济区'
        }
    },
    // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值
    props:{
        // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致
      username1:{
        type:String,  // 接受地类型
        required:true, // 是否必须要接受
        default:'宝马' // 假如没有数据,默认值就是宝马
      }
    }
}
</script>
<style>
    .demo{
        background-color: rgb(41, 210, 94);
    }
</style>

汇总组件: App.vue 无颜色

<template>
  <div>
    <h2 class="demo">您好,我是App.vue</h2>
    <!-- 
        ref的使用方式:
          1.标签中直接编写 ref="xxx"
          2.通过this.$refs.xxx获取Dom节点
          3.备注:
            (1).若给html内置标签打ref,则获取到的是真实地Dom节点
            (2).若给组件标签打ref,则获取到地是组件实列对象。
     -->
    <button ref="btn" @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 -->
    <input type="text" ref="keyWords"/>
    <School :username1="username"/>
    <br>
    <Wecome/>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
     import Wecome from './components/Wecome.vue'
export default {
    // 局部注册组件
    components:{
        School,
        Wecome
    },
methods:{
      showData(){
        this.$refs.keyWords.focus();
      }
    },
data() {
  return {
    username:'马自达'
  }
},    
}
</script>
<style>
</style>

  1. 汇总的无颜色,其余子组件的有颜色

wecome.vue组件也添加颜色。即两子组件都有颜色

<template>
   <div>
    <h2 class="demo">您好,欢迎来welcome页面</h2>
   </div>
</template>
<script>
export default {
}
</script>
<style>
    .demo{
        background-color: brown;
    }
</style>

后引入的会覆盖

  1. 汇总组件和其余组件都有样式
<template>
  <div>
    <h2 class="demo">您好,我是App.vue</h2>
    <!-- 
        ref的使用方式:
          1.标签中直接编写 ref="xxx"
          2.通过this.$refs.xxx获取Dom节点
          3.备注:
            (1).若给html内置标签打ref,则获取到的是真实地Dom节点
            (2).若给组件标签打ref,则获取到地是组件实列对象。
     -->
    <button ref="btn" @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 -->
    <input type="text" ref="keyWords"/>
    <School :username1="username"/>
    <br>
    <Wecome/>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
    import Wecome from './components/Wecome.vue'
export default {
    // 局部注册组件
    components:{
        School,
        Wecome
    },
methods:{
      showData(){
        this.$refs.keyWords.focus();
      }
    },
data() {
  return {
    username:'马自达'
  }
},    
}
</script>
<style>
  .demo{
    background-color: burlywood;
  }
</style>

  1. 解决办法

我们只需要在style中添加一个作用域: scoped

切记如果我们设计的是公共的样式,千万不要加scoped.

7.Vue组件注册名与Vue组件引用名

  1. 组件注册名与组件引用名要一致
<template>
  <div>
    <h2 class="demo">您好,我是App.vue</h2>
    <!-- 
        ref的使用方式:
          1.标签中直接编写 ref="xxx"
          2.通过this.$refs.xxx获取Dom节点
          3.备注:
            (1).若给html内置标签打ref,则获取到的是真实地Dom节点
            (2).若给组件标签打ref,则获取到地是组件实列对象。
     -->
    <button ref="btn" @click="showData">点我提示数据</button>
    <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 -->
    <input type="text" ref="keyWords"/>
    <Jsxs :username1="username"/>
    <br>
    <Wecome/>
  </div>
</template>
<script>
    // 引入School组件 
    import School from './components/School.vue'
    import Wecome from './components/Wecome.vue'
export default {
    // 局部注册组件
    components:{
        Jsxs:School,
        Wecome
    },
methods:{
      showData(){
        this.$refs.keyWords.focus();
      }
    },
data() {
  return {
    username:'马自达'
  }
},    
}
</script>
<style scoped>
  .demo{
    background-color: burlywood;
  }
</style>

我们引入和注册组件的时候,需要对应。如果引用了不注册也会报错

可以给注册的组件起别名,起别名之后。我们引用组件的时候一定要用别名否则报错

我们发现vue的插件中也会改变,不利于工作的开展

  1. 改变vue插件中的数据

我们只需要在对应的组件与data函数同级下添加一个name属性接口。不是App.vue这个组件中

<template>
    <div>
        <h2 class="demo">学校名: {{name}}</h2>
        <h2>学校地址: {{address}}</h2>
        <h2>我收取的名字是:{{username1}}</h2>
    </div>
</template>
<script>
export default {
    name: 'School',
    data() {
        console.log('school',this)
        return {
            name:'长春工业大学',
            address:'净月高新经济区'
        }
    },
    // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值
    props:{
        // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致
      username1:{
        type:String,  // 接受地类型
        required:true, // 是否必须要接受
        default:'宝马' // 假如没有数据,默认值就是宝马
      }
    }
}
</script>
<style scoped>
    .demo{
        background-color: rgb(41, 210, 94);
    }
</style>

发现不会改变

8.关于语法检查的配置 ⭐⭐

下面的注解: 意思就是对它下面仅以行的这个语法关闭语法检查

/*eslint-disable-next-line*/
 const a=1  // 我们只负责定义没有使用,发现会报错

对某一个组件关闭语法检查

/*eslint-disable*/
对下面的语法都关闭语法检查

对整个vue组件关闭语法检查

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave:false // 关闭语法检查
})

目录
打赏
0
0
0
0
15
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
155 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
69 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
76 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
79 1
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
112 58
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
68 1
vue学习第一章

热门文章

最新文章