vue基本概念

目录

基本概念

vuex：

1. 数据绑定

方法1 绑定文本 {{}}

方法2 v-bind 针对html标签 属性绑定 即 ：

2.1 布尔类型值用于属性绑定：

2.1 样式绑定

---

基本概念

1. vuex：

   1. vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。
   2. 用来保存所有组件的共用数据，方便数据传递

1. 数据绑定

Vue 框架很核心的功能就是双向的数据绑定， 双向是指：HTML 标签数据 绑定到 Vue 对象，另外反方向数据也是绑定的。通俗点说就是，Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化。

方法1 绑定文本 {{}}

<span>Message: {{ msg }}</span>
<script>
  var app = new Vue({         // 创建Vue对象。Vue的核心对象。
    el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hello Vue!'   // message 自定义的数据
    }
  });
</script>

方法2 v-bind 针对html标签 属性绑定 即 ：

    vue中不能直接使用{{}}对html中的标签进行绑定，需要中到v-bind指令

<标签 v-bind:html标签属性名="要绑定的Vue对象的data里的属性名"></标签>

属性绑定简写：由于v-bind 使用非常频繁，所以 Vue 提供了简单的写法，可以去掉 v-bind 直接使用:即可。如

<div v-bind:id="MenuContaineId">等价于<div :id="MenuContaineId">

2.1 布尔类型值用于属性绑定：

<button v-bind:disabled="isButtonDisabled">按钮</button>

   如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。 如果为真值：<button disabled="disabled">按钮</button>。

2.1 样式绑定

       对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而 Vue 专门加强了 class 和 style 的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。:class = "{className1:条件1,className2:条件2}"，其中，className可以加上''，也可以不加引号。

例子1：
 

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {          // data: 是Vue对象中绑定的数据
      isActive: true,
      hasError: false
    }
  });
</script>

结果

<div id="app">
  <div class="static active">
  </div>  
</div>

通过对class的active:data进行判断