Vue
一、简介
-
框架
任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结**『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』**。
于是有人把成熟的**『固定解决方案』收集起来，整合在一起，就成了『框架』**。
在使用框架的过程中，我们往往只需要告诉框架**『做什么（声明）』，而不需要关心框架『怎么做（编程）』**。
对于Java程序来说，我们使用框架就是导入那些封装了**『固定解决方案』的jar包，然后通过『配置文件』**告诉框架做什么，就能够大大简化编码，提高开发效率。我们使用过的junit其实就是一款单元测试框架。
而对于JavaScript程序来说，我们使用框架就是导入那些封装了**『固定解决方案』的『js文件』**，然后在框架的基础上编码。
实际开发中使用框架时，我们也主要是告诉框架要做什么，具体操作是框架完成的。
-
开发中的最佳实践
『最佳实践』是实际开发中，针对特定问题提炼出来的最好的解决方案。把『最佳实践』抽取出来，封装到各自编程语言的程序包中，就是框架的基础。
Java语言的程序包：jar包
JavaScript语言的程序包：外部js文件
对于Java程序来说，框架=jar包+配置文件。对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。
-
声明式
『声明式』是相对于『编程式』而言的。
声明式：告诉框架做什么，具体操作由框架完成
编程式：自己编写代码完成具体操作
-
在IDEA中加入vue.js文件
官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
二、vue基本语法
-
绑定属性 v-bind
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> <script language="JavaScript" src="script/vue.js"></script> <!-- vue --> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ <!-- el 是元素Element的缩写，用于和div进行绑定 --> el:"#div0", <!-- 渲染html中#div0样式内的对应参数 --> data:{ msg:"hello!!!", uname:"张三丰" } }); } </script> </head> <body> <!-- html --> <!-- id中的值对应的是vue中的el元素的值 --> <div id="div0"> <!-- 在标签体内通过{{}}告诉Vue这里需要渲染； --> <span>{{msg}}</span><br/> <!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 --> <input type="text" v-bind:value="uname"/> </div> </body> </html>
-
双向数据绑定 v-model
页面上数据被修改后，Vue对象中的数据属性也跟着被修改
<!-- vue --> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ <!-- el 是元素Element的缩写，用于和div进行绑定 --> el:"#div0", <!-- 渲染html中#div0样式内的对应参数 --> data:{ msg:"hello!!!", uname:"张三丰" } }); } </script> <!-- html --> <div id="div0"> <span>{{msg}}</span><br/> <input type="text" v-model:value="msg"/> </div>加上**.trim**，可去除前后空格
<input type="text" v-model.trim:value="msg"/>
-
列表渲染，迭代 v-for
<!-- vue --> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ <!-- el 是元素Element的缩写，用于和div进行绑定 --> el:"#div0", data:{ fruitList:[ {fname:"苹果",price:5,fcount:200,remark:"苹果很好吃"}, {fname:"西瓜",price:6,fcount:300,remark:"西瓜很好吃"}, {fname:"桃子",price:3,fcount:100,remark:"桃子很好吃"}, {fname:"芒果",price:2,fcount:900,remark:"芒果很好吃"} ] } }); } </script> <!-- html --> <div id="div0"> <table> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>描述</th> </tr> <tr v-for="fruit in fruitList"> <td>{{fruit.fname}}</td> <td>{{fruit.price}}</td> <td>{{fruit.fcount}}</td> <td>{{fruit.remark}}</td> </tr> </table> </div>
-
条件渲染 v-if / v-else / v-show
根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。
<!-- vue --> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ <!-- el 是元素Element的缩写，用于和div进行绑定 --> el:"#div0", data:{ num:2 } }); } </script> <!-- html --> <div id="div0"> <!-- v-if/v-else 条件渲染 --> <input type="text" v-model="num" /> <div v-if="num%2==0" style="width:200px;height: 200px;background-color:bisque;"> </div> <div v-else="num%2==0" style="width:200px;height: 200px;background-color: blueviolet;"> </div> <!-- v-show 通过display属性来控制这个div 是否在该页面显示 --> <input type="text" v-model="num" /> <div v-show="num%2==0" style="width:200px;height: 200px;background-color: blueviolet;"> </div> </div>
-
事件驱动 v-on
<!-- vue --> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ <!-- el 是元素Element的缩写，用于和div进行绑定 --> el:"#div0", data: { msg:"hello world" }, methods: { myReverse: function () { this.msg = this.msg.split("").reverse().join(""); } } }); } </script> <!-- html --> <div id="div0"> <span>{{msg}}</span><br/> <input type="button" value="反转" v-on:click="myReverse" /> </div>
-
侦听渲染 watch
<!-- vue --> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ <!-- el 是元素Element的缩写，用于和div进行绑定 --> el:"#div0", data: { num1:1, num2:2, num3:0 }, watch: { // 侦听属性num1和num2 // 当num1的值有改动时，需要调用后面定义的方法，newValue指的是num1的新值 num1:function (newValue) { this.num3 = parseInt(newValue) + parseInt(this.num2); }, num2:function (newValue) { this.num3 = parseInt(newValue) + parseInt(this.num1); } } }); } </script> <!-- html --> <div id="div0"> <input type="text" v-model="num1" size="2" /> + <input type="text" v-model="num2" size="2" /> = <span>{{num3}}</span> </div>
-
生命周期
<!-- vue --> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ <!-- el 是元素Element的缩写，用于和div进行绑定 --> el:"#div0", data:{ msg:1 }, methods:{ changeMsg:function (){ this.msg = this.msg + 1; } }, // vue对象创建之前 beforeCreate:function (){ console.log("beforeCreate:vue 对象创建之前---------------------"); console.log("msg:"+this.msg); }, created:function () { console.log("beforeCreate:vue 对象创建之后---------------------"); console.log("msg:"+this.msg); }, /*数据装载之前*/ beforeMount:function(){ console.log("beforeMount:数据装载之前---------------"); console.log("span:"+document.getElementById("span").innerText); }, /*数据装载之后*/ mounted:function(){ console.log("mounted:数据装载之后---------------"); console.log("span:"+document.getElementById("span").innerText); }, beforeUpdate:function () { console.log("mounted:数据更新之前---------------"); console.log("msg:"+this.msg); console.log("span:"+document.getElementById("span").innerText); }, updated:function () { console.log("mounted:数据更新之后---------------"); console.log("msg:"+this.msg); console.log("span:"+document.getElementById("span").innerText); } }); } </script> <!-- html --> <div id="div0"> <span id="span">{{msg}}</span> <input type="button" value="改变msg的值" @click="changeMsg"/> </div> </body> </html>
2234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
