zoukankan html css js c++ java

(二)vue数据处理

1:计算属性和监视

计算属性

1) 在 computed 属性对象中定义计算属性的方法

2) 在页面中使用{{方法名}}来显示计算的结果

2:监视属性

1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算

3: 计算属性高级

1) 通过 getter/setter 实现对属性数据的显示和监视

2) 计算属性存在缓存, 多次读取只执行一次 getter 计算

<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1"  v-model="fullname1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullname"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullname}}</p>
  <p>{{fullname}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   const vm = new Vue({
     el:"#demo",
     data:{
         firstName : "A",
         lastName : "B",
         fullname :"A B",
         fullname2:"A-B"
     },
       computed:{
           fullname1(){
               return this.firstName + " " + this.lastName;
   },
           fullName3: {
               set(value){
                   // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
                   console.log('fullName3 set()', value)
                   // 更新firstName和lastName
                   const names = value.split('-')
                   this.firstName = names[0]
                   this.lastName = names[1]
               },
               get(){ //// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
                   return this.firstName + '-' + this.lastName
               }
           }

       }

   })
 vm.$watch("lastName",function (value) {
     //lastName的新值
     console.log('$watch lastName', value);
     this.fullname = this.firstName + " "+value;
 })
</script>
</body>

2: class 与与 style 绑定

1. 理解

在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
3. style绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性

<head>
    <meta charset="UTF-8">
    <title>04_class与style绑定</title>
    <style>
        .classA {
            color: red;
        }
        .classB {
            background: blue;
        }
        .classC {
            font-size: 20px;
        }
    </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
    <p  :class="ClassA">ClassA</p>
    <p :class="{classA:isA,classB:isB}">{classA:isA,classB:isB} </p>
    <p></p>
    <p :style="{color:activeColor, fontSize}">{color:activeColor, fontSize}</p>
    <button @click="fun">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
     const vm = new Vue({
        el:"#demo",
        data:{
            ClassA:"classA",
            isA:true,
            isB:false,
            activeColor:"green",
            fontSize:"36"
     },
         methods:{
             fun(){
                 this.isA = false;
                 this.isB = true

             }
         }

     })
</script>
</body>

3：条件渲染和列表渲染

//通过控制OK的属性值来显示隐藏

//v-if是通过创建元素，删除元素切换，

//v-show 是通过CSS隐藏来实现用于频繁的次数

列表渲染

<li v-for="(p,index) in persons">{{index}}--{{p}}</li> //p item数组里面的对象，index数组下标

//列表渲染和排序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_列表渲染_过滤与排序</title>
</head>
<body>

<div id="demo">
  <input type="text" v-model="searchName">
  <ul>
    <li v-for="(p, index) in filterPersons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
    </li>
  </ul>
  <div>
    <button @click="setOrderType(2)">年龄升序</button>
    <button @click="setOrderType(1)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
  </div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      searchName: '',
      orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },

    computed: {
      filterPersons () {
//        debugger
        // 取出相关数据
        const {searchName, persons, orderType} = this
        let arr = [...persons]
        // 过滤数组
        if(searchName.trim()) {
          arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
        }
        // 排序
        if(orderType) {
          arr.sort(function (p1, p2) {
            if(orderType===1) { // 降序
              return p2.age-p1.age
            } else { // 升序
              return p1.age-p2.age
            }

          })
        }
        return arr
      }
    },

    methods: {
      setOrderType (orderType) {
        this.orderType = orderType
      }
    }
  })
</script>
</body>
</html>

4：事件处理和表单数据搜集

事件处理：事件的冒泡，阻止冒泡，阻止事件的默认行为

1. 绑定监听:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event
2. 事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键

<div id="example">

  <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>

  <h2>2. 事件修饰符</h2>
  <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
  <div style=" 200px;height: 200px;background: red" @click="test5">
    <div style=" 100px;height: 100px;background: blue" @click.stop="test6"></div>
  </div>

  <h2>3. 按键修饰符</h2>
  <input type="text" @keyup.13="test7">
  <input type="text" @keyup.enter="test7">
</div>

//表单数据的搜集
<body>
<!--
1. 使用v-model(双向数据绑定)自动收集数据
  text/textarea
  checkbox
  radio
  select
-->
<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>

    <span>密码: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>

    <span>爱好: </span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
    <label for="pingpang">乒乓</label><br>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介绍: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>
</body>

查看全文

相关阅读:
基于easyUI实现权限管理系统（一）一—组织结构树图形
 基于jquery实现图片拖动和曲线拖放
 SOLID原则
 架构设计-C4
中台战略
 DDD
GraphQL
kafka笔记
 maven
GIT

原文地址：https://www.cnblogs.com/love-life-insist/p/10077089.html