提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

Java框架（Vue）学习笔记

JAVA Vue App 组件 笔记 学习 框架 数据
2023-02-26 12:27:22 时间

1、vue概述

1.1 Vue基本概念

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

Java框架（Vue）学习笔记

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

1.3 Vue入门案例

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>快速入门</title>     <script src="http://9i0i.com/pic.php?p=vuejs-2.5.16.js"></script> </head> <body>     <div id="app">         {{message}}     </div>     <script>         var app = new Vue({             el:"#app",  //表示要控制的区域             data:{//存放el中要用到的数据，是M，用来保存每个页面的数据                 message:"Hello world!"             }         });     </script> </body> </html>

1.4 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

表达式的定义: {{Expressions}}

  • 支持加减乘除四则运算
  • ​ 支持逻辑运算
  • ​ 支持三目运算符
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个 表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}

2、常用指令

2.1 v-text指令（文本）

v-text会覆盖元素中原本的内容，但是插值表达式，只会替换自己的占位符，不会把整个元素的内容清空。

表达式v-text存在问题：对于值当中存在html元素时，不能渲染成html元素，只能渲染成普通字符串。

<body>     <div id="app">         <p v-text="message1">h1</p>         <p >{{message1}}</p>         <p v-text="message2"></p>         <p>{{message2}}</p>     </div>     <script>         var app = new Vue({             el:"#app",  //表示要控制的区域             data:{//存放el中要用到的数据，是M，用来保存每个页面的数据                 message1:"Hello Amy!",                 message2:"<h1>Hello world!</h1>"             }         });     </script> </body>s

2.2 v-html指令（innerHTML)

v-html，更新元素的innerHTML。
注意：内容按普通注意：内容按普通 HTML 插入 – 不会作为 Vue 模板进行编译 。

<body>     <div id="app">         <p v-text="message2"></p>         <p v-html="message2"></p>     </div>     <script>         var app = new Vue({             el:"#app",               data:{                 message1:"Hello Amy!",                 message2:"<h1>Hello world!</h1>"             }         });     </script> </body>

2.3 v-bind指令（属性）

v-bind:Vue中用于绑定属性的指令

  • 实现数据的单向绑定，从M绑定到V，不能实现双向绑定
  • v-bind会把值当成是js的表达式去处理,可以写合法的表达式
  • 语法格式：v-bind:属性名=”model名” ，可以简写成: 属性形式
  • ※ V-bind只能实现数据的单向绑定，从M绑定到V，不能实现双向绑定。
<body>     <div id="app">         <p v-bind:title="message1">绑定属性，请使用浏览器工具查看title属性</p>     </div>     <script>         var app = new Vue({             el:"#app",               data:{                 message1:"我是新的title"             }         });     </script> </body>

v-bind的简写格式

<a v-bind:href="urlx">v-bind的完整格式</a> <a :href="urlx">v-bind的简写格式</a>

2.4 v-model指令（表单）

运用在表单元素当中，实现数据的双向绑定，从V->M，或从M->V .
v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。使用时应该通过 JavaScript 在组件的 data 选项中声明初始值。

<body>     <div id="app">         <p>{{message}}</p>         <input v-model="message" size="50">     </div>     <script>         var app = new Vue({             el:"#app",               data:{                 message:"我就是我，不一样的烟火"             }         });     </script> </body>

2.5 v-on指令（事件）

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

  • 绑定事件监听器。事件类型由参数指定。
  • 表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。可以缩写成@
  • 需要在Vue对象中通过methods属性定义事件处理方法。
  • 用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
  • ※ 不能在v-on属性中直接写JS代码

v-on:click

<body>     <div id="app">         <p>{{message}}</p>         <button v-on:click="fun('good')">坐看云起时</button>     </div>     <script>         var app = new Vue({             el:"#app",               data:{                 message:"我就是我，不一样的烟火，不要想改变我"             },             methods:{                 fun:function(msg){                     this.message=msg;                 }             }                      });     </script> </body>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta
<body>     <div id="app">         <input type="text" @keyup.enter="fun1">     </div>     <script>         new Vue({             el:'#app',             methods:{                 fun1:function(){                         alert("按了Enter键");                     }             }         });     </script>  </body>

简写形式

<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>

3、条件语句与循环语句

3.1 v-if 和v-show

指令v-if、v-else、v-else-if用于条件控制，根据表达式的值来决定是否渲染元素。v-if: 每次都都删除或创建元素。 有较高的切换性能消耗。涉及到频繁的切换，最好不要使用v-if。

v-show指令：不会重新进行DOM的删除、创建操作，只是切换了display csss属性。有较高的初始渲染消耗。当元素可能永远不会显示给用户，则使用v-if。

<body>     <div id="app">         <div v-if="level=='A'">我是Amy</div>         <div v-else-if="level=='B'">我是Belly</div>         <div v-else-if="level=='C'">我是Cindy</div>         <div v-else>我是我自己，不是其他任何谁</div>         <div v-show="flag">放我出来，你们这些妖孽</div>         <button @click="toggle">切换</button>     </div>     <script>         new Vue({             el:'#app',             data:{                 level:'D',                 flag:false             },             methods:{                 toggle:function(){                         this.flag = !this.flag;                     }             }         });     </script>  </body>

3.2 v-for

循环使用 v-for 指令：需要以 item in items 形式的特殊语法。

  • 迭代数组：items 是源数据数组并且 item 是数组元素迭代的别名。
  • 迭代对象：Items可以是对象，迭代属性。Item可以为value，key，index格式，默认为value。
  • 迭代整数：Items 可以是整数，迭代1~n之间的整数。
  • 迭代字符串：items为字符串，迭代字符串中的每个字母，会去掉开头和结尾的空格符。
<body>     <div id="app">         <h3>迭代数字</h3>         <span v-for="n in 5">{{n}},</span>         <h3>迭代数组</h3>         <table>             <tr v-for="itemx in arrary">                 <td>{{itemx.name}}</td>             </tr>         </table>         <h3>迭代对象</h3>         <p v-for="attr in people">{{attr}} </p>         <p v-for="(value, key,index) in people">{{index}}:{{key}}:{{value}} </p>                  <h3>迭代字符串</h3>         <span v-for="item in sentence">{{item}}</span>     </div>     <script>         new Vue({             el:'#app',             data:{                 arrary:[{name:'xiaoming'},{name:'xiaofei'},{name:'tingting'}],                 people:{name:'Amy',age:15,sex:'女'},                 sentence:" I go to school every day    "             }                      });     </script>  </body>

4、VUE的组件

7.1 什么是组件

​ 组件的出现，是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，去调用相应的组件即可。

组件和模块化的区别：

模块化：是从代码逻辑角度划分的，方便代码分层开发，保证每个功能模块的职能单一。

组件：是从UI界面的角度划分的，前端组件化，方便UI的重用。

7.2 组件的定义方式

组件的命名方式

①kebab-case，单词之间采用 – （短横线）连接，例如：my-component ，在DOM中使用时，

②PascalCase，驼峰式名称，单词之间，首字母大写，例如：MyComponent，但是在DOM中使用时，必须更改为，，是识别不了的。

a. 定义全局组件

1：通过Vue.extend()和Vue.component()注册

使用Vue.extend定义组件对象，并使用Vue.component(‘组件名’，组件对象)来注册组件

※※无论使用何种方式，创建出来的元素必须有且仅有一个根元素。

<body>     <div id="app">         <my-com1></my-com1>     </div> </body> <script>     //使用Vue.extend来创建全局组件     var com1 = Vue.extend({         template:"<h3>我是新组件</h3>"     });     //使用Vue.component('组件名',组件对象)声明组件；     Vue.component("myCom1",com1);      new Vue({         el:'#app'     }); </script>

2：直接使用 Vue.component 方法

Vue.component(‘register’, { template: “组件展示的内容” })

<body>     <div id="app">         <my-com1></my-com1>     </div> </body> <script>     Vue.component("myCom1",{template:"<h3>我是新组件-小V</h3>"});      new Vue({         el:'#app'     }); </script>

3：通过template模板方式

※：template模板需定义在Vue的控制范围外

<body>     <div id="app">         <mycom1></mycom1>     </div>     <template id="temp1">         <div>             <h3>凉州词</h3>             <h3>望洞庭</h3>         </div>     </template> </body> <script>     Vue.component("mycom1",{         template:"#temp1"     });      new Vue({         el:'#app'     }); </script>

b. 定义私有组件

局部组件定义在vue实例内部，该组件只能在vue实例控制范围内才能使用

定义方法：使用components属性定义组件

<body>     <div id="app">         <cmp1></cmp1>         <cmp2></cmp2>     </div>     <template id="cmp2template">         <h1>我的私有组件二</h1>     </template> </body> <script>     new Vue({         el:'#app',         components:{             "cmp1":{template:"<h1>我的私有组件一</h1>"},             "cmp2":{template:"#cmp2template"}          }     }); </script>

c. 组件中的数据（data）

  • 组件中可以有自己的data属性。

  • 组件中的data是一个funciton，且需要通过return返回一个对象。

    <script>         Vue.component("cmp1",{             template:"<div>我是组件1---{{msg}}</div>",             data:function(){                     return {msg:"我是组件的data"}                 }             });         Vue.component("cmp2",{template:"<div>我是组件2</div>"});         new Vue({             el:"#app"         }); </script>

5、VUE的ajax的案例

简介

vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。

axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。

基本使用

语法规则：axios([options])

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <body> <h2>Hello World!</h2>      <div id="app">          <input type="button" value="查询用户" @click="getMsg">         {{ msg }}         <table>             <tr><td>编号</td><td>姓名</td><td>生日</td></tr>             <tr v-for="value in msg"><td>{{value.id}}</td><td>{{value.name}}</td>                 <td>{{value.birth}}</td></tr>         </table>     </div>  <script src="http://9i0i.com/pic.php?p=${pageContext.request.contextPath}/jquery/vuejs-2.5.16.js"></script> <script src="http://9i0i.com/pic.php?p=${pageContext.request.contextPath}/jquery/axios.js"></script> <script>     new Vue({         el:"#app",         data:{             msg:"msg111"         },         methods:{             getMsg:function(){                 var that = this;                 // alert(1);                 axios({                     method:"get",                     url:"users",                 }).then(function(response){                         console.log(response.data);                         that.msg = response.data;                     }).catch(function(error){                     console.log(error);                 })             }         }     }); </script> </body> </html>

GET请求

语法规则：axios.get(url[,options]);

传参方式：
（1）通过url传参axios(‘url?key=value&key1=val2’).then();
（2）通过params选项传参 axios(‘url’,{params:{key:value}}).then();

<script>     new Vue({         el:"#app",         data:{             msg:"msg111"         },         methods:{             getMsg:function(){                 axios.get("json/data.json")                     .then(function(response){                         var data =eval("(" +response.data +")")                         document.getElementById("temp").innerHTML=data.msg;                                          }).catch(function(error){                     console.log(error)                 })             }                      }     }); </script>

POST请求

axios.post(url,data,[options]);

axios默认发送数据时，数据格式是Request Payload，并非常用的Form Data格式， 所以参数必须要以键值对形式传递，不能以json形式传。

<script>     new Vue({         el:"#app",         data:{             msg:"msg111"         },         methods:{             getMsg:function(){                 axios.post("json/data.json","name=zhangsan")                     .then(function(response){                         console.log(response.data)                                          }).catch(function(error){                     console.log(error)                 })             }         }     }); </script>

Java框架（Vue）学习笔记

本站部分内容转载自网络，版权属于原作者所有，如有异议请联系QQ153890879修改或删除，谢谢！
转载请注明原文链接：Java框架（Vue）学习笔记

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏
[[email protected]]
分享 (0)

相关文章