vue框架基本语法

官网：:https://cn.vuejs.org/v2/guide/vue的基本使用：例：div id=appdiv{{msg}}/div/divscript type=text/javascript src=js/vue.js/scriptscript type=text/javascriptvar vm = new Vue(...

官网：:https://cn.vuejs.org/v2/guide/

vue的基本使用：

例：

		<div id="app">
			<div>{{msg}}</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
			//el:元素的挂载位置 data对象中存放的是模型数据
			//vue中{{}}可以支持一些简单的计算和字符串的拼接
		</script>

模板语法：

指令：
自定义属性，指令的格式：以v-开始

v-cloak指令用法：
插值表达式存在闪动的问题，解决原理：先隐藏，替换好值之后再显示最终的值

		<div id="app">
			<div v-cloak>{{msg}}</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			/*
			v-cloak指令的用法：
			1.提供样式
			[v-cloak]{
				display:none;
			}
			
			*/
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
			//el:元素的挂载位置 data对象中存放的是模型数据
			//vue中{{}}可以支持一些简单的计算和字符串的拼接
		</script>

数据绑定指令：
v-text:填充纯文本:相比插值表达式更加简洁

		<div id="app">
			<div v-text='msg'></div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
		</script>

v-html 填充HTML片段：可以解析HTML的代码，存在安全隐患
v-pre 填充原始信息

数据响应式：
html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）

数据绑定：
将数据填充到标签中

v-once:
只编译一次，显示内容之后不再具有响应式功能，显示的信息后续不需要再更改，加入v-once可以提高性能

双向数据绑定：
v-model指令用法：
修改表单内的内容，同时被绑定的元素的内容也会修改

	<div id="app">
			<div v-text='msg'></div>
			<input type='text' v-model='msg'/>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
		</script>

事件绑定：
v-on指令用法：

1.<input type='button' v-on:click='num++'/>
2.<input type='button' @click='num++'/>

事件函数的调用方式:

1.直接绑定函数名称:
<button v-on:click='say'>Hello</button>
2.调用函数
<button v-on:click='say()'>Say hi</button>

事件函数参数传递

普通参数和事件对象
//可以传递多个参数
<button v-on:click='say("参数",$event)'>Say hi</button>

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

	<div id="app">
			<div v-text='num'></div>
			<div>
				<button v-on:click='handle'>点击</button>
			</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					num:0
				},
				methods:{
					handle:function(){
						num++;
					}
				}
			})
		</script>