Vue 简单语法

公众号：代码集中营
每周分享技术文章、优质软件资源

1. 动态绑定数据message是动态的

 <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

<!-- 缩写 -->
<span :title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

2. 判断语句

  <p v-if="seen">现在你看到我了</p>

3. 循环语句

<li v-for="todo in todos">
      {{ todo.text }}
    </li>

4. 事件监听

  <button v-on:click="getMessage">获取消息</button>
<!-- 缩写 -->
<button @click="getMessage">...</button>

5. UI与数据双向绑定

  <input v-model="message">

6. 数据只绑定一次，后续数据改变，UI不会再改变

<span v-once>这个将不会改变: {{ msg }}</span>

7. UI直接设置css样式

<div v-bind:style="{color:'#119990'}"></div>

8. style 设置作用域：<style scoped>
9. 块元素与内联元素区别
   <em> 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而<p>是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔
10. css样式手册：http://css.doyoe.com/
11. Flex布局：https://www.jianshu.com/p/945c635553f4
12. 路由router：https://www.jianshu.com/p/3c4a33ab7d54