Vue的基本使用

Vue

基础语法

js部分

1. var vm = new Vue({
       el : '#目标id',
       data : {
           message: '',
           list: ['',''],
           map : {
               'key':'value'
           }
       },
       methods:{
           methodName : function(){
               methodContent;
               return
           }
       },
       //通讯
       data():function(){
       	return {
               info:null
           }
   	},
       mounted(){
           axios.get("url")
                .then(response => (this.info = response))
           	 .catch(function(error){
               	console.log(error);
           });
       },
       watch:{
           prop:function(val){
            this.props = val;
           }
       }
   })
   vm.$watch('count',function(nval,oval){
      	alert(nval + oval); 
   });
   

2. Vue.compenent('tagName',{
       template: 'tagContent',
    props:['','']
       //data要是返回对象则数据不唯一,返回函数则数据唯一
       data:function(){
       	return{
               props: 0;
           }
   	}
       methods:{
       	methodName:function(){
   			methodContent:
               this.$emit('')
       		return;
   		}
   	},
       
   })
   

   html部分

   1. <div id=''>
          {message}
          <ul v-for='i in list'>
              <li>{{i}}</li>
          </ul>
          <ul v-for='(key,value,index) in map'>
              <li>{{key}}{{value}}{{index}}</li>
          </ul>
          //v-on = @: v-bind = ;
          <button v-on:click='methodName' v-bind:attritute=''>
          </button>
      </div>
      

   2. <div id=''>
          <tagName v-bind:prop='message' v-on:methodName='methodName'></tagName>
      </div>