vue的指令【嘎洒糕】

好久不见

菜鸟作者在一场酣畅淋漓

足足有 5 天（大嘘）！

的学习中

又决（beì）定（p ò）开始给大家分享知识了

让我们进行新年的第一个分享——Vue的指令

使用 v-model 指令实现表单数据双向绑定：

<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

使用 v-bind 指令将 Vue 实例的数据绑定到 HTML 元素的属性上：

<div id="app" class="demo">
    <img v-bind:src="imageSrc">
</div>

使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件：

<div id="app" class="demo">
    <p v-if="showMessage">Hello Vue!</p>
    <p v-else>Goodbye Vue!</p>
</div>

使用 v-for 指令根据数组的属性值循环渲染元素或组件：

 （ v-for 遍历数组，对象，字符串，指定次数）

<div id="app" class="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

使用 v-html 指令用于输出 html 代码：

<div id="example1" class="demo">

<p>使用双大括号的文本插值: {{ rawHtml }}</p>

 <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>

 </div>

使用v-on 指令在 HTML 元素上绑定事件监听器（监听 DOM 事件）

<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="https://static.jyshare.com/images/svg/img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">开/关</button>
</div>

最后，跟大家讲点题外话

光顾着学习的你可能不知道

Vue是一个独立的社区驱动的项目

它是由国人尤雨溪大佬在2014年作为其个人项目创建

作为一个资深二次元大佬

尤大师在给vue版本取名字时

还用过“攻壳机动队”“火影忍者”“海贼王”这样的名字

所以，也许各位老二次元

在还没找到前端的工作前

就可以直接和别人说“我与尤雨溪是一个圈子里的”噢

我是嘎洒糕，再见。