vue的初体验

详细看vue的官方文档。

此处记录纯属个人在使用中的一些小结：

1、v-text：操作元素的纯文本，其简写形式：{{}}

    eg:<h1 v-text="number"></h1>   简写为：{{number}}

2、v-html：其作用和v-text一样，唯一的区别是浏览器会将v-html的数据当成html标签解析后输出

3、绑定事件用‘v-on：click’标志，‘v-on：’可简写为‘@’

4、实现数据的属性绑定用‘v-bind’，html的属性不能使用{{}}绑定，只能使用v-bind绑定

    eg:<p v-bind:title='title'></p>

5、实现数据的属性绑定用‘v-bind’，html的属性不能使用{{}}绑定，只能使用v-bind绑定

    eg：<p v-bind:title="title"></p>

6、双向绑定语句：v-model，主要用于input标签中，实时获取输入的数据

<div id="msg">
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <li v-for="(item,index) of list" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
 
  <script>
   new Vue({
       el:"#msg",
       data:{
           inputValue:'hello',
           list:[]
       },
       methods:{
           //点击提交按钮时，通过push向list添加值（inputValue是填写进文本框中的值）
           handleSubmit:function(){
               this.list.push(this.inputValue)
               //添加完数据数据进list集合中后，清空inputValue
               this.inputValue=""
           }
       }
   })
  </script>

7、v-show、v-if都通过实例对象中的true和false是否隐藏数据，区别在于v-if直接移除为false的值，v-show的值为false时隐藏标签，但并不删除标签

8、循环指令：v-for

<!-- vue实例的挂载点 -->
  <div id="msg">
  <!-- v-show和v-if的区别：v-if直接移除为false的值，v-show值为false时，隐藏标签，但并不删除 -->
   <div v-if='show'>hello word</div>
   <button @click="handleClick">toggle</button>
   <ul>
   <!-- v-for指令用来循环，其中list是data中的集合，item是将集合遍历的结果,其中':key'用来渲染，提高性能，但是key值的循环不允许重复值-->
    <li v-for="item of list" :key="item">{{item}}</li>
    <!-- 在操作不是频繁的时候
    <li v-for="(item,index) of list" :key="index">{{item}}</li>
     -->
   </ul>
  </div>
  
  <script>
   new Vue({
	   el:"#msg",
	   data:{
		   show:true,
		   list:[1,2,3]
	   },
	   methods:{
		   //点击事件时，让show取反		   
		   handleClick:function(){
			   this.show=!this.show
		   }
	   }
   })
  </script>

9、todo-list组件拆分（全局组件）

<!-- vue实例的挂载点 -->
  <div id="msg">
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <!--将集合中的每一个值放在content中，传递到组件中-->
      <todo-item v-for='item of list' :content="item">
      </todo-item>
    </ul> 
  </div>
  
  <script>
  //vue中创建组件(全局组件)
   Vue.component('todo-item',{
	   props:['content'],    //接收从外部传递进的参数
	  template:'<li>{{content}}</li>'
  })  
   new Vue({
     el:"#msg",
     data:{
       inputValue:'hello',
       list:[]
     },
     methods:{
       //点击提交按钮时，通过push向list添加值（inputValue是填写进文本框中的值）
       handleSubmit:function(){
         this.list.push(this.inputValue)
         //添加完数据数据进list集合中后，清空inputValue
         this.inputValue=""
       }
     }
   })
  </script>

10、组件与实例的关系

<!-- vue实例的挂载点 ,父组件定义的模板-->
  <div id="msg">
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <!-- content指定内容，index指定下标 -->
      <todo-item v-for='(item,index) of list' :key='index' :content="item" :index='index' @delete='handleDelete'>
      </todo-item>
    </ul> 
  </div>

  <script>
  //vue中创建组件(全局组件),vue中的组件都是一个vue的实例
   Vue.component('todo-item',{
	   props:['content','index'],    //接收从外部传递进的参数
	  template:'<li @click="handleClick">{{content}}{{index}}</li>',
	  methods:{
		  handleClick:function(){
			  //向外触发一个事件，事件名称是delete
			  this.$emit('delete',this.index)
		  }
	  }
  })
 
   new Vue({
     el:"#msg", 
     data:{
       inputValue:'hello',
       list:[]
     },
     methods:{
       //点击提交按钮时，通过push向list添加值（inputValue是填写进文本框中的值）
       handleSubmit:function(){
         this.list.push(this.inputValue)
         //添加完数据数据进list集合中后，清空inputValue
         this.inputValue=""
       },
       handleDelete:function(index){
    	   //从下标删除list对应index的一项数据
    	   this.list.splice(index,1)  	   
       }
     
     }
   })
  </script>

11、计算器与监听属性

 <div id="msg">
   姓：<input v-model='firstName'/>
   名：<input v-model='lastName'/>
   <div>{{fullName}}</div> 
   <div>{{count}}</div>
  </div>
  
  <script>
   new Vue({
	   el:"#msg",
	   data:{
		   firstName:'',
		   lastName:'',
		   count:0
	   },
	   //computed指的是一个属性通过其它属性计算而来
	   computed:{
		   fullName:function(){
			   return this.firstName+''+this.lastName
		   }
	   },
	   watch:{
		  /*  firstName:function(){
			   this.count++
		   },
		   lastName:function(){
			   this.count++
		   } */
		   
		   //监听一个计算属性的变化、fullName每修改一次，就统计一次变化
		   fullName:function(){
			   this.count++
		   }
	   }
   })
  </script>