vm对象，函数传参，属性指令，style和class，v-if的使用，v-for的使用，input标签的事件，数据双向绑定

函数传参

函数，可以多传参数，也可也少传参数，都不会报错，事件对象,调用函数，不传参数，会把当前事件对象，传入,可以不接受，也可以接受

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
  <button @click="hanshu('凉',16)">点击</button>
<button @click="handleClick2">点我2</button>
</div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {},
    methods: {
      hanshu(name,age){
        console.log(name,age)
      },
	   handleClick2(event) {
                console.log(event)
            },
    }
  })
</script>

vm对象的研究

写在data和method中的属性或发放，可以从vm中直接拿出来

在控制台里输入vm.属性（就是age或者name自己定义的）

methods的函数中，要想使用data或methods中的属性，直接this.名字就可以了

属性指定用法

v-bind将字符串转换为标签内容，动态的绑定变量，变量变化，属性的值也变化

</head>
<body>
  <div id="app">
    <button @click="qwe">点击更换图片</button>
    <br>
    <img v-bind:src="url" alt="">
  </div>
</body>
<script>
  let vm = new Vue({
    el:'#app',
    data: {
      url:'111.jpg'
    },
    methods:{
      qwe(){
        this.url='https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
      }
    }
  })
</script>

点击图片变大

</head>
<body>
  <div id="app">
    <button @click="qwe">点击图片变大</button>
    <br>
    <img v-bind:src="url" :height="h" width="w">
  </div>
</body>
<script>
  let vm = new Vue({
    el:'#app',
    data: {
      url:'111.jpg',
      h: '200px',
      w: '200px'
    },
    methods:{
      qwe(){
        this.h= '400px'
        this.w= '400px'
      }
    }
  })
</script>

定时器的使用

methods：{
函数名（{setInterval（function（）{
console.log(执行次数)
}，多少秒执行一次（1000=一秒））}）
}

随机切换图片

<body>
  <div id="app">
    <button @click="qwe">点击随机切换图片</button>
    <br>
    <img v-bind:src="url" @click="handStop">
  </div>
</body>
<script>
  let vm = new Vue({
    el:'#app',
    data: {
      url:'111.jpg',
      img_list:['333.jpg','111.jpg'],
      t:null
    },
    methods:{
      qwe(){
        var _this= this
        this.t=setInterval(function () {
          var res = Math.floor((Math.random() * _this.img_list.length))
        _this.url=_this.img_list[res]
        }, 1000)
      },   点击图片就会停止
      handStop(){
        clearInterval(this.t)
        this.t = null
      }
    }
  })
</script>

style和class

class的使用：可以通过前端更改和添加字符串，数组（给变量，追加值，class变化，页面会发生变化）。对象不可以添加只能更改自己定义的（对象的用法，必须先提前设置，后期通过修改true或false控制类。但是不能往对象中放之前不存在的值，放不存在的值，没有响应式）推荐使用：数组方式

style：推荐使用对象形式

style_str:'font-size: 80px;background-color: green', // vm.style_str='background-color: red'
            // style_arr: [{'font-size': '60px'}]  // vm.style_arr.push({'background-color':'red'})
            // style_obj: {'font-size': '60px', 'background-color': 'green'},
            style_obj: {fontSize: '60px', backgroundColor: 'green'},  // 省略key值的引号后，要变成驼峰形式
        },
        methods: {
            handleClick() {
                // this.class_obj.yellow = true  // 直接放，没有响应式
                Vue.set(this.class_obj, 'yellow', true) // 这样才有响应式
            }
        }
    })

条件渲染(v-if v-else-if v-else)

根据学生分数，显示学生的 优秀，良好

<body>
  <div id="app">
    <div v-if="score>=90&&score<=100">优秀</div>
    <div v-else-if="score>=80&&score<90">良好</div>
    <div v-else-if="score>=60&&score<80">及格</div>
    <div v-else>不及格</div>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      score:51
    },
    methods: {}
  })
</script>
</html>

列表渲染（就是v-for使用）

购物车的展示

通过for列表的数据一一对应位置获取数据展示出来通过绑定按钮绑定一个方法点击加载去信息

image

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
              <h1 class="text-center">购物车</h1>
              <div class="pull-right">
                  <button class="btn btn-danger" @click="handqq">加载购物车</button>
              </div>
              <div class="bs-example" data-example-id="striped-table">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>id号</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="good in good_list">
                    <th scope="row">{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td>{{good.count}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script>
    let vm = new Vue({
      el: '#app',
      data: {
        good_list:[

        ]
      },
      methods: {
        handqq(){
          this.good_list=[
          {'id':1,'name':'车子','count':2,'price':100000},
          {'id':2,'name':'脸盆','count':1,'price':20},
          {'id':3,'name':'面面','count':3,'price':6},
          {'id':4,'name':'钢笔','count':4,'price':5}
          ]
        }
      }
    })
</script>

v-for循环其它类型（数字，字符串，数组，对象）

效果

image

</head>
<body>
<div id="app">
  <h1>循环数字</h1>
  <ul>
      <li v-for="(value,index) in number">{{value}}------{{index}}</li>
  </ul>
  <h1>循环字符串</h1>
  <ul>
      <li v-for="(value1,index1) in str">{{value1}}------{{index1}}</li>
  </ul>
  <h1>循环数组</h1>
  <ul>
      <li v-for="(value,index) in arr">{{value}}------{{index}}</li>
  </ul>
  <h1>循环对象(key和value是反的)</h1>
  <ul>
      <li v-for="(value,key) in obj">key是{{key}}-----value是{{value}}</li>
  </ul>
</div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      number: 10,
      str: 'shi is handsome',
      arr: [3,1,4,78,89],
      obj: {name: 'shi', age:16,gender: '女'}
    }
  })
</script>

数据的双向绑定（p用户名input type=“text” v-model=“username”p）数据双向绑定---》只有input标签---》v-model 做双向数据绑定

使用方法v-model

单项绑定前端更改没有用不会跟着更改
<body>
  <div id="app">
    <p>用户名<input type="text" :value="username"></p>
    <p>密码<input type="password" :value="password"></p>
    <p>
        <button @click="handle">登录</button>
    </p>

  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      'username':'式守',  数据都是固定死了
      'password':'123'
    },
    methods: {
        handle(){
            console.log(this.username)
            console.log(this.password)
        }
    }
  })
</script>
</html>
双向绑定都会跟着改变
<body>
  <div id="app">
    <p>用户名<input type="text" v-model="username"></p>
    <p>密码<input type="password" v-model="password"></p>
    <p>
        <button @click="handle">登录</button>
    </p>

  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      'username':'式守',
      'password':'123'
    },
    methods: {
        handle(){
            console.log(this.username)
            console.log(this.password)
        }
    }
  })
</script>
</html>

input标签的事件

-input：只要输入内容，就会触发

-change：只要输入框发生变化离开输入框，就会触发

-blur：只要失去焦点，就会触发

</head>
<body>
  <div id="app">
    <h1>input事件</h1>
    <input type="text" @input="handleInput" v-model="username">----{{username}} 输入内容就会改变
    <h1>change事件</h1>
    <input type="text" @change="handleChange" v-model="username">-----{{username}} 输入内容离开文本框才会执行函数
    <h1>blur事件</h1>
    <input type="text" @blur="handleBlur" v-model="username">----------{{username}} 输入电击文本，然后在点别的地方机会执行函数
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
        username: '式守',
        username1: '',
        username2: ''
    },
    methods: {
        handleInput(){
            console.log(this.username)
        },
        handleChange(){
            console.log('执行了')
        },
        handleBlur(){
            console.log('失去焦点')
        }
    }
  })

过滤的使用

<body>
  <div id="app">
      <input type="text" v-model="search" @input="handleInput">
      <hr>
      <ul>
           <li v-for="item in newdataList">{{item}}</li>
      </ul>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
        search: '',
        dataList: ['a','at','atom','atto','be','beyond','cs','csrf'],
        newdataList: ['a','at','atom','atto','be','beyond','cs','csrf']
    },
数组的过滤
var arr = ['a','at','atom','atto','be','beyond','cs','csrf']
数组.filer(匿名函数，接受一个参数，函数必须返回true或false，如果返回true，表示这个值保留)
var new_arr = arr.filter(function (item){
console.log(item)if(item.length>3){return ture}else{return false}}})
console.log(new_arr)
判断一个子字符串,是否在另一个字符串中
var s='is'
var s1= 'shi is handsome'
var res=s1.indexOf(s)  s的索引位置，如果大于等于0，说明s在s1中
console.log(res)
过滤数组中的字符串
var arr = ['a','at','atom','atto','be','beyond','cs','csrf']
var search = 'at'
var new_arr = arr.filter(function (item) {
    if(item.indexOf(search) >=0){
        return true
    }else {return false}
})
console.log(new_arr)
最终的结合
    methods: {
        handleInput(){
            console.log(this.search)
            var _this = this
            this.newdataList = this.dataList.filter(function (item){
                if (item.indexOf(_this.search)>=0){
                    return true
                }else {
                    return false
                }
            })
        }
    }
  })
 第二种方法
handleInput() {
console.log(this.search)
根据用户输入的search，对数组进行过滤，剩下只有包含输入文字的字符串
var _this = this
this.newdataList = this.dataList.filter(function (item) {
return item.indexOf(_this.search) >= 0
})
}
第三种方法
            handleInput() {
                this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)}}})
posted @ 2023-06-05 16:47  因近  阅读(44)  评论(0)  编辑  收藏  举报