一个构建用户界面的框架
通过指令，来给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>
时间： 2024-11-11 10:40:38