Vue.js学习基础概念

Vue.js学习基础概念

MVVM：Model-View-ViewModel

DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
“ViewModel”，它用于连接View和Model

---

Vue.js的常用指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素。
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。（display：none）
可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
v-for指令基于一个数组渲染一个列表。
v-bind，简写为：，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）。例如：v-bind:class = :class
v-on，简写@，指令用于给监听DOM事件。例如v-on:click = @click
v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号

---

缩写、组件、prop

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

组件
1、注册
// 定义
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
});

// 注册
Vue.component('my-component', MyComponent);

// 创建根实例
new Vue({
 el: '#example'
});
<div id="example">
 <my-component></my-component>
</div>
2、使用prop 传递数据




--------------------使用VueX调用接口获取数据：----------------------
computed: {
    ...mapGetters([
      'B2bHotCategory', // getters key，获取数据
    ])
  },
  created() {
    this.getB2bHotCategory(); // Action Function Name，发起请求
    this.Arr = this.B2bHotCategory; // getters key，JS中获取
    console.log(this.Arr);
  },
  data() {
    return {
      Arr: []
    }
  },
  methods: {
    ...mapActions([
      'getB2bHotCategory', // Action Function Name
    ])
}

模板中直接使用：{{B2bHotCategory}}