Vue
Vue ：它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）
Vue的使用
语法
vue的使用要从创建Vue对象
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
});
el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
data: 保存vue.js中要显示到html页面的数据。
基本使用
<!-- 1.引用Vue核心文件--> <script src="Vue/vue/vue.min.js"></script> </head> <body> <!-- 3.填写Vue语法控制数据--> <div id="k">{{message}}</div> <script> // 2.实例化Vue对象，实例化的变量是唯一的 var vm = new Vue({ el:"#k", data:{ message:"hello world" } }) </script>
注意事项
- Vue实例化的对象是独立的
- Vue语法区分大小写
- Vue对象代码写在body后面
MVVM架构思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。MVVM的数据的修改与增加都是同步的
model：模板，数据展示到页面中
views：视图，数据要显示的HTML页面
viewsmodel：双向数据绑定，负责连接 View 和 Model，保证视图和数据的一致性
<!-- 1.引用Vue核心文件--> <script src="Vue/vue/vue.min.js"></script> </head> <body> <!-- 3.填写Vue语法控制数据--> <div id="k"> <input v-model="message"> {{message}} </div> <script> // 2.实例化Vue对象，实例化的变量是唯一的 var vm = new Vue({ el:"#k", data:{ message:"hello world" } }) </script>
在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据
console.log(vm.$el) # #box vm对象可以控制的范围
console.log(vm.$data); # vm对象要显示到页面中的数据
console.log(vm.$data.message); # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.
数据显示
1.纯文本数据用 {{ }}表示
<!-- 1.引用Vue核心文件--> <script src="Vue/vue/vue.min.js"></script> </head> <body> <!-- 3.填写Vue语法控制数据--> <div id="k"> <h1>message</h1>
</div> <script> // 2.实例化Vue对象，实例化的变量是唯一的 var vm = new Vue({ el:"#k", data:{ message:"hello world" } }) </script>
2.单标签使用 v-model方法
<!-- 1.引用Vue核心文件--> <script src="Vue/vue/vue.min.js"></script> </head> <body> <!-- 3.填写Vue语法控制数据--> <div id="k"> <input v-model="message"> {{message}} </div> <script> // 2.实例化Vue对象，实例化的变量是唯一的 var vm = new Vue({ el:"#k", data:{ message:"hello world" } }) </script>
3.双标签使用 v-html方法
<!-- 1.引用Vue核心文件--> <script src="Vue/vue/vue.min.js"></script> </head> <body> <!-- 3.填写Vue语法控制数据--> <div class="k"> <span v-html="message"></span> </div> <script> // 2.实例化Vue对象，实例化的变量是唯一的 var vm = new Vue({ el:".k", data:{ message:"<a>hello world</a>" } }) </script> </body> </html>
常用指令
属性操作
语法
<标签名 :标签属性="data属性"></标签名>
<!-- 1.引用Vue核心文件--> <script src="Vue/vue/vue.min.js"></script> </head> <body> <!-- 3.填写Vue语法控制数据--> <div class="k"> <a :href="url">百度</a> </div> <script> // 2.实例化Vue对象，实例化的变量是唯一的 var vm = new Vue({ el:".k", data:{ url:"http//www.daidu.com" } }) </script>
例子：显示密码
<!-- 1.引用Vue核心文件--> <script src="Vue/vue/vue.min.js"></script> </head> <body> <!-- 3.填写Vue语法控制数据--> <div id="k"> 密码:<input :type="type" ><button @click="change">显示密码</button> </div> <script> // 2.实例化Vue对象，实例化的变量是唯一的 var vm = new Vue({ el:"#k", data:{ type:"password", password:"", }, methods:{ change(){ if(this.type=="password"){this.type="text";} else {this.type="password";} } } }) </script>
事件操作
语法
<h1 @click="num++">{{num}}</h1>
有两种事件操作的写法，@事件名 和 v-on:事件名
<button v-on:click="num++">按钮</button> <button @click="num+=5">按钮2</button>
例子：
<script src="Vue/vue/vue.js"></script> </head> <body> <div id="index"> 商品：<button @click="sub">-</button> <input type="text" v-model="goods.num"> <button @click="goods.num++">+</button> </div> <script> var vm = new Vue({ el:"#index", data:{goods:{num:0}}, methods:{sub(){if(this.goods.num --<1){this.goods.num=0}}} }) </script> </body>
样式操作
语法
<h1 :class="值">元素</h1> 值可以是字符串、对象、对象名、数组
<style> .box1{ color: red; border: 1px solid #000; } .box2{ background-color: orange; font-size: 32px; } </style> </head> <body> <div id="box"> <idv :class="cls">字符串</idv> <br> <idv :class="{box1:false}">对象</idv> <br> <idv :class="[cls,cls1]">数组</idv> <br> <idv :class="cls3?'box1':''">三元表达式</idv> </div> <script> var vm = new Vue({ el:"#box", data:{cls:"box2", cls1:{ box1:false, box2:true, }, cls3:true}, methods:{}}) </script> </body>
格式1：值是json对象，对象写在元素的:style属性中 标签元素： <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div> data数据如下： data: { activeColor: 'red', fontSize: 30 } 格式2：值是对象变量名，对象在data中进行声明 标签元素： <div v-bind:style="styleObject"></div> data数据如下： data: { styleObject: { color: 'red', fontSize: '13px' } } 格式3：值是数组 标签元素： <div v-bind:style="[style1, style2]"></div> data数据如下： data: { style1:{ color:"red" }, style2:{ background:"yellow", fontSize: "21px" } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #card{ width: 500px; height: 350px; } .title{ height:50px; } .title span{ width: 100px; height: 50px; background-color:#ccc; display: inline-block; line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */ text-align:center; } .content .list{ width: 500px; height: 300px; background-color: yellow; display: none; } .content .active{ display: block; } .title .current{ background-color: yellow; } </style> <script src="Vue/vue/vue.min.js"></script> </head> <body> <div id="card"> <div class="title"> <span @click="num=0" :class="num==0?'current':''">国内新闻</span> <span @click="num=1" :class="num==1?'current':''">国际新闻</span> <span @click="num=2" :class="num==2?'current':''">银河新闻</span> <!--<span>{{num}}</span>--> </div> <div class="content"> <div class="list" :class="num==0?'active':''">国内新闻列表</div> <div class="list" :class="num==1?'active':''">国际新闻列表</div> <div class="list" :class="num==2?'active':''">银河新闻列表</div> </div> </div> <script> var vm = new Vue({ el:"#card", data:{ num:0, }, }); </script> </body> </html>
<style> .box{ width:200px ; height:30px; background-color: red; } </style> <body> <div id="app"> <button>登录</button> <div class="box" v-if="is_show">登录窗口</div> </div> <script> var vm = new Vue({ el:"#app", data:{ is_show:false } }) </script>
v-else
<div id="app"> <p v-if="is_show"><a>登录</a></p> <p v-else="is_show"><a>退出</a></p> </div> <script> var vm = new Vue({ el:"#app", data:{ is_show:false } }) </script>
v-else-if
<div id="app"> <p v-if="num==1"><a>1</a></p> <p v-else-if="num==2"><a>2</a></p> <p v-else="num==3"><a>3</a></p> </div> <script> var vm = new Vue({ el:"#app", data:{ num:3 } }) </script>
v-show
用法和v-if大致一样，区别在于2点：
-
v-show后面不能v-else或者v-else-if
-
v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
<div id="app"> <p v-show="is_show">隐藏</p> </div> <script> var vm = new Vue({ el:"#app", data:{ is_show:true } }) </script>
列表渲染指令
div id="app"> <table border="1" align="center"> <tr> <th>序号</th> <th>ID</th> <th>标题</th> <th>价格</th> </tr> <tr v-for="book,index in book_list"> <td>{{index+1}}</td> <td>{{book.id}}</td> <td>{{book.title}}</td> <td>{{book.price}}</td> </tr> </table> </div> <script> var vm = new Vue({ el:"#app", data:{ book_list:[ {"id":1,"title":"图书名称1","price":200}, {"id":2,"title":"图书名称2","price":200}, {"id":3,"title":"图书名称3","price":200}, {"id":4,"title":"图书名称4","price":200}, ] } }) </script>
<div id="app"> <p>{{money|func}}</p> <p>{{money}}</p> </div> <script> // 全局引用 Vue.filter("func",function (money) {return money.toFixed(2)+"元"}) var app = new Vue({ el:"#app", data:{ money:123.123123 }, // 局部使用 // filters:{ // func(money){return money.toFixed(2)+"元"} // } }) </script>
<div id="app"> <input type="text" v-model="num1">+<input type="text" v-model="num2">=<span>{{total}}</span> </div> <script> var app = new Vue({ el:"#app", data:{ num1:0, num2:0, }, computed:{ total(){return parseFloat(this.num1)+parseFloat(this.num2)} } }) </script>
<div id="app"> <button @click="num++">点赞{{num}}</button> </div> <script> var app = new Vue({ el:"#app", data:{num:0}, watch:{ num(){if(this.num>5)this.num=5} } }) </script>
<script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{ num:0 }, beforeCreate:function(){ console.log("beforeCreate,vm对象尚未创建,num="+ this.num); //undefined this.name=10; // 此时没有this对象呢，所以设置的name无效，被在创建对象的时候被覆盖为0 }, created:function(){ console.log("created,vm对象创建完成,设置好了要控制的元素范围,num="+this.num ); // 0 this.num = 20; }, beforeMount:function(){ console.log( this.$el.innerHTML ); // <p>{{num}}</p> console.log("beforeMount,vm对象尚未把data数据显示到页面中,num="+this.num ); // 20 this.num = 30; }, mounted:function(){ console.log( this.$el.innerHTML ); // <p>30</p> console.log("mounted,vm对象已经把data数据显示到页面中,num="+this.num); // 30 }, beforeUpdate:function(){ // this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app console.log( this.$el.innerHTML ); // <p>30</p> console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中,num="+this.num); // beforeUpdate----31 }, updated:function(){ console.log( this.$el.innerHTML ); // <p>31</p> console.log("updated,vm对象已经把过呢更新后的data数据显示到页面中,num=" + this.num ); // updated----31 }, }); } </script> </head> <body> <div id="app"> <p>{{num}}</p> <button @click="num++">按钮</button> </div> </body>
刷新页面
使用.stop和.prevent
<style> .box1{ width: 200px; height: 200px; background: #ccc; } .box2{ width: 100px; height: 100px; background: pink; } </style> <script src="js/vue.min.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{} }) } </script> </head> <body> <div id="app"> <div class="box1" @click="alert('box1')"> <div class="box2" @click.stop.prevent="alert('box2')"></div> <!-- @click.stop来阻止事件冒泡 --> </div> <form action="#"> <input type="text"> <input type="submit"> <input type="submit" value="提交02" @click.prevent=""> <!-- @click.prevent来阻止表单提交 --> </form> </div> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> <script src="js/vue.js"></script> </head> <body> <div id="todolist" class="list_con"> <h2>To do list</h2> <input type="text" v-model="message" class="inputtxt"> <input type="button" @click="addItem" value="增加" class="inputbtn"> <ul id="list" class="list"> <li v-for="item,key in dolist"> <span>{{item}}</span> <a @click="upItem(key)" class="up" > ↑ </a> <a @click="downItem(key)" class="down"> ↓ </a> <a @click="delItem(key)" class="del">删除</a> </li> </ul> </div> <script> // 计划列表代码 let vm = new Vue({ el:"#todolist", data:{ message:"", dolist:[ "学习html", "学习css", "学习javascript", ] }, methods:{ addItem(){ if(this.messsage==""){ return false; } this.dolist.push(this.message); this.message = "" }, delItem(key){ this.dolist.splice(key, 1); }, upItem(key){ if(key==0){ return false; } // 向上移动 let result = this.dolist.splice(key,1); this.dolist.splice(key-1,0,result[0]); }, downItem(key){ // 向下移动 let result = this.dolist.splice(key, 1); console.log(result); this.dolist.splice(key+1,0,result[0]); } } }) </script> </body> </html>