Vue学习1

V-text

//js部分
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var app=new Vue({
					el:'#app',
					data:{
						message:"啊哈哈哈",
						info:"测试"
					}
				//v-text 会将便签内的值都会是message的值
						
				})
			}
		</script>

//html部分
<div id="app">
			<h2 v-text="info">这里显示info里的值</h2>
			<h2 v-text="message">因为V-text会替换标签里的值所以会显示message里的值</h2>
			<h2>如果只用替换部分数据可以用{{message}}</h2>
		</div>

运行截图：

这里还可以进行简单的字符串拼接：

<div id="app">
			<h2 v-text="info+'---这是拼接的内容'">无效</h2>
			<h2 v-text="message+'---这是拼接的内容'">因为V-text会替换标签里的值所以会显示message里的值</h2>
			<h2>如果只用替换部分数据可以用{{message+'---这是拼接的内容'}}</h2>
		</div>

运行截图：

V-html

作用：设置标签的innerHTML

//js部分
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var app=new Vue({
					el:"#app",
					data:{
						content:"测试文字",
						test:'<a href="https://www.bilibili.com">哔哩哔哩干杯</a>'
					}
					
				})
			}
		</script>

//html部分
<div id="app">
			<p v-text="content">显示普通文本V-html与V-text没什么区别但是如果加了标签就不一样了</p>
			<p v-html="content"></p>
			<p v-html="test"></p>
		</div>

运行截图：

V-on

作用：绑定事件

<div id="app">
			<input type="button" value="事件绑定" v-on:click="方法名" /><!-- 鼠标单击事件 -->
			<input type="button" value="事件绑定" v-on:mouseenter="方法名" /><!--鼠标移入事件-->
			<input type="button" value="事件绑定" v-on:dblclick="方法名" /><!--鼠标双击事件-->
		</div>
<!--或者这样写（上下两种写法效果是一样的）-->
<div id="app">
			<input type="button" value="事件绑定" @click="方法名" /><!-- 鼠标单击事件 -->
			<input type="button" value="事件绑定" @mouseenter="方法名" /><!--鼠标移入事件-->
			<input type="button" value="事件绑定" @dblclick="方法名" /><!--鼠标双击事件-->
		</div>

示例：
js部分

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var app=new Vue({
					el:'#app',
					methods:{
						doClick:function(){
							alert("我是单击");
						},
						doMouseenter:function(){
							alert("我是鼠标移入事件");
						},
						doDblclick:function(){
							alert("我是双击事件");
						}
					}
					
				})
			}
		</script>

html部分

<div id="app">
			<input type="button" value="单击" v-on:click="doClick" /><!-- 鼠标单击事件 -->
			<input type="button" value="鼠标移入" v-on:mouseenter="doMouseenter" /><!--鼠标移入事件-->
			<input type="button" value="双击" v-on:dblclick="doDblclick" /><!--鼠标双击事件-->
		</div>

运行效果截图：