才吹小雨又须晴 BlogMyTags
Vue3

一. 初识Vue脚手架

  1. src中放源代码，main.js文件是入口文件

  2. 路由是指根据url（页面连接）的不同，展示是不同的内容

  3. VueX可以理解为数据管理框架

二. VueX中改变store数据库中的数据，

  1. 方法1，第一步：调用dispat方法，派发一个action，名字叫做change；
  2. 第二步；感知到change这个action，执行store中的actions下的change方法；
  3. 第三步：提交commit，一个叫做change数据改变；
  4. 第四步；mutation感知到提交的change改变，执行change方法，改变数据。

三.

  1. node_modules：依赖包，可以通过npm intall重新加载。public中是默认的模版。

  2. overflow: hidden; 
    //文字太长的话，不允许换行,超出去的部分变成省略号 
    white-space: nowrap; 
    text-overflow: ellipsis;

    display: flex; 
    //换行展示 flex-wrap: wrap;

  3. scoped：表示样式只对对应的组件有效果

  4. .toFixed(2) 表示数字保留两位小数

    1. <templat> 可以充当占位符，占有一定的位置

  5. 输出：html标签在渲染的时候被解析 <p v-html="html"></p>

  6. z-index 属性设置元素的堆叠顺序，z 轴定义为垂直延伸到显示区的轴

v-for 中的 key 的作用

  • template => VNode（一个节点） => 真实DOM

计算属性computed

  • 任何包含响应式数据的复杂逻辑，都应该使用computed

  • 计算属性是有缓存的

  • 多次使用计算属性时，计算属性中的运算只会执行一次

计算属性的setter和getter

Vue源码内部对传入的是getter还是setter做一个逻辑判断

侦听器watch

  • 在代码逻辑中监听某个数据的变化
  • 不侦听计算属性
  • 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部属性发生的改变是不能侦听)

v-model的基本使用

  • 在代码逻辑中获取到用户提交的数据，创建双向数据绑定。
  • 根据控件类型自动选取正确的方法更新元素

Vue3组件化开发

  • 使用app注册一个全局组件app.component(组件名称，组件对象（有自己的template）)
  • 全局组件: 意味着注册的这个组件可以在任何的组件模板中使用
Vue