初识vue-模板

目录

模板语法

模板插值

指令

 条件渲染（v-if ；v-show）

 列表循环（v-for）

ref 

JSX（render渲染）

条件渲染

 列表渲染

 八皇后框架-背景格（循环）

---

模板语法

Vue.js使用了基于HTML的模板语法，所有的Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

模板插值

指令

指令（Directives）是带有v-前缀的特殊属性

 

 条件渲染（v-if ；v-show）

 

 列表循环（v-for）

不推荐在同一元素上使用v-if和v-for

非要用，记住v-for的优先级高于v-if

可以使用template标签包裹v-for，在其上写v-if，v-for内的if判断可以通过计算属性筛选显示数据

ref 

<base-input ref="usernameInput"> </base-input>
// 模板渲染之后
// dom操作，访问子组件，动节点等，调用组件方法，dom属性
this.$refs.usernameInput.focus()

JSX（render渲染）

渲染函数

一个简单的JSX渲染函数

条件渲染

类似react

 列表渲染

 八皇后框架-背景格（循环）

<template>
  <div>
    <div class="title">八皇后问题</div>
    <div class="grid">
      <div class="row" v-for="(row, r_index) in grids" :key="r_index">
        <div class="cell" v-for="cell in row" :key="cell.key">
          <div v-show="cell.ok">Q</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const grids = new Array(8).fill(1).map((_, r) => {
  // 八行
  return new Array(8).fill(1).map((_, c) => {
    // 八纵
    return {
      key: `key-${r * 8 + c}`,
      ok: false,
    };
  });
});
export default {
  data() {
    return {
      grids,
    };
  },
  // JSX render渲染
  render() {
    return (
      <div>
        <div class="title">八皇后问题</div>
        <div class="grid">
          {this.grids.map((row, r_index) => {
            return (
              <div class="row" key={r_index}>
                {row.map((cell) => {
                  return (
                    <div class="cell">
                      <div
                        key={cell.key}
                        style={{ display: cell.ok ? "block" : "none" }}
                      >
                        Q
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    );
  },
};
</script>