Vue思维导图

这是一篇关于Vue的思维导图。该思维导图总结归纳与之相关的一些用法，总结归纳了重点词汇，千万不要错过哦。

Vue

• 一、基础设置
  • settings -> editor -> code style -> css|html|javascript|JSON -> 缩进都调整2 2 8
  • settings -> editor -> live templates -> vue -> +
• 二、mustache语法
  • Mustache 是一款的前端模板引擎，它原本是基于 javascript 实现的，但是因为轻量易用，所以经过拓展目前支持更多的平台，如 java，PHP，C++ 等。Mustache 主要用于在表现和数据相分离的前端技术架构中，根据数据生成特定的动态内容，实际作用和EL表达式一样为了接收渲染数据，但是比EL更加强大。写法：{{}}
  • mustache语法应用： <div id="app"> <h2>ex1: {{message}}</h2>输出data属性 <h2>ex2: {{content1}}{{content2}}</h2>输出两个属性 <h2>ex3: {{content1 + content2}}</h2>连接字符串输出 <h2>ex4: {{content1}} &nbsp; {{content2}}</h2>中间加空格转义符 <h2>ex5: {{content1 +' '+ content2}}</h2>直接加空格 <h2>ex3: {{score *2 }}</h2>基本算法应用 </div>
  • 操作mustache的相关指令: v-once：对解析的元素或者组件只渲染一次,不跟随表达式 <h2 v-once>{{message}}</h2> v-html：以HTML形式渲染 <h2 v-html="link"></h2> v-text：以文本形式渲染，也可以直接代替mastache语法显示数据（不建议使用，会覆盖值）<h2 v-text="link"></h2> v-pre：不解析nustache语法并原样输出,不跟随表达式 <h2 v-pre>{{message}}</h2> v-cloak：设置不显示未渲染的标签<style>[v-cloak] { display: none; }</style> <h2 v-cloak>{{message}}</h2>
• 三、v-bind
  • v-bind用于绑定一个或多个属性值，或向另一个组件传递props值（到组件在学习）<img v-bind:src="link" alt="">
  • v-bind语法糖: <img :src="link" alt="">
  • v-bind绑定Class类: //样式 <style> .fc1{ color: red; } .fc2{ font-size: 40px;12 } </style> //数据 data:{ f1:'fc1', f2:'fc2' } //写法 <h2 v-bind:class="f1">好好学习，天天向上</h2> <h2 class="fc2" v-bind:class="f1">好好学习，天天向上</h2>
  • 通过对象方式绑定多个class： //样式 <style> .fc1{ color: red;9 } .fc2{ font-size: 40px;12 } </style> //数据 data:{ f1:true, f2:true } //写法： <h2 v-bind:class="{fc1:f1,fc2:f2}">好好学习，天天向上！</h2>