Vue基础入门学习笔记

Vue学习笔记

一、开端

var app=new Vue({
	el:"xxx",
    data:{
        
    },
    medthon:{
        xxx:funtion(){
        
    }
    }
})

二、属性

1. el（挂载点）

   #：id选择器 如： el:"app"

   . ：class选择器

2. data（数据对象）

   data:{
   	name:"make",
   	numble:"6666"
   	.....
   }
   

3. methods（方法）

   methods:{
   	dolt:function(){
   		alert("hello world");
   		}
   	}
   

三、本地应用

1. 内容绑定、事件绑定：

   • v-text（使用两个大括号）：

     <div id=app>
     <h2 v-text="message“></h2>
     <h2>{{message}}/h2>	
     </div>
     

     var app =new vue({
     	el: '#app',
     	data:{
     	message:"黑马程序员",
         arr:[1,2,3]
     	}
     )}
     

• v-html:

  <div id="app">
  <p v-html="content"></p>
  </div>
  

  var app=new Vue({
      el:"#app",
      data:{
          content:"<a href=www.4399.com>大家好</a>"
      }
  })
  

• v-on(为元素绑定事件)

     <div id="app">
     		<input type="button" value="v-on" @click="dolt"/>
     		<input type="button" value="v-on" v-on:click="dolt"/>
     	</div>
     <!--使用@+事件>

    var app=new Vue({
         el:"#app",
         methods:{
             dolt:function(){
                 alert("hello world");
             }
         }
     })

**总结**

• 创建Vue示例时：el（挂载点），data（数据）， methods（方法）
• v-on指令的作用是绑定事件简写为@
• 方法中通过this，关键字获取data中的数据
• v-text指令的作用是：设置元素的文本值，筒写为{{}}

2. 显示切换，属性绑定

   • v-show（根据表达值的真假，切换元素的显示和隐藏）

     <img src="地址" v-show="ture">
     

   • v-if(与v-show基本相同)

   • v-bind（设置元素src、class等属性）

   	<div id="app">
   		<a :href="src">go</a>	
           //冒号加属性
   	</div>
   	<script>
   		var app=new Vue({
   			el:"#app",
   			data:{
   				src:"http://www.4399.com"
   			},
   			
   		})
   	</script>
   

3. 列表循环、表单元素绑定

   • v-for(xx in xxx)

     	<div id="app">
     	<ul>
     		<li v-for="it in list">
     			{{it}}
     		</li>
     	</ul>
     	</div>
     	
     	<script>
     	var app= new Vue({
     		el:"#app",
     		data:{
     			list:[1,2,3,4,5]
     		}
     	})
     	</script>
     

   • v-on（https://cn.vuejs.org/v2/api/#v-on）

     @操作.细操作

   • v-model(双向数据绑定)

     	<div id="app">
     	<input type="text" v-model="text">
     	</div>
     	<script>
     	var app= new Vue({
     		el:"#app",
     		data:{
     			text:"123456789",
     		}
     	})
     	</script>
     

   四、网络应用

   axios（一个js库）

   引用：

   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   

   get请求：

   axios.get("链接?xx=xx" )
   .then(function(response){
   	//成功时,response为返回值
   },function(err){
   	//失败时
   }) 
   

   post请求

   axios.post("链接",{xx:xxx})
   .then(function(response){
   	//成功时,response为返回值
   },function(err){
   	//失败时
   })