Vue学习笔记day05总结

最新推荐文章于 2023-08-23 09:40:24 发布

Gavid-jh

最新推荐文章于 2023-08-23 09:40:24 发布

阅读量243

点赞数

分类专栏： vuejs 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42230550/article/details/84844852

版权

vuejs 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

3. watch、computed 和 methods 之间的对比

4.4 webpack-dev-server 配置命令

4.4.1采用在package.json 文件中配置 script 中的dev（推荐）

4.4.2采用在webpack.config.js文件中的module.exports 进行设置（不推荐）

4.5根据模板页面在内存中生成一个页面（html-webpack-plugin）

4.6 Loader (加载器)

4.6.1 第三方 loader 加载器的配置步骤

4.6.2 Babel

4.7 Render

4.8 webpack 导入 vue 与 script 导入 vue 的区别

4.9 使用 Render 函数渲染指定组件到容器中

4.10 webpack 结合vue使用的总结

4.11 export default 和 export 的使用方法

4.12 webpack 使用 vue-router

4.13 webpack 中，路由嵌套的使用

4.14 webpack 中，组件的style标签的lang属性和scoped属性

4.15 webpack 中，router 的抽离

1.Watch属性

1.1监听文本框数据的变化，出发对应函数

  <div id="app">
    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {},
      watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
        'firstname': function (newVal, oldVal) {
          this.fullname = newVal + '-' + this.lastname
        },
        'lastname': function (newVal) {
          this.fullname = this.firstname + '-' + newVal
        }
      }
    });
  </script>

1.2 监听路由地址的改变

  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!-- 容器 -->
    <router-view></router-view>
  </div>

  <script>
    // 2. 创建子组件
    var login = {
      template: '<h3>这是登录子组件，这个组件是 奔波霸 开发的。</h3>'
    }
    var register = {
      template: '<h3>这是注册子组件，这个组件是 霸波奔 开发的。</h3>'
    }
    // 3. 创建一个路由对象
    var router = new VueRouter({
      routes: [ // 路由规则数组
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相关的类
    })
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router,
      watch: {
        //  this.$route.path
        '$route.path': function (newVal, oldVal) {
          // console.log(newVal + ' --- ' + oldVal)
          if (newVal === '/login') {
            console.log('欢迎进入登录页面')
          } else if (newVal === '/register') {
            console.log('欢迎进入注册页面')
          }
        }
      }
    });
  </script>

2.computed属性

在 computed 中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的，本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性，当作方法去调用
Note1：计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通属性去使用就好了
Note2：只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值
Note3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对计算属性求值；
  <div id="app">
    <input type="text" v-model="firstname"> +
    <input type="text" v-model="middlename"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        middlename: ''
      },
      methods: {},
      computed: {
        'fullname': function () {
          console.log('ok')
          return this.firstname + '-' + this.middlename + '-' + this.lastname
        }
      }
    });
  </script>

3. watch、computed 和 methods 之间的对比

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

4. Webpack

4.1 webpack 的基本概念

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

4.2 webpack的安装

1. 运行`npm i webpack -g`全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行`npm i webpack --save-dev`安装到项目依赖中

4.3 webpack 的基本使用

Webpack 可以做什么事情？
1. webpack 能够处理 JS 文件的互相依赖关系；
2. webpack 能够处理JS的兼容问题，把高级的、浏览器不是别的语法，转为低级的，浏览器能正常识别的语法
webpack打包文件的命令格式： webpack 要打包的文件的路径打包好的输出文件的路径
因为每次打包都要写路径。因此为了简化命令，可以将路径配置到“webpack.config.js”文件中（在根目录），这样打包则只需要一条命令“ webpack ”即可。
当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
2. webpack 就会去项目的根目录中，查找一个叫做 `webpack.config.js` 的配置文件
3. 当找到配置文件后，webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
4. 当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；
webpack打包命令每次运行太繁琐，所以我们采用 webpack-dev-server 这个工具，来实现自动打包编译的功能
1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2.安装完毕后，这个工具的用法，和 webpack 命令的用法，完全一样
3.由于，我们在项目中，是本地安装的 webpack -dev-server , 所以无法把它当作脚本命令在powershell 终端中直接运行。（只有哪些安装到全局 -g 的工具，才能正在终端进行正常执行）
4.note：webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装webpack
5.webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了电脑的内存中，根本找不到这个打包好的bundle.js
6.我们可以认为， webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了项目的根目录中，虽然我们看不到它，但是可以认为，和dist 、src、node_modules 平级，有一个看不见的文件，叫做 bundle.js
const path = require('path')
// 启用热更新的 第2步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
  // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  },
  devServer: { // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    //  --open --port 3000 --contentBase src --hot
    open: true, // 自动打开浏览器
    port: 3000, // 设置启动时候的运行端口
    contentBase: 'src', // 指定托管的根目录
    hot: true // 启用热更新 的 第1步
  },
  plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
    new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
      template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
      filename: 'index.html' // 指定生成的页面的名称
    })
  ],
  module: { // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
    ]
  }
}

4.4 webpack-dev-server 配置命令

4.4.1采用在package.json 文件中配置 script 中的dev（推荐）

如何让 webpack 自动打包好项目后，自动打开浏览器：
如何让 webpack 自动打包好项目后，设置自动打开浏览器的端口号：
如何让 webpack 自动打包好项目后，设置自动打开浏览器，默认显示src下的内容：

如何让 webpack 自动打包好项目后，实现热部署 & 浏览器异步刷新样式，但是这种方法无法实现 js 代码的刷新

4.4.2采用在webpack.config.js文件中的module.exports 进行设置（不推荐）

第一步

  devServer: { // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    //  --open --port 3000 --contentBase src --hot
    open: true, // 自动打开浏览器
    port: 3000, // 设置启动时候的运行端口
    contentBase: 'src', // 指定托管的根目录
    hot: true // 启用热更新 的 第1步
  },

第二步

// 启用热更新的 第2步
const webpack = require('webpack')

第三步

  plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
  ],

4.5根据模板页面在内存中生成一个页面（html-webpack-plugin）

Note:当使用 html-webpack-plugin 之后，我们不再需要手动处理 bundle.js 的引用路径了，因为这个插件，已经帮我们自动创建了一个合适的 script , 并且，引用了正确的路径

1.安装html-webpack-plugin

npm html-webpack-plugin -D

2.导入在内存中生成 HTML 页面的插件

// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

3.配置节点的插件

  plugins: [ // 配置插件的节点
    new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
      template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
      filename: 'index.html' // 指定生成的页面的名称
    })
  ],

4.6 Loader (加载器)

Note：webpack, 默认只能打包处理 JS 类型的文件，无法处理其它的非 JS 类型的文件；如果要处理非JS类型的文件，我们需要手动安装一些合适第三方 loader 加载器；

4.6.1 第三方 loader 加载器的配置步骤

1.安装 cnpm i style-loader css-loader -D (导入CSS loader)
安装 cnpm i less-loader -D (导入less loader)
安装 cnpm i sass-loader -D (导入sass-loader) (使用npm一般装不上sass-loader)
安装 cnpm i url-loader file-loader -D (导入url-loader file-loader 来处理文件 URL 路径 )
2.打开 webpack.config.js 这个配置文件，在里面，新增一个配置节点，叫做 module, 它是一个对象；在这个 module 对象身上，有个 rules 属性，这个 rules 属性是个数组；这个数组中，存放了，所有第三方文件的匹配和处理规则；
  module: { // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  }
Note： webpack 处理第三方文件类型的过程：
1. 发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方 loader 规则
2. 如果能找到对应的规则，就会调用对应的 loader 处理这种文件类型；
3. 在调用loader 的时候，是从后往前调用的；
4. 当最后的一个 loader 调用完毕，会把处理的结果，直接交给 webpack 进行打包合并，最终输出到 bundle.js 中去

4.6.2 Babel

在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把高级语法转为低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
通过 Babel ，可以帮我们将高级的语法转换为低级的语法
// class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式
class Person {
  // 使用 static 关键字，可以定义静态属性
  // 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
  // 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
  static info = { name: 'zs', age: 20 }
}

// 访问 Person 类身上的  info 静态属性
console.log(Person.info)

1. 在 webpack 中，可以运行如下两套命令，安装两套包，去安装 Babel 相关的loader功能：
1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个新的匹配规则：
2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
2.2 注意：在配置 babel 的 loader规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
2.2.1 如果不排除 node_modules，则Babel 会把 node_modules 中所有的第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
2.2.2 哪怕，最终，Babel 把所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
3. 在项目的根目录中，新建一个叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范：不能写注释，字符串必须用双引号
3.1 在 .babelrc 写如下的配置：大家可以把 preset 翻译成【语法】的意思
{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}
4. 了解：目前，我们安装的 babel-preset-env, 是比较新的ES语法，之前，我们安装的是 babel-preset-es2015, 现在，出了一个更新的语法插件，叫做 babel-preset-env ，它包含了所有的和 es***相关的语法

4.7 Render

Note：return 的结果，会替换页面中 el 指定的那个容器（也就是说 login 组件会将 app 的那个div 全部替换）

  <div id="app">
    <p>444444</p>
  </div>
  <script>
    var login = {
      template: '<h1>这是登录组件</h1>'
    }
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
        return createElements(login)
        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
      }
    });
  </script>

4.8 webpack 导入 vue 与 script 导入 vue 的区别

Note：在 webpack 中，使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式；
包的查找规则：
1. 找项目根目录中有没有 node_modules 的文件夹
2. 在 node_modules 中根据包名，找对应的 vue 文件夹
3. 在 vue 文件夹中，找一个叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
所以，导入vue功能完整的方法有3种：
修改 package.json 文件中的 main 属性
导入时直接指定完整文件路径： import Vue from '../node_modules/vue/dist/vue.js'
在webpack.config.js 文件种添加如下代码：
  resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
       "vue$": "vue/dist/vue.js"
    }
  }

4.9 使用 Render 函数渲染指定组件到容器中

默认，webpack 无法打包 .vue 文件，需要安装相关的loader：
cnpm i vue-loader vue-template-compiler -D
在配置文件中，新增loader哦配置项 { test:/\.vue$/, use: 'vue-loader' }
vm 实例中的 render 函数可以实现把一个组件（ .vue 文件）放到页面中去展示。
// 1. 导入 login 组件
import login from './login.vue'
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  render: c => c(login)
})

4.10 webpack 结合vue使用的总结

总结梳理： webpack 中如何使用 vue :

1. 安装vue的包： cnpm i vue -S
2. 由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中，导入 vue 模块 import Vue from 'vue'
4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
5. 使用 import login from './login.vue' 导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

4.11 export default 和 export 的使用方法

在 .vue 文件中也可以定义组件自己的 data 、method 属性

<script>
export default {
  data() {
    // 注意：组件中的 data 必须是 function
    return {
      msg: "123"
    };
  },
  methods: {
    show() {
      console.log("调用了 login.vue 中的 show 方法");
    }
  }
};
</script>

// 在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
name: 'zs',
age: 20
}

export default info

// 注意： export default 向外暴露的成员，可以使用任意的变量来接收
// 注意：在一个模块中，export default 只允许向外暴露1次
// 注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员

export var title = '小星星'
export var content = '哈哈哈'

// 注意：使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做【按需导出】
// 注意： export 可以向外暴露多个成员，同时，如果某些成员，我们在 import 的时候，不需要，则可以不在 {} 中定义
// 注意：使用 export 导出的成员，必须严格按照导出时候的名称，来使用 {} 按需接收；
// 注意：使用 export 导出的成员，如果就想换个名称来接收，可以使用 as 来起别名；

4.12 webpack 使用 vue-router

注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染组件，渲染出来的组件，只能放到 el: '#app' 所指定的元素中；
Account 和 GoodsList 组件，是通过路由匹配监听到的，所以，这两个组件，只能展示到属于路由的 <router-view></router-view> 中去；

在 main.js 中的代码：

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)

// 导入 app 组件
import app from './App.vue'
// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // account  goodslist
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router // 4. 将路由对象挂载到 vm 上
})

App.vue

<template>
  <div>
    <h1>这是 App 组件</h1>
    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">Goodslist</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
</script>
<style>
</style>

Account.vue (Goodslist.vue类似）

<template>
  <div>
    <h1>这是 Account 组件</h1>
  </div>
</template>
<script>
</script>
<style>
</style>

index.html (只创建了一个容器)

<body>
  <!-- 这是容器 -->
  <div id="app">
  </div>
</body>

4.13 webpack 中，路由嵌套的使用

在routes 中对应的路由上添加 children 属性，来配置子路由

var router = new VueRouter({
  routes: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

4.14 webpack 中，组件的style标签的lang属性和scoped属性

scoped属性：将本style中的样式只作用到本组件中（只要style是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性）
lang属性：普通的 style 标签只支持普通的样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性
<style lang="scss" scoped>
/* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
// 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
body {
  div {
    font-style: italic;
  }
}
</style>

4.15 webpack 中，router 的抽离

import VueRouter from 'vue-router'
// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

// 把路由对象暴露出去
export default router

Gavid-jh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记day05总结

目录1.Watch属性1.1监听文本框数据的变化，出发对应函数 1.2 监听路由地址的改变2.computed属性3. watch、computed 和 methods 之间的对比4. Webpack 4.1 webpack 的基本概念4.2 webpack的安装4.3 webpack 的基本使用 4.4 webpack-dev-server 配置命令...
复制链接

扫一扫