vue 入门

写在前面：

尽量使用es6的特性，使用eslint检查语法规范，熟悉Promise的使用。

1、Vue简介

包括react、vue、ng核心的数据驱动模式是MVVM，通过修改Model的数据来实现View层数据的修改展示。

一个典型的Vue文件（hello.vue）

<template>
     // View
    <div>hello</div>
</template>

<script lang="js">
export default {  // Vue 实例 ViewModel
  name:'hello',
  data: {      // Model
    total_count: 0
  }
}
</script>

<style lang="scss" scoped>
</style>

编写的vue可以通过webpack等工具打包成对应的静态资源（html，css，image etc.）

2、vue生命周期

 

3、vue核心思想

jQuery要修改div的值可能要获取这个div的Dom，然后进行赋值等操作

$('#el-div').val('hello')

Vue对div赋值、修改值：

<div>{{name}}</div>

data () {
    return {
        name: 'hello'
    }
},
mounted () {
    let progress = 0
    setInterval(_ => {
        this.name = `hello${progress++}`
    }, 2000)
}

这段代码，{{name}}绑定了data里面的name，要修改div的显示，直接修改this.name就可以。

 

 

4、组件（Vue允许对部分公共的显示提升为模板）：

组件的实现：

// 一 Hello1.vue
<template>
    <div>{{simpleProps}}</div>
    <div>{{value}}</div>
</template>

<script>
export default {
    name: 'elHello',
    props: {
        simpleProps: {
            type: String,
            default: 'hello'
        },
        value: {
            type: String,
            default: 'value'
        }
    }
}
</script>

//2
const Hello2 = Vue.extend({
    template: `<div>hello</div>`
})

大致有两种说明组件的方式：

// 全局：
Vue.component("hello1", Hello1)

// 局部：
<script>
export default {
    components: {
      Hello2
    }
}
</script>

使用：

<template>
    <div>
        <hello1 :simpleProps='simple' :value='value1'></hello1>
        <Hello2></Hello2>
    </div>
</template>