前端学习--Vue(3)初始化vue项目_vue3初始化项目

一、侦听器

1.1 概念

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

    <div id="app">
        <span>字典查询</span><input type="text" v-model.lazy="uname">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:''
            },
            watch:{
                //要监听哪个数据的变化，就把该数据名作为函数名
                uname(nVal,oVal){
                    console.log(`uname的值发生变化,旧值${oVal} 新值${nVal}`)
                    $.get('https://api.oioweb.cn/api/txt/dict?text='+nVal,function(res){
                        console.log(res)
                    })
                }
            }
        })
    </script>

1.2 对象侦听器

1.2.1 immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使 用 immediate 选项

1.2.2 deep选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，可以侦听对象中每个属性的变化

    <div id="app">
        <span>姓名</span><input type="text" v-model.lazy="uinfo.uname">
        <span>年龄</span><input type="text" v-model.lazy="uinfo.uage">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                uinfo:{
                    uname:'',
                    uage:''
                }
            },
            watch:{
                uinfo:{
                    handler(newV){
                        console.log(newV)
                    },
                    //控制侦听器是否自动触发一次
                    immediate:true,
                    deep:true
                }
            }
        })
    </script>

二、计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。 这个动态计算出来的属性值可以被模板结构或 methods 方法使用

      //声明的时候是方法，使用的时候是属性
      computed:{
        rgb:function(){
            return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

 三、vue-cli

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名 思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能 与交互都在这唯一的一个页面内完成。

3.1 概念

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

3.2 安装使用

npm i -g @vue/cli

进入要创建的目录，然后vue create xxx（项目名）

上下键选择vue版本，按回车（建议选择最后一项，手动选择功能）

 选择babel和css pre-processors

 2.x

 less

 怎么创建第三方插件的配置文件，选第一项独立创建

 存储本次预设，方便下次使用

 成功

 

 项目目录

 3.3 项目的运行流程

通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

 main.js

//导入vue包 得到Vue构造函数
import Vue from 'vue'
//导入App.vue 把模板结构渲染到页面
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  //通过render函数把指定的组件(App)渲染到HTML页面中
  render: h => h(App),
}).$mount('#app') //把index.html中#app的位置用render指定的替换掉 el与其作用相同

四、vue组件

4.1 组件化开发

根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护

4.2 vue组件

vue 中规定：组件的后缀名是 .vue

组成：

template 组件的模板结构

script 组件的行为

style 组件的样式

注意：

template只允许一个根节点

组件中的data不能指向对象,只能是函数

如果要用less语法就给style加上lang="less" 

4.2.1 组件之间的父子关系 

组件被封装好之后，彼此相互独立，不存在父子关系

在使用组件的时候，根据彼此的关系，形成父子关系、兄弟关系

4.3 使用组件的三个步骤

在App.vue中

1.先导入组件

import Left from '@/components/Left'

2. 注册组件

export default {
  components:{
    Left //对象名和对象值一致的简写形式
  }
}

3.在template的根标签中选择位置使用注册好的组件

<Left></Left>

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

在组件A的components节点下，注册了组件F，则F只能用在组件A中

 4.4 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件

import Count from '@/components/Count.vue'
Vue.component('MyCount',Count)

4.5 组件自定义属性props

不同的组件复用，需要不同参数初始值

合理使用props可以极大提高组件的复用性

props是只读的，不要直接修改

<!-- Count.vue -->
<template>
  <div class="container">
    <h3>Count组件</h3>
    <p>{{ init }}</p>
    <button @click="count += 1">加一</button>
    <button @click="show">打印</button>
  </div>
</template>
 
<script>
 
export default {
    //自定义属性，为当前组件设定初始值，只读
    props:['init'],
    data(){
        return{
            //接收到的init转存到count
            count:this.init
        }
    },
    methods:{
        show(){
            console.log(this.count,this.init)
        }
    }
}
</script>
 
<style lang="less">
    .container{
        padding: 0 20px 20px;
        background-color: pink;
        min-height:100px;
        flex:1;
    }
 
</style>

<!-- Left.vue -->
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <!-- v-vind中是js表达式 -->
    <MyCount :init=5></MyCount>
  </div>
</template>
 
<script>
export default {}
</script>
 
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

定义自定义属性的参数 

    init:{
            default: 0, //默认值
            type: Number, //类型校验 String Array Number Object Boolean Date Function Symbol
            requied: true, //表示必传属性
        }

4.6 组件的样式冲突

① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的

② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

给当前组件的每一个标签都加上固定的自定义属性，不同的组件之间自定义属性不同

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题 

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以在该样式前面加上 /deep/ 深度选择器（在父组件中直接设置子组件的样式）