vue侦听器

可以侦听data/computed属性值改变

语法

watch:{
    '被侦听的属性名'(newValue,oldValue){
        
    }
}

代码

  <body>
    <div id="app">
      <input type="text" v-model="name" />
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
      },
      /* 
      目标：侦听name值的改变
      watch:{    '被侦听的属性名'(newValue,oldValue){            }}
      */
      watch: {
        // newValue  当前最新值
        // oldValue   旧值    上一刻值
        name(newValue, oldValue) {
          console.log(newValue, oldValue)
        },
      },
    })
  </script>

想要侦听一个属性变化，使用侦听属性watch

深度侦听和立即执行

侦听复杂类型，或者立即执行侦听函数

语法

watch:{
    '被侦听的属性名':{
        immediate:true，//立即执行
        deep:true, //深度侦听复杂类型变化
        handler(newValue,oldValue){
            
        }
    }
}

@vue/cli脚手架

webpack自己配置环境很麻烦，下载@vue/cli包，用vue命令创建脚手架项目

@vue/cli是vue官方提供的一个全局模块包(vue命令)，此包用于创建脚手架项目

好处

0配置webpack

babel支持、

css，less支持

开发服务器支持

安装

把@vue/cli模块包安装到全局，电脑拥有vue命令，才能创建脚手架工程

全局安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本

vue -V

如果出现版本号，安装成功，否则失败

@vue/cli创建项目启动服务

使用vue命令创建脚手架项目(项目名不能带大写字母，中文和特殊符号)

创建项目

//vue create 是命令  vuecli-demo是文件夹名
vue create vuecli-demo

选择模板

可以上下箭头选择，弄错了ctrl+c 重来

回车，等待生成项目文件夹+文件+下载必须的第三方包

进入脚手架项目，启动内置的热更新本地服务器

cd vuecli-demo

npm run serve
or
yarn serve

启动成功了(底层node+webpack热更新服务)

打开浏览器输入上述地址

@vue/cli目录和代码分析

vuecli-demo       #项目目录
    node_modules  项目依赖的第三方包
    public   静态文件目录
        index.html  但页面的html文件（网页浏览的就是它）
    src  业务文件夹  &****
        assets  静态资源
        components  组件目录
           HelloWorld.vue  欢迎页面的vue代码文件
        APP.vue  整个应用的根组件
        main.js  主入口文件
    .gitignore  git提交忽略的配置
    babel.config.js babel配置
    package.json  依赖包列表
    README.md  项目说明
    vue.config.js vue的配置文件

主要文件及含义

node_modules 下都是下载的第三方包
public/index.html  ---浏览器运行的网页
src/main.js    webpack打包的入口文件
src/App.vue    vue项目入口页面
package.json   依赖包列表文件
vue.config.js vue的配置文件

@vue/cli项目架构了解

知道项目入口，以及代码执行顺序和引入关系

@vue/cli自定义配置

项目中没有webpack.config.js文件，应为@vue/cli用的vue.config.js



module.exports = defineConfig({
  // 覆盖webpack的配置
  devServer: {
    //自定义服务配置
    open: true, //自动打开浏览器
    port: 3000,
  },
  
 })

eslint了解

main.js随便声明一个变量,但是使用，终端和页面都报错了
代码步严谨

解决：

1：手动解决掉错误，后面项目中会讲如何解决

2：暂时关闭eslint检查,在vue.config.js中配置后重启服务

module.exports = defineConfig({
  ...
  lintOnSave: false, // 关闭eslint检查
  transpileDependencies: true,
})

@vue/cli单文件

单vue文件好处，独立作用域互不影响

vue推荐采用.vue文件来开发项目
template里只能有一个根标签
vue文件-独立模块 --作用域互不影响
style配合scoped属性，保证样式只针对当前template内标签生效
vue配合webpack，把他们打包起来插入到index.html

// template 只能有一个根标签  
<template>
  <div>

  </div>
</template>

<script>
  export default {
    
  }
</script>
//  当前组件的样式  设置scoped 可以保证样式只对当前页面有效
<style scoped>

</style>

@vue/cli欢迎界面清理

src/App.vue 默认有很多内容，可以全部删除留下框
assets和components文件夹下一切都删除掉(不要默认的欢迎页面)

Vue-脚手架创建