VUE框架简单基础
Posted sunnymn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE框架简单基础相关的知识，希望对你有一定的参考价值。
一个构建用户界面的框架
通过指令，来给DOM元素赋值或者其他操作。
简单的指令及其作用：
在html标签中显示数据：
--> {{}}
--> v-text
--> v-html
这三条指令都是给HTML具体标签填充内容，可以是文本，也可以是其他标签
-------------------
--> v-if
--> v-else
这两条命令配合使用，如果变量为true，则插入if所在的标签，否则就插入else所在的标签。
-------------------
--> v-show
如果变量为true则显示v-show所在的标签，否则隐藏v-show所在的标签，即添加属性display: none;
注意和v-if的区别：一个是插入/删除标签的操作，一个是显示/隐藏标签的操作（标签一直都存在）
-------------------
--> v-for 循环数组或者对象{}
--> v-bind 绑定标签的属性，随时修改
--> v-on 为标签绑定事件
例子:
<head>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{v1}}</p>
<p v-text="v1"></p>
<p v-html="v2"></p>
<p v-if="v3">哈哈哈</p>
<p v-else="v3">呜呜呜</p>
<p v-show="v3">嘻嘻嘻</p>
<a v-bind:href="url">{{url}}</a>
<input type="button" v-on:click="showtest"/>
</div>
<div id="fTest">
<ul>
<li v-for="item in d1">
{{item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in d1">
{{index}},{{item}}
</li>
</ul>
<ul>
<li v-for="(val,key) in d2">
{{key}},{{val}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
v1:"哈喽",
v2:"<a>hello</a>",
v3:true，
url:"http://www.baidu.com"
},
methods:{
showtest: function(){
alert(123)
}
}
})
var f = new Vue({
el:"#fTest",
data:{
d1:[11,22,33,44],
d2:{‘name‘:‘egon‘,‘age‘:23,‘weight‘:45,‘height‘:180}
}
})
<script>
</body>
以上是关于VUE框架简单基础的主要内容，如果未能解决你的问题，请参考以下文章