attribute和$attrs

字数统计: 284字   |   阅读时长: 1分

inherirAttrs

Attribute继承问题
首先，attribute是我们在父组件中定义了非prop的Attribute，该属性没有定义对应的props或者emits。

  • 常见的包括class,style,id属性等
    例如我们在父组件中定义了如下的值：
    <show-message class="beichen" id="beichenzero"></show-message>
    这里的class="beichen"和id="beichenzero"就是非prop的Attribute
    如果我们的子组件中包含有根组件,例如<div></div>。
    运行项目时，我们就会看到它自动变成<div class="beichen" id="beichenzero"></div>,添加了class属性和id属性。

当我们不想出现这种特殊的情况是，我们可以在子组件中添加：
inheritAttrs: flase,代码，这就等于时禁用了，inheritAttrs默认的值时true。

more >>

展开全文 >>

vue-商品切换案例

字数统计: 536字   |   阅读时长: 2分

商品切换小案例

思路

1.父组件中定义titles数组
2.利用父传子的方式将titles数组传给子组件
3.子组件中接收，利用v-for指令遍历数组，动态绑定key。
4.添加class，动态绑定class，使点击的那个标题处于活跃状态，利用index和自己定义的currentIndex的关系。
5.props可以限定父组件传过来的值使什么，并添加默认值。
6.通过@click的方式，将index的值通过子传父传递父组件，同时在点击事件传值的同时将index的值赋给currentsIndex。
7.定义contents数组，并再次定义currentIndex，默认值为0。
8.最后监听子组件的传递并执行函数titleCLick，将index的值也赋值给currentIndex，目的是为了让title和content的变化是一致的。

  • 代码如下
more >>

展开全文 >>

vue-组件传值

字数统计: 395字   |   阅读时长: 1分

禁用Attribute继承和多根节点

父(组件)传子(组件)时

父组件中有class、id等元素的时候
在需要传值给子组件时
子组件中:
<h2 :="$attrs">{{title}}</h2><h2 :class="$attrs.class">{{title}}</h2>
父组件中:
<show-message class="beichen" id="beichenzero" title="哈哈哈" content="嘿嘿嘿"></show-message

子组件传递信息给父组件

逻辑关系：
在子组件中定义需要传递的name -> 通过$emit来传递。

more >>

展开全文 >>

vue-watch

字数统计: 259字   |   阅读时长: 1分

1. 监听器/侦听器的基本使用watch

1
2
3
4
5
6
7
8
9
10
watch: {
    // message是需要监听的data中的属性名称
    // newValue是变化后的新值
    // oldValue是变化前的旧值
    message: function(newValue, oldValue) {
        // console.log("新值", newValue, "旧值" ,oldValue);
        this.queryAnwser();
        // 监听到变化后就执行搜索答案的方法
    }
}

其他的代码就没有放上去了，这里主要说明watch的用法。

2. 监听器的配置选项

默认情况下侦听器只会侦听数据本身的改变（对于内部发生的改变是监听不到的）
深度侦听(deep) / 立即执行(immediate)（一定会执行一次）
depp: true 用于表示进行深度监听。
immediate: true 用于表示在加载时就执行一次，无论被监听的值是否改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
watch: {
  // 语法糖
  info(newValue, oldValue){
    console.log("new",newValue, "old",oldValue);
  }
  // 普通写法
  info: {
    handler: function(newInfo, oldInfo){
      console.log("new",newInfo, "old",oldInfo);
    },
    deep: true,//确认为深度监听
    immediate: true, //立即执行
  }
}

展开全文 >>

electron出使用

字数统计: 76字   |   阅读时长: 1分

利用脚手架创建一个新的项目

  1. 创建一个electron的基础模板
    1
    npm create electron-app my-app
  2. 进入项目目录下
    1
    cd my-app
  3. 运行项目
    1
    npm start

打包程序

  1. 打包程序，变为可运行exe程序
    1
    npm run make
  2. 打包程序，变为可运行exe程序
    1
    npm run dist

展开全文 >>

markdown常用语法

字数统计: 644字   |   阅读时长: 2分

本文主要记录markdown的基本语法，更多详细的语法请查看markdown官网

一、标题等级

代码

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

more >>

展开全文 >>

v-model的基本使用

字数统计: 166字   |   阅读时长: 1分

v-model的基本使用

  • v-model三种常见的修饰符默认是string
  • number的修饰符主要是将string转化成number类型
  • trim修饰符主要是去除内容前后的空格
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <input type="text" v-model.trim="message">
      // <input type="text" v-model.number="message">
      <h2>{{message}}</h2>
      <button @click="showType()">查看类型</button>
      <button @click="showCon()">查看内容</button>
    </template>

    methods: {
      showType() {
        console.log(this.message, typeof this.message);
      },
      showCon() {
        console.log(this.message);
      }
    }
    仅截取部分核心代码
    EX:
    217498daowh 值为217498 类型为number
    njdkhaw3431 值为njdkhaw3431 类型为string

展开全文 >>

vite的基本使用

字数统计: 387字   |   阅读时长: 1分

vite安装

1.安装

  • 全局安装
    npm install vite -g
  • 局部安装
    npm install vite -D
    npx vite

vite对css的处理

默认对css的加载

  • 1.安装less
    npm install less -D
  • 2.安装postcss
    npm install postcss -D
    还需要安装
    npm install postcss-preset-env -D
more >>

展开全文 >>

nvm的安装-windows

字数统计: 400字   |   阅读时长: 1分

下载nvm的安装包

一定要下载1.1.7版本的nvm！
(目前最新是1.1.9版本,可以使用1.1.9,也比较稳定)

对了下载完找到nvm的安装目录，打开setting.txt文件，添加上下面两个配置(选做)：

1
2
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
more >>

展开全文 >>

vue-组件通信

字数统计: 627字   |   阅读时长: 2分

父子组件之间通信的方式

1.父组件(Patent)传递给子组件(Child)

通过props属性传递

2.子组件传递给父组件

通过$emit Events

传值时props可以是数组也可以是对象

1.传值对象————数组

一般不用这种方式

1
2
3
4
5
6
export default {
  props: [
    'title',
    'content',
  ]
}
more >>

展开全文 >>

本站总访问量 次 | 本站访客数 人次

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

北辰个人博客，记录自己学习生活的博客。