vue使用指南

发表时间： | 阅读次数:

有关vue环境的搭建以及一些使用技巧

搭建一个vue的开发环境
1
2
3
4
5
6
7
8
9
10
# 最新稳定版
$ npm install vue
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

v-bind缩写

1
2
3
4
5
6
7
8
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

v-on缩写

1
2
3
4
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

父组件通信子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 父组件 -->
<!-- <radios :radiosData="radiosData" /> -->
export default {
  components: {
    About,
    Radios
  },
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      radiosData: [
        {'id': 'man', 'text': '男'},
        {'id': 'woman', 'text': '女'}
      ]
    }
  },
  methods: {
    showChild: function (data) {
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 子组件 -->
<script>
  export default {
    props: ['radiosData', 'defaultID'],
    data: function () {
      return {
        checkClass: 'check',
        checkedClass: 'checked',
        id: this.defaultID
      }
    },
    methods: {
      onRadioClick: function (item) {
      }
    }
  }
</script>

子组件通信父组件

1
2
3
4
5
6
7
<!-- 子组件： -->
methods: {
      onRadioClick: function (item) {
        this.id = item
        this.$emit('listenToChildEvent', this.id)
      }
    }
1
2
3
4
5
6
7
8
<!-- 父组件： -->
<!-- <radios :radiosData="radiosData" defaultID='man' v-on:listenToChildEvent="showChild"/> -->
methods: {
    showChild: function (data) {
      console.log(11)
      console.log(data)
    }
  }