vue学习笔记-day03

vue学习笔记-day03

day03

1.(掌握)JS高级函数

1.1 ES6循环

  • for(let i in this.books); i 表示books里面的索引
<div id='app'>
    
    
</div>
<script> new Vue({
     el:'#app', data:{
     books:['java','C#','paython','springboot'] }, methods:{
     } }) </script>
  • for(let book of this.books); book 是books里面的元素(或者是对象)
<div id='app'>
    
    
</div>
<script> new Vue({
     el:'#app', data:{
     books:['java','C#','paython','springboot'] }, methods:{
     } }) </script>

1.2 高级函数

Map / Filter / reduce

编程范式: 命令式编程 | 声明式编程

编程范式: 面向对象编程(第一公民:对象) | 函数式编程(第一公民:函数)

<script> const nums=[10,111,20,30,40,222,50,78]; //取出小于100数字 let newNums=[]; for(let n of nums){
     newNums.push(n); } let new2Nums=[]; //将取出小于100的数字进行转换:全部*2 for(let n of newNums){
     new2Nums.push(n*2); } //将所有new2Num数字相加,得到最终 let totalNum = 0; for(let n of new2Num){
     totalNum +=n; } </script>
  • map / filter 函数

和jdk8 stream 流 和lambda表达式用法差不多

<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script> const nums=[10,111,20,30,40,222,50,78]; //使用filter函数进行过滤, //function(n){} 回调函数必须返回一个boolen值 //当返回true,函数内部会自动将这次回调的n加入到新的数组中 //我们用newNums接收一下 let newNums = nums.filter(function(n){
     //这里面写过滤的规则,如果满足规则返回true, //同时把满足规则的n 放入到新的数组newNums中.反之就不放入 return n<100; }); console.log(newNums); let new2Nums = newNums.map(function(n){
     return n*2; }) console.log(new2Nums) </script>
	</body>

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxicKdzl-1604650784989)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/D41ACFCBBFE446E8BDFECC6DDC40ECA9/18800)]

Webstrome可以查看到源码

  • reduce函数

概述:reduce() 方法接收一个函数作为累加器,

​ reduce 为数组中的每一个元素依次执行回调函数,

​ 不包括数组中被删除或从未被赋值的元素,

​ 接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组

语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VDzFrcdo-1604650784995)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/99CFF7BD99204E048688EACEEA1F86FB/18805)]

<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script> const nums=[10,111,20,30,40,222,50,78]; let newNums = nums.filter(function(n){
     return n<100; }); console.log(newNums); let new2Nums = newNums.map(function(n){
     return n*2; }) console.log(new2Nums) //对数组的内容进行汇总 //传递参数:参数一: 前一个遍历元素的值 //参数二:初始值 //let num3Nums = new2Nums.reduce(function(pre,n){return pre+n;},0) /* => 箭头函数 */ let total = nums.filter(n=>n<100) .map(n=>n*2) .reduce((prevalue,n)=>prevalue+n); console.log(total) </script>
	</body>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sOP1igL7-1604650784998)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/BC02E9BA022E405DA9AB74229E54B36F/18803)]

<script> const nums= [10,333,34,54,55]; let total =nums.reduce(function(pre,n){
     return pre+n; },0) console.log("total:"+total) //--------------------------------- let totalNum = 0; for(let num of nums){
     totalNum +=num; } console.log("totalNum:"+totalNum); //--------------------------------- //计算小于55数总和 let total2Num = nums.filter(n=>n<55). reduce(function(pre,n){
    return pre+n;},0); console.log("total2Num:"+total2Num); //--------------------------------- //计算小于100.并且把小于100的数*2,然后求出总数. let total3Num = nums.filter(n=>n<100).map(m=>m*2) .reduce(function(pre,n){
    return pre+n},0); console.log("total3Num:"+total3Num); </script>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Txf7g4y-1604650785002)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/98A67CA5F518470BABD0F2D4EA73A070/18807)]

2.(掌握)v-model数据双向绑定

2.1 基本使用

<div id="app">
    <input type="text" v-model='msg'/>
    {
  {msg}}
</div>
 <script> new Vue({
     el:"#app", data:{
     msg:"hello vue" } }) </script>

v-on:input 事件 、 v-bind:value 两个相结合去实现v-model

<input type="text" v-bind:value="msg" v-on:input="valueChange($event)"/>
<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value"/>


<script> new Vue({
      el:'#app', data:{
      msg:"hello " }, methods:{
      valueChange(event){
      console.log(event); this.msg = event.target.value; } } }) </script>

$event.target.value

2.2 v-model绑定单选按钮radio

radio 进行双向绑定的时候需要绑定value值::value

<div id='app'>
    <input type="radio" id="male" value="" v-model='sex'><input type="radio" id="female" value="" v-model='sex'><h1> 你选择的性别:{
  {sex}}</h1>
</div>
		<script> new Vue({
     el:'#app', data:{
     sex:'男' } }) </script>

  • radio 进行互斥(就是只能选择一个),如果v-model绑定同一个值是可以进行互斥,不用写name的。

  • 在提交服务器的时候。name 作为key ,value 作为value提交给服务端然后进行保存

2.3 v-model绑定checkbox

  • 绑定多个复选框
<div id='app'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {
  { checkedNames }}</span>

</div>

<script> new Vue({
     el:'app', data:{
     checkedNames:[] } }) </script>
  • 选中单个复选框
<div id='app'>
	<label for="agree">
    	<input type='checkbox' id="agree" v-model='agree'/>同意协议
        <h2>
            选择结果:{
  {agree}}
        </h2>
 	</label>    
    <button :disabled='!agree'>
        下一步
    </button>
    
</div>
<script> new Vue({
     el:"#app", data:{
     agree:false } }) </script>

checked是布尔类型的数据

2.4 v-model绑定下拉框

 <div id="app">  
  <!-- 下拉框 指定name 是为了提交给服务器的时候作为key -->
          <select name="city" v-model="selected">
              <option disabled value="">请选择</option>
              <option value='001'>北京</option>
              <option value='002'>上海</option>
              <option value='003'>深圳</option>
          </select> <span> 您选择的是: {
  {selected}}</span>
  </div>
      <script src="./vue.js"></script>
      <script> var vm = new Vue({
     el: '#app', data: {
     selected: '' } }); </script> 

下拉框数据绑定:

  • select 的值来源于被选中的opetion的value值; 如果下拉框的option标签中没有属性,被选中的值就是<option></option>中的值
  • 显示默认的option 默认option的value和select初始值一致即可.
  • disabled 不能选择
  • 如果要选择多个:multiple 属性
<body>
<div id='app'>
<!-- 按住ctrl 就可以选择多个了 -->
<select name="city" v-model="citys" multiple>
<option value='重庆'>重庆</option>
<option value='合川'>合川</option>
<option value='铜梁'>铜梁</option>
<option value='北京'>北京</option>
</select>
<h1>选择的结果:{
{citys}}</h1>
<hr color="red" />
<div id='app'>
<select name="city" v-model="city">
<option value='' disabled>--请选择--</option>
<option value='重庆'>重庆</option>
<option value='合川'>合川</option>
<option value='铜梁'>铜梁</option>
<option value='北京'>北京</option>
</select>
<h1>选择的结果:{
{city}}</h1>
</div>
<script> new Vue({
 el: '#app', data: {
 citys: [], city: '' } }) </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwWOtCjL-1604650785005)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/6A7D7B6D304442E38447E1AB38859BB9/18809)]

2.5 值绑定

<div id='app'>
<label v-for="(item,index) in citys" :for="item">
<input type="checkbox" :id="item" :value="item" v-model="city"/>{
{item}}
</label>
<h1>你选择的城市:{
{city}}</h1>
</div>
<script> new Vue({
 el: '#app', data: {
 citys: ['重庆','合川','铜梁','旧县','十塘'], city: [] } }) </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GR20KQEO-1604650785007)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/5BD117641E6E4AD493AE57BC9557B1CC/18811)]

2.6 v-model修饰符

vue学习笔记-day03

3 (掌握)组件Componet

我个人任务组件作为模块开发准备前提之一。因为还会涉及到route路由。在vue中组件可以分为局部组件和全局组件(过滤器也是一样).设计原则:单一职责原则。自己负责自己那点事情。组件还体现了复用性。

处理组件化,还有模块化 在实际项目中运用到的。

vue学习笔记-day03

3.1 组件基本使用

创建组件构造器——>注册组件——->使用组件

  • 全局组件
<div id='app'>
<spanx></spanx>
<hr />
<xxxx></xxxx>
</div>
<script> //全局组件: //vue2.x写法: const temp2 = Vue.extend({
 template: "<h3>xxxyyyy</h3>" }) Vue.component("xxxx", temp2); //====>另一种写法: 语法糖写法  const temp = {
 template: '<h1>xxxxxsssssxxxx</h1>' } Vue.component("spanx", temp) new Vue({
 el: '#app', data: {
 }, methods: {
 } }); </script>
  • 局部组件
<div id='app'>
<xyz></xyz>
</div>
<script> const tempA = {
 template:"<h2>xxxxxyyyyzzzzz</h2>" } new Vue({
 el: '#app', data: {
 }, components:{
 //组件名称 : 对象 "xyz":tempA }, methods: {
 } }); </script>
<div id='app'>
</div>
<script> new Vue({
 el:'#app', data:{
 }, methods:{
 } }) </script>

3.2 父组件和子组件

<div id='app'>
<com-b></com-b>
</div>
<script> const comA = {
 template:"<div>comA我是子组件</div>" } const comB = {
 template:` <div> comB我是父组件 <comA></comA> </div> `, components:{
 'comA':comA } } new Vue({
 el: '#app', data: {
 }, components:{
 'comB':comB }, methods: {
 } }); </script>
  • 模板在命名的时候如果使用的是驼峰命名规则,在写标签的时候大写的字母小写然后使用”-“进行连接.比如:comB ——> <com-b></com-b>
  • 模板里面的标签需要一个根标签。
<body>
<div id='app'>
<my-span></my-span>
<hr/>
<my-apple></my-apple>
</div>
<template id='myspan'>
<div>
<h1>
我是模板标题
</h1>
<p>我是内容。xxxxxx</p>
</div>
</template>
<script src="js/vue.js"></script>
<script> //-----------------start // 个人觉得这种比较方便一点 const mytemp = {
 template:` <div> <h1>标题</h1> <p>内容</p> </div> ` } Vue.component('myApple',mytemp); //-----------------end new Vue({
 el: '#app', data: {
 }, components: {
 'mySpan':{
 template:'#myspan' } }, methods: {
 } }); </script>
</body>
  • 组件的options:

    • template 组件模板
    • components;用于注册子组件
    • data 存放组件的数据
    • methods
    • props:可以是数组类型 ,可当着组件的属性,组件标签中使用绑定该属性 :moves='vue实例中data中的数据',写对象。可以限定属性的类型.还可以提供一些默认值
    <body>
    <div id='app'>
    <com-b></com-b>	
    </div>
    <script src="js/vue.js"></script>
    <script> const comA = {
     template:`<div>我是模板cOMa</div>` } const comB = {
     template:`<div> <h1>我是模板cOMb</h1> <com-a></com-a> 数量:{
    {count}} <button @click="add">add</button> </div>`, components:{
     'comA':comA }, data(){
     return {
     count:0 } }, methods:{
     add(){
     this.count++; } } } Vue.component('comB',comB); new Vue({
     el: '#app', data: {
     }, methods: {
     } }); </script>
    </body>
    

3.3 父子组件通信

  • 如何进行父子组件间的通信呢?Vue官方提到
    • 通过props向子组件传递数据
    • 通过事件向父组件发送消息

vue学习笔记-day03

父组件向子组件传值

vue实例是我们的根组件root组件

  • props 数组类型
<body>
<div id='app'>
<temp-a :cmoves='moves'></temp-a>
</div>
<script src="js/vue.js"></script>
<script> const tempA = {
 template:` <ul> <li v-for='item in cmoves'>{
{item}}</li> </ul> `, props:['cmoves'] } new Vue({
 el: '#app', data: {
 moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹'] }, components:{
 tempA }, methods: {
 } }); </script>
</body>
  • props 如果是对象类型,可以限定属性的类型
<body>
<div id='app'>
<temp-a :cmoves='moves'></temp-a>
</div>
<script src="js/vue.js"></script>
<script> const tempA = {
 template:` <ul> <li v-for='item in cmoves'>{
{item}}</li> </ul> `, //类型限制 props:{
 cmoves:Array } } new Vue({
 el: '#app', data: {
 moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹'] }, components:{
 tempA }, methods: {
 } }); </script>
</body>

vue学习笔记-day03

  • props 限定类型、给出默认值、要求必须传入参数
<body>
<div id='app'>
<temp-a :cmoves='moves' :cmsg='msg'></temp-a>
</div>
<template id='mytemplate'>
<div>
<ul>
<li v-for='item in cmoves'>{
{item}}</li>
</ul>
<h1>{
{cmsg}}</h1>
</div>
</template>
<script src="js/vue.js"></script>
<script> const tempA = {
 template:'#mytemplate', //类型限制 // props:{
 // cmoves:Array // } // 类型是对象或者数组时, 默认值必须是一个函数 props:{
 cmsg:{
 type:String, default:"hello vue", required:true }, cmoves:{
 type:Array, default(){
 return [] } } } } new Vue({
 el: '#app', data: {
 moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹'], msg:"学习vue" }, components:{
 tempA }, methods: {
 } }); </script>
</body>
  • props驼峰命名规则: 如果props里面的属性是驼峰命名规则,那么在绑定属性的时候需要把大写字母变小写,同时用’-‘进行连接.比如:(伪代码)
<temp-a :c-msg='msg'></temp-a>
<script> props:{
 cMsg:String } </script>
  • 需要注意:组件中的template中必须要有一个根组件
子组件向父组件传值

通过自定义事件。this.$emit(自定义事件名,参数)

<body>
<div id='app'>
<temp @get-project-info='getInfo'></temp>
</div>
<template id='mytemp'>
<div>
<button v-for="item in categories" @click="getInfo(item.id)">{
{item.name}}</button>
</div>
</template>
<script src="js/vue.js"></script>
<script> const temp = {
 template:'#mytemp', data(){
 return {
 categories:[ {
id:'001',name:'手机数码'}, {
id:'002',name:"流行服装"} ] } }, methods:{
 getInfo(value){
 //$emit事件传递 //事件的名称自定义, value就是我们要传递给父组件的值 this.$emit('get-project-info',value); } } } new Vue({
 el: '#app', data: {
 moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹'], msg:"学习vue" }, components:{
 temp }, methods: {
 getInfo(value){
 console.log("子组件传递的值:"+value) } } }); </script>
</body>

vue学习笔记-day03

day04

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100733.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • CentOS7网络配置-静态IP设置

    CentOS7网络配置-静态IP设置安装完VM后,需要进行网络配置。第一个目标为可以进行SSH连接,可以从本机到VM进行文件传送。故,VM中centos需要可以独立访问外网!【1】修改网络配置文件安装完CentOS7时,网络是通的。此时网络配置如下:网络配置文件路径:/etc/sysconfig/network-scripts/ifcfg-enp0s3其中“enp03”是你的网卡名称。TYPE="Ethernet"PROXY_ME

  • 整除计算器_整除

    整除计算器_整除原题链接这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1、11、111、1111等。传说任何一个光棍都能被一个不以5结尾的奇数整除。比如,111111就可以被13整除。 现在,你的程序要读入一个整数x,这个整数一定是奇数并且不以5结尾。然后,经过计算,输出两个数字:第一个数字s,表示x乘以s是一个光棍,第二个数字n是这个光棍的位数。这样的解当然不是唯一的,题目要求你输出最小的解。提示:一个显然的办法是逐渐增加光棍的位数,直到可以整除x为止。但难点在于,s可能是个非常大的数 ——

  • pycharm下的调试功能[通俗易懂]

    pycharm下的调试功能[通俗易懂]pycharm下的调试功能

  • [转] can not find module @angular/animations/browser

    [转] can not find module @angular/animations/browser

  • couldn’t transfer artifact_could not convert from to

    couldn’t transfer artifact_could not convert from toCouldnottransferartifactxxxfrom/toxxx解决方案问题描述解决步骤问题描述本地仓库有对应的jar包,但是maveninstall一直提示Couldnottransferartifact。折腾了我老半天Failedtoreadartifactdescriptorfor*:Couldnottransferartifact…

  • 5-去掉a标签下划线,禁止a标签的跳转「建议收藏」

    5-去掉a标签下划线,禁止a标签的跳转「建议收藏」1.去下划线:  写样式,a{text-decoration:none;  或在a标签内联里面写style=”text-decoration:none;”;2.禁用a标签跳转:a标签href不跳转禁止跳转当页面中a标签不需要任何跳转时,从原理上来讲,可分如下两种方法:标签属性href,使其指向空或不返回任何内容。如:<ahref=”java…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号