它是一个Javascript框架,作用:简化dom的操作,以及响应式编程
创建:
1,引入vue.js文件
<script type="text/javascript" src="js/vue.js"></script>
2,根据已有的html文件创建自己的js代码,自己写的js代码一般写在body下面
vue指令
1,v-text 和v-html
设置标签的文本值(textContent)
2,v-on
为元素绑定事件,可以简写成 @
比如:绑定一个点击事件 v-on:click-------@click
3,v-show 和v-if(判断真假)
根据表达值的真假,切换元素的显示和隐藏
4,v-bind
设置元素的属性
5,v-for(循环数据 )
6,v-model
获取和设置表单元素的值.一般在 input select textarea使用,表单元素的双向绑定
实例:记事本(代码在最下面)
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>小黑记事本</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="robots" content="noindex, nofollow" /> <meta name="googlebot" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="./css/Bookindex.css" /> </head> <body> <!-- 主体区域 --> <section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>小黑记事本</h1> <input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" v-model="insertadd" @keyup.enter="add" /> </header> <!-- 列表区域 --> <section class="main"> <ul class="todo-list" > <li class="todo" v-for="(item,index) in msg"> <div class="view"> <span class="index">{{index+1}}</span> <label>{{item}}</label> <button class="destroy" @click="deleteone(index)"></button> </div> </li> </ul> </section> <!-- 统计和清空 --> <footer class="footer"> <span class="todo-count"> <strong>{{this.msg.length}}</strong> items left </span> <button class="clear-completed" @click="clear(index)"> Clear </button> </footer> </section> <!-- 底部 --> <footer class="info"> <p> <a href="http://www.baidu.com" ><img src="./img/logo.png" alt="" /></a> </p> </footer> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script type="text/javascript" src="../js/vue.js"></script> </body> <script> let app=new Vue({ el:"#todoapp", data:{ msg:["哈哈哈","嘿嘿嘿"], insertadd:"", }, methods:{ add(){ this.msg.push(this.insertadd) }, deleteone(index){ this.msg.splice(index,1) }, clear(index){ this.msg.splice(index) } } }) </script> </html>