vue 学习 一

1.实例：

var vm = new Vue({
    el: '#example',
    data: {
        a:1
    },
    created: function () {
    // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
    }
})    
vm.a === data.a // -> true    
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

2.数据绑定：

  1）文本 

    <span>Message: {{ msg }}</span> //加载时会出现{{}}，不推荐

　　<div>{{{ raw_html }}}</div>  //raw_html是html时

　　<p v-html="msg"></p> 

　　<p v-text="msg"></p>

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

2)指令

<button v-bind:disabled="isButtonDisabled">Button</button>
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>    <a :href="url">...</a>//缩写
<a v-on:click="doSomething">...</a>  <a @click="doSomething">...</a>  //缩写
<form v-on:submit.prevent="onSubmit">...</form>

3.方法：

computed

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

结果：

Original message: "Hello"

Computed reversed message: "olleH"

vm.reversedMessage 的值始终取决于 vm.message 的值，当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

和watch区别：https://blog.csdn.net/smartdt/article/details/75557369

4.动态绑定class

<div v-bind:class="{ active: isActive }"></div>
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}


<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

5.条件语句和循环语句

v-if
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>
v-if  v-else-if
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for:
列表：

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({

  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
对象：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

new Vue({  el: '#v-for-object',  data: {

    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
   0. firstName: John
   1. lastName: Doe
   2. age: 30

数组的操作：

重新设值

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

减去一项

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

 

5.组件
全局组件

Vue.component('my-component-name', {
  // ... options ...
})

局部组件

父组件像子组件传递数据
props

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

v-bind

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

 

子组件向父组件传递数据

https://www.cnblogs.com/daiwenru/p/6694530.html
https://blog.csdn.net/u011175079/article/details/79161029
https://blog.csdn.net/lander_xiong/article/details/79018737