Vue.js 学习总结

Vue.js

vue.js是一套用于构建用户界面的渐进式框架，主要是使用MVVM模式可以跟方便的进行数据与页面的交互处理与绑定。

vue.js的使用

使用vue可以直接从vue.js的官网下载vue.js文件然后在项目中进行引入

<script src="../../js/vue.js"></script>

完成引入后就可创建vue实例了，首先在页面中创建一个要控制的区域div

<div id="app">	
	<p></p>
</div>

接下来就是在js中创建vue实例

//创建一个vue实例 VM
var vm=new Vue({
	el: '#app',    //表示,当前new的实例要控制哪个区
	//这里的data就是mvvm的M,保存每个页面的数据
	data:{//data属性中,存放的是el要用到的数据
		msg:'欢迎学习vue' //用过vue提供的指令方便的渲染数据到页面上
	}
});

绑定元素数据
绑定数据需先在vue实例的data中创建数据，然后再到页面上控制区域用{{}}和v-text进行数据绑定，二者的区别是{{}}放在元素内不会替换元素原来的内容，v-text会替换原来的内容

<div id="app">	
	使用{{}}绑定数据
	<p id="content">{{msg}}</p>
	使用v-text="msg"绑定数据
	<p id="content" v-text="msg"></p>
</div>

绑定元素属性
vue绑定元素属性使用的是 v-bind,也可以简写为:，加在属性前面

将mytitle 绑定到title属性上
<input type="button" value="按钮" v-bind:title="mytitle + '123'"/>
<input type="button" value="按钮" :title="mytitle + '123'"/>

绑定元素事件
在不使用vue是否绑定事件一般是在元素上写onclick或者获取元素再绑定事件，但这样就不符合vue的思想，因此vue也有专门绑定元素事件的写法—— v-on: 简写：@。

使用v-on:click 绑定点击事件 可简写为 @click
<input type="button" value="v-on按钮" :title="mytitle + '123'" v-on:click="show"/>
<input type="button" value="v-on按钮" :title="mytitle + '123'" @click="show"/>

在页面写好绑定后，还要在vue实例中写点击的方法
var vm=new Vue({
	el: '#app',
	data:{//data属性中,存放的是el要用到的数据
		mytitle:'这是自己定义的title'	
	},
	methods:{//定义事件方法 定义当前vue实例可用的方法
		show:function(){
			alert("55");
		},
	}
});

数据双向绑定
为了更方便的操作数据与获取元素数据vue提供了一个双向绑定，v-model: 但页面数据发生改变后，绑定在vue实例的数据也会根据页面改变，v-model: 只能用在表单元素中。

<!-- v-bind 只能实现数据的单向绑定，无法实现数据双向绑定 -->
<input type="text" name="" v-bind:value="msg"/>
<!-- v-model 可以实现数据双向绑定 表单元素和model中数据的双向绑 -->
<!-- 只能用在表单元素中 -->
<input type="text" name="" v-model:value="msg"/>

循环
在使用vue时如果需要将一组数据绑定到页面中，这就可以使用v-for循环数据进行绑定

<div id="app">	
	<!-- 循环数组 -->
	<p v-for="(item,i) in list">
		索引值{{i}}----------{{item}}
	</p>
</div>
<script src="../../js/vue.js"></script>
<script>
	var vm=new Vue({
		el:'#app',
		data:{
			list:[1,2,3,4,5,6]
		},
	});
</script>

运行结果