12.31

复习

列表过滤

computed 

<div class="root1">
      <h1>人员列表</h1>
      <input type="text" placeholder="请输入人名" v-model="keyword">
      <ul>
        <li v-for="(p,index) in filpersons " :key="p.id" >
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
</body>
<script>
new Vue({
  el:'.root1',
  data:{
    persons:[
       {id:'001',name:'马冬梅',age:23,sex:'女'},
       {id:'002',name:'周冬雨',age:21,sex:'女'},
       {id:'003',name:'周杰伦',age:34,sex:'男'},
       {id:'004',name:'温兆伦',age:45,sex:'男'}

    ],
    keyword:'',
    
  },
  computed:{
        filpersons(){
       return this.persons.filter((p)=>{
          return p.name.indexOf(this.keyword)!==-1
    })

    }
    }

})
</script>

watch

 <div class="root1">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyword">
     <ul>
      <!-- 将过滤出来的进行展示 -->
        <li v-for="(p,index) in filpersons" :key="p.id">
          <!-- 写在li里面 -->
            {{p.id}} {{p.name}}  {{p.age}}
        </li>
     </ul>
     
    </div>

</body>
<script>
    //watch实现
new Vue({
  el:'.root1',
  data:{
    keyword:'',
    persons:[
        { id:'001',name:'马冬梅',age:19},
        { id:'002',name:'周冬雨',age:19},
        { id:'003',name:'周杰伦',age:19},
        { id:'003',name:'温兆伦',age:19}

    ],
    //需要配置过滤出来的
    filpersons:[]
    
  },
  watch:{
    keyword:{
      immediate:true,//一上来就调用handler 执行 因为没有输入 是空串 所以这四个数据都符合 都会展示
      handler(newvalue){ //每个字符串都包含空字符串 
        this.filpersons=this.persons.filter((p)=>{//filter是靠返回值的
          return p.name.indexOf(newvalue) !== -1
        })
      }
    }
  }
})

    
</script>

条件渲染

<div class="root1">
    <h2>当前n的值为:{{n}}</h2>
    <button @click="n++">点我n加一</button>


       <!-- 结构在 隐藏了 适用于切换频率较高的场景-->
    <div v-show="false"> 1234 </div>


    <!-- v-if 将结构给清除了 切换频率较低的场景-->
    <div v-if="false"> 1234 </div>

 <!--v-if成立执行完后不看else if 即使else-if条件为真-->
    <div v-if="n==1">n的值是1</div>
    <div v-else-if="n==1">n的值是2</div>
    <div v-else-if="n==3">n的值是3</div>
    <!-- v-else 前面条件均不成立 则执行 不需要写条件-->
    <div v-else></div>
    <!-- v-if v-else-if 四段结构不能被打断 -->


    <!--template只能和v-if配合使用   不能和v-show使用  页面渲染的时候 template消失 不影响只有h2的结构-->
    <template >
        <h2>哈哈</h2>
        <h2>哈哈</h2>
        <h2>哈哈</h2>
    </template>
    
    
</div>
</body>
<script>
  new Vue({
    el:'.root1',
    data:{
      name:'张三',
      n:0
    }
  })
</script>

收集表单数据

​
<div class="root1">
        <form @submit.prevent="demo"> 
            账号：<input type="text"     v-model.trim="account">  <br>
            密码：<input type="password" v-model="password"> <br>
            <!-- v-model三个修饰符 -->
            <!-- .number 转为有效数字
                .trim 过滤输入首尾空格
                .lazy 失去焦点再收集 -->
            年龄: <input type="number" v-model.number="age">
            性别:男 <input type="radio" name="sex" value="male">
                 女 <input type="radio" name="sex" value="female"><br>
                 <!-- 多选配置value值 初始值是数组 收集的就是value组成的数组 -->
                 <!-- 多选 都要写value 同时要将收集的写成数组形式 -->
                 <!-- 若没有写value  则勾选一个 会返回布尔值true  会把其他的都选上 -->
            爱好:学习<input type="checkbox" value="study" v-model="hobby">
                 喝酒<input type="checkbox" value="drink" v-model="hobby">
                 羽毛<input type="checkbox" value="game" v-model="hobby"> <br>
            所属校区: <select name=""  v-model="city">
                   <option value="">请选择校区</option>
                   <option value="shanghai">上海</option>
                   <option value="xian">西安</option>
                   <option value="beijin">北京</option>
            
            </select> <br>
            <textarea name=""  cols="30" rows="10" v-model.lazy="other"></textarea> <br>
            <!-- agree 选择会变成true  -->
            <input type="checkbox" v-model="agree"> 阅读并接受<a href="">用户协议</a>
            <button>提交</button>

        </form>
    </div>
    
</body>
<script>
    new Vue({
      el:'.root1',
      data:{
        account:'',
        password:'',
        age:'',
        sex:'',
        //配置为数组
        hobby:[],
        city:'',
        other:'',
        agree:''

      },
      methods:{
        demo(){
          //输出 将对象转化为字符串 传给控制台
        console.log(JSON.stringify(this._data))
        }
      }
    })
</script>

​

 时间修饰符

<div class="root1">
        <!-- 阻止默认事件 跳转 -->
        <a href="http://www.baidui.com" @click.prevent="show2">点我提示信息2</a>

          <!-- 阻止事件冒泡 -->
        <div  @click="show2">
        <button @click.stop="show2">点我提示信息2</button>
        </div>

        <!-- 事件触发一次 -->
        <button @click.once="show2">点我提示信息2</button>

        <!-- 修饰符可以连续写 -->
        <div  @click="show2">
          <a href="http://www.baidui.com" @click.prevent.stop="show2">点我提示信息2</a>

        </div>

        
    </div>

computed watch比较

computed 可以实现的   watch都可以实现(异步操作)

被vue管理的函数最好用普通函数 this指向是vm

不被vue所管理的函数(定时器回调函数 ajax回调函数,promise回调函数) 最好写箭头函数 this指向是vm

 <div class="root1">
        姓: <input type="text" v-model="firstname"> <br/>
        名:<input type="text" v-model="lastname"> <br/>
        <span>{{fullname}}</span>
     </div>
    
</body>
<script>
    new Vue({
      el:'.root1',
      data:{
        firstname:'张',
        lastname:'三',
        fullname:'张三'
      },
      watch:{
        firstname(val){
        setTimeout(()=>{
            this.fullname = val+this.lastname
        },1000)//watch可以进行异步操作
        },
        lastname(val){
            this.fullname=this.firstname+val
        }
      }
    })
</script>

 绑定样式

 <div class="root1">
        <!-- 将改变的class属性写成绑定的:class--  字符串形式  样式类名不确定 需要动态指定-->
        <div class="basic" :class="mood" @click="change">   
         {{name}}
        </div>
        <!--数组形式  绑定样式个数,名字不确定  -->
        <div class="basic" :class="classarr">   
            {{name}}
           </div>
        <!-- 对象写法 样式个数确定 名字确定 动态决定用不用-->
        <div class="basic" :class="classobj">   
            {{name}}
           </div>
           </div>

    </div>
</body>
<script>
    new Vue({
      el:'.root1',
      data:{
        name:'张三',
        mood:'normal',
        classarr:['happy','sad','normal'],
        classobj:{
         happy:false,
         sad:true
        }
      },
      methods:{
        change(){
            this.mood='happy'
        }
      }
    })
</script>