vue基础

一、模板语法：

{{message}}  等同于v-text：文本插值

v-html：html插值 

v-once：插入固定的值，不会变

v-bind：单向数据绑定（内存JS改变，影响页面）缩写（:）

v-model：双向数据绑定

v-on：事件绑定 缩写（@）

二、计算属性和侦听器

1.computed：计算属性

计算属性是基于它们的响应式（内部值）依赖进行缓存的，如果内部值改变了，computed的绑定也会更新。

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

/*
计算属性是基于它们的响应式依赖进行缓存的：
vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。
如果 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数
*/

2.侦听属性watch（当侦听的数据随其他数据更新时而更新）（一般能用计算属性就不要用侦听属性）

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

3.计算属性的set

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

三、样式绑定（class和style）

1.绑定class

　1）对象语法：

　我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div :class="{active:flag,active2:isActive}">对象中多个样式名是否显示取决于变量中的值（flag和isActive）</div>

data: {
  flag: true, // 第一个样式显示.active
  isActive: false //第二个样式不显示 .active2
}

渲染结果：

<div class="active"></div>

　2）数组语法：

　我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div :class="[className,errorClass,successClass]">数组的方式展示多个class名字</div>

<!--方式二-->
<div :class="className">数组的方式展示多个class名字</div>
<div :class="[className]">数组的方式展示多个class名字</div>

data: {
  className: 'active', //样式名active传给数组中对应的className
  errorClass: 'error',  //样式名error传给数组中对应的errorClass
  successClass:'success' //样式名success传给数组中对应的successClass
}

/*方式二*/
data: {
  className:['active','error','success'], //data中的 className 把数组中所有的样式都给了 :class 中的"className"或者[className]
}

渲染结果：

<div class="active error success"></div>

2.绑定style

　1）对象语法：

<div :style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

渲染结果：

<div style="color:'red';fontSize:'13px' "></div>

　2）数组语法：

<div :style="[baseStyles, overridingStyles]">多个样式应用在同一个元素上</div>

data: {
  baseStyle: {
    color: 'red',
    fontSize: '13px'
  },
  overridingStyle:{
     background:'pink';
  }
}

渲染结果：

<div style="color:'red';fontSize:'13px' background:'pink' "></div>

四、条件渲染：

1.v-show 与 v-if 

　v-show：页面中使用display的方式隐藏或显示

　v-show 不支持 <template> 元素，也不支持 v-else

　v-if：页面中直接删除或添加

　v-if  另外还结合 v-else-if    v-else  使用，但是中间不允许有其他代码，会报错   

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else>
  Not A/B
</div>

2.<template>标签

　在页面上是一个不可见的元素，可以包裹指令，显示包裹的多个内容

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

3.使用 key 管理可复用的元素

解释：vue内部机制会 复用已有的元素渲染页面，使vue变得非常快，

但是也有缺点：有时候希望两个相同的元素是完全独立的个体，不复用已有的元素，此时需要添加一个具有唯一值得 key 属性

<template v-if="loginType === 'username'">
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <input placeholder="Enter your email address" key="email-input">
</template>

4.不推荐 v-if 和 v-for 一起使用，因为 v-for 比 v-if  的优先级高（当你只想为部分项渲染节点时，这种优先级的机制会十分有用，）

五、列表渲染

1.v-for 

<!--方式1-->
<div v-for="item in items"></div>

<!--方式2-->
<div v-for="item of items"></div>

<!--这里使用 of 比使用  in 作为分隔符，更接近JavaScript 的迭代器语法。-->

遍历对象：

<ul class='app'>
    <li v-for='(item,key,index) of Object'>{{index}}---{{key}}---{{item}}</li>
</ul>

<!--
　　item：值
　　key：属性
　　index：下标
-->

var vm= new Vue({
  el: '.app',
  data: {
    Object:{
        name:'andy',
        gender:'male',
        age:28,
  }
})

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：

<div id="app">
    <input type="text" v-model='inputValue'>
    <button v-on:click='btnClick'>提交</button>
    <ul>
        <todoitem v-bind:content='item' v-for='item in list'>{{ite}}</todoitem>
    </ul>
</div>

Vue.component("todoitem", {
    props: ["content"],
    template: "<li>{{content}}</li>"
});
var app = new Vue({
    el: "#app",
    data: {
        list: ['12', '23', '34'],
        inputValue: ''
    },
    methods: {
        btnClick: function() {
            this.list.push(this.inputValue);
            this.inputValue = '';
        }
    }
});