天天看点

Vue基本内容

核心:数据驱动、组件化

优点:借鉴了AngulaJS的模块化开发和React的虚拟Dom,虚拟Dom就是把操作放到内存中执行:

常用的属性:

v-if

v-else-if

v-else

v-for

v-on 绑定事件,简写@

v-model 数据双向绑定

v-bind 给组件绑定参数,简写 :

组件化:

组合组件solt插槽

组件内部绑定事件需要使用到this.$emit(“事件名”,"参数");

计算属性的特色,缓存计算数据

1.判断      
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>           
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})           
2.循环
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})