Vue的学习与使用--初级接触

Vue这个框架好处在于使得我们不再操作document，而是直接操作数据。我们需要通过一个vue的实例，挂载到div上，就可以实现数据的显示。
在这里我创建了一个div，id为root

<div id="root"></div>

此时在script处创建一个vue实例，通过id与此div进行挂载

<script>
		new Vue({
			el:"#root",
		})
	</script>

此时，挂载成功后，我们可以给实例添加data数据

	<script>
		new Vue({
			el:"#root",
			data:{
				msg:"你好vue",
			}
		})
	</script>

此时我们如何引用实例的data数据呢，只需要{{数据名}}即可

<div id="root">{{msg}}</div>

结果：

注意{{}}输出的是文本，也就是说当data数据是这样的时候

data:{
				msg:"<h1>你好vue</h1>",
			}

结果为：

要输出html，则我们就不能使用{{}}了，根据官方说法我们要使用v-html。

	<div id="root" v-html="msg"></div>

v-bind
用来绑定动态绑定标签的属性值。在使用的时候可以简写为：即可

<a  :href="url" :id="id">{{content}}</a>

data:{
				url:"http://www.baidu.com",
				content:"百度链接",
				id:"baidu",

执行结果后：

v-on
用来给标签绑定一个事件，在使用的时候可以用@即可，接下来我们将绑定一个点击事件，点击后弹出一个警告框。

<div v-html="msg" @click="alertClick"></div>

在vue的实例呢，我们在vue实例的method属性来编写方法。

methods:{
				alertClick:function(){
					alert("哈哈");
				}
			}

结果：

v-if
相当于一个if条件判断，当结果为true的时候显示，false不显示。

<div v-if="ifSee">看的见我吗</div>
data:{
				url:"http://www.baidu.com",
				content:"百度链接",
				id:"baidu",
				msg:"<h1>你好vue</h1>",
				ifSee:true,
			},

结果：

如果改成false，
结果：

看看生成的代码：

发现div根本就没有生成
v-show
跟v-if一样，但是有啥区别呢。我们将之前的v-if改成v-show。值为false

<div v-show="ifSee">看的见我吗</div>

看看生产的代码：

原来它是直接通过display来设置是否显示。
v-for
相信已经猜出来了就是遍历

           <ul>
				<li v-for="item of list">{{item}}</li>
			</ul>
			data:{
				url:"http://www.baidu.com",
				content:"百度链接",
				id:"baidu",
				msg:"<h1>你好vue</h1>",
				ifSee:false,
				list:[1,2,3,4,5,6]
			},

结果：