踏进VUE之路（一）

1------main.js--------//webpack的入口文件
  import Vue from 'vue'  //最重要的引用Vue
import App from './App'   //App.vue 可省略为App
new Vue({
    el:'#app',     //想要挂在的节点
    render: function (h) {   //首先当然是渲染最根本的App.vue 了
        return h(App)
    }
})

通过上面已经刚刚推开了步入Vue的大门 把Vue引入到一个js文件里

要注意一个项目里只有一个实例化对象new Vue的实例 那么中间的所有传递都是Vue的一份配置文件 比如App.vue我们便是导出了一个JS对象 

那么接下来便要开始写最根本的组件App.vue了

<template>
      <div @click="event" class="fontcolor">
          {{firstMessage}}  {{myComputedMessage}} //响应式变量通过双括号括起来
        </div>
</template>

<script>
import comA from './components/a'
export default {
	components: {             //注册组件
		comA
	},
	data () {              //数据
		return {
			firstMessage:'hello world'
		}
	},
	methods: {         //方法
		event () {
			this.firstMessage ='you  change the message'
		}
	},
	computed: {        //计算属性
		myComputedMessage () {
			return this.firstMessage+'and my friend'
		}
	},
	watch: {             //监听
		firstMessage (val,oldval) {
				alert(val+"------"+oldval);
		}
	}
}
</script>

<style>
.fontcolor{
    color:red;
}
</style>

　　

每一个组件都是几乎这样的形式 分为三大部分 <template> <script> <style>