Vue的简单使用

第一个Vue程序

1.导入开发版本Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.使用简洁的模板语法把数据渲染到页面上
{{ }}的作用是和下面的数据联系起来

<div id="app">
  {{ message }}
</div>

3.创建Vue实例对象，设置el属性和data属性

var app= new Vue({
	el:"#app",
	data:{
		message:"Hello Vue!"
	}
})
</script>

el：挂载点

el的作用范围 ：

在其外部的时候无效
在其内部的时候有效

el的其它类型选择器

el：“#app” id 选择器
el: “.app” 类选择器
el “div” 标签选择器

data：数据对象

复杂数据的渲染

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		message:"Hello Vue!",
		school:{
			name :"临沂大学",
			mobile:"110-119-120"
		},
		campus:["临沂校区","费县校区","沂水校区"]
	}
})
</script>

对象类型数据的渲染

  {{school.name}}  
  {{school.mobile}}  

数组类型数据的渲染

 {{campus[0]}}
  {{campus[1]}}
  {{campus[2]}}

Vue指令

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		message:"Hello Vue!"	
	}
})
</script>

v-text ：设置标签的文本值

<div  id ="app">
  <h2 v-text="message"></h2>
  <h2>对你说：{{message}}</h2>
</div>
<!--也可以进行拼接哦-->
<div  id ="app">
  <h2 v-text="message+'!!!'"></h2>
  <h2>对你说：{{message+"!!!!"}}</h2>
</div>

其中第一种写法会把整个标签中的值替换为message中的值 所以一般我们使用第二种

v-html 设置标签的innerHTML属性
若要渲染的数据文本的话和v-text标签没区别 但要是html结构则不同

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		message:"<a href='#'>我是超链接</a>"	
	}
})
</script>

<div  id ="app">
  <h2 v-html="message"></h2>
</div>

v-on为元素绑定事件
其中v-on 可以替换成 @ 符号

<script type="text/javascript">
var app= new Vue({
	el:"#app",
    methods:{
    	dolt:function(){
    		alert("触发事件");
    	}
    }
})
</script>

<div  id ="app">
      <input type="button" value="事件绑定1" v-on:click="dolt">
      <input type="button" value="事件绑定3" @dblclick="dolt"><!-- 双击事件 -->
</div>

在vue里面获取data 中的值并修改

<h2 @click="dolt">{{food}}</h2>

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		food: "西兰花炒蛋"
	},
    methods:{
    	dolt:function(){
    		this.food+="好好吃"
    	}
    }
})
</script>

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

例子 点击按钮显示隐藏图片

设置按钮 绑定单击事件 设置 图片并且设置一个值为false 在 data中

<div  id ="app">
  <input type="button" @click="changeIsShow" value="切换显示状态"> 
  <img  v-show="isShow"  src="人生.jpg">
</div>

1.给 isShow 设置初始值为false 也就是默认不显示
2.设计一个方法让点击时isShow的值改变

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		isShow:false
	},
	methods:{
         changeIsShow:function(){
        	 this.isShow=!this.isShow;       		 
         }
	}

})
</script>

也可以有条件判断

v-if 根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

<div  id ="app">
<p v-if="isShow">你好小狗狗</p>
<button @click="changeIsShow">切换显示</button>
</div>

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		isShow:false
	},
	methods:{
         changeIsShow:function(){
        	 this.isShow=!this.isShow;       		 
         }
	}

})
</script>

也可以加上判断

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		isShow:false,
		wendu :25,
	},
	methods:{
         changeIsShow:function(){
        	 this.isShow=!this.isShow;       		 
         },
	       addWendu:function(){
	    	   
	    	   this.wendu++;
	       }
	 
	}

})

<div  id ="app">
<p v-if="isShow">你好小狗狗</p>
<p v-if="wendu>=30">小狗狗热死了</p>
<button @click="changeIsShow">切换显示</button>
<button @click="addWendu">升温了</button>
</div>

v-bind设置元素的属性

其中 ：前面的v-bind可以省略


也可以不使用三元表达式

v-for 根据数据生成列表结构
其中这里的v-for卸载了li标签中说明要循环生成li标签 item是每一项的值可以随变命名 in 不能改 arr 是你要遍历的东西
也可以显示索引

<li v-for="(item,index) in arr">

<div  id ="app">
<ul>
	<li v-for="item in arr">
	  地区：{{item}}
	</li>
</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		arr:["北京","上海","临沂"]
	}
	
})
</script>

加了索引后

<ul>
	<li v-for="(item,i) in arr">
	  地区：{{i}}{{item}}
	</li>
</ul>

遍历对象数组

<script type="text/javascript">
var app= new Vue({
	el:"#app",
	data:{
		arr:["北京","上海","临沂"],
		food:[
			{name:"西兰花"},
			{name:"鸡蛋"}
			 ]		
	}
	
})
</script>

<li v-for="(item,i) in food">
	  食物：{{i}}{{item.name}}
	</li>

v-model 获取和设置表单元素的值(双向数据绑定)

axios 功能强大的网络请求库

1.导入js

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

get请求

post请求

axios+vue