模版 Template

⚠️ 注意

1. 使用 XML 语法

表达式

三种表达式：{{ n }}、{{ n+1 }}、{{ fn(n) }}

<div v-text="object.a"></div>
<div v-html="strong"></div>
<div v-pre>{{ n }}</div>

绑定属性

<img v-bind:src="x" />
<img :src="x" />
<div :style="{border: '1px solid red', height:100}"></div>

绑定事件

<button v-on:click="add">+1</button>
<button @click="add">+1</button> //简写
<button v-on:click="fn(2)">+2</button>

条件判断

<div v-if='x > 0'>x大于0</div>
<div v-else-if='x === 0'>x等于0</div>
<div v-else>x小于0</div>

循环

<ul>
  <li v-for="(u,index) in users" :key="index">
    引索：{{index}} {{u.name}}
  </li>
</ul>

<ul>
  <li v-for="(value, name) in obj" :key="name">
  	属性名：{{name}} ，属性值：{{value}}
  </li>
</ul>

显示或隐藏

<div v-show="n%2===0"> n 是偶数</div>
<div :style="{display:n%2===0?'block':'none'}"> n 是偶数 </div>

插槽 slot

Webstrom 配置

vue template 修改

Editor -- File and Code Templates --- Vue Single

Vue ~@/assets/语法

/node_modules/@vue/cli-service/webpack.config.js

SVG 引入

项目配置：Create a file named custom.d.ts with the following content:

declare module "*.svg" {
  const content: string;
  export default content;
}

webpack 引入

svg - sprite - loader

官方存在 bug。目前已经修改

遇到最难的技术问题（尝试看源码）

1. 发现 bug：具体事件
2. 怎么发现：看 GitHub 上面有没有问题提交
3. 过程是如何：描述得曲折越好（这里表达的是”难“，不是技术问题）

SCSS

.number-pad{
  @extend %modlue
  > .next{}
  & .and
}