Vue.js 笔记 (二)

最后更新时间：2022年11月20日

VUE

计算属性

  1. 定义：要用的属性不存在，要通过已有属性计算得来。

  2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

    • get函数什么时候执行？初次读取时会执行一次。当依赖的数据发生改变时会被再次调用。
  3. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

  4. 备注：

    • 计算属性最终会出现在vm上，直接读取使用即可。
    • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
  <input type="text" v-model:value="name"> <br/><br/>
  <input type="text" v-model:value="location"> <br/><br/>
  <p>{{ msg }}</p>
</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:"#root",
        data:{
            name: "ronie",
            location: "china",
        },
        computed:{
            msg:{
                get(){
                    return this.name + " is in " + this.location;
                },
                set(){

                },
            },
            // 只有get可简写
            // msg(){
            //     return this.name + " is in " + this.location;
            // }
        }
    })
</script>
</html>

监视属性

  1. 监视属性watch：

    • 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
    • 监视的属性必须存在，才能进行监视！！

  2. 监视的两种写法：

    • new Vue时传入watch配置
    • 通过vm.$watch监视

  3. 深度监视：

    • Vue中的watch默认不监测对象内部值的改变（一层）。
    • 配置deep:true可以监测对象内部值改变（多层）。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model:value="name"> <br/><br/>
        <input type="text" v-model:value="location"> <br/><br/>
        <p>{{ msg }}</p>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data:{
            name:'ronie',
            location:'china',
            msg: "ronie is in china",
        },
        watch:{
            name:{
                // immediate:true, //初始化时让handler调用一下
                handler(newValue, oldValue){
                    this.msg = newValue + " is in " + this.location;
                }
            },
            location: {
                handler(newValue, oldValue) {
                    this.msg = this.name + " is in " + newValue;
                }
            }
        }

    })
    // vm.$watch("name",{
    //     immediate:true, //初始化时让handler调用一下
    //     handler(newValue,oldValue){
    //         this.msg = newValue + " is in " + this.location;
    //     }
    // })
</script>
</html>

条件渲染

  1. v-if

    • v-if="表达式"
    • v-else-if="表达式"
    • v-else="表达式"

    适用于：切换频率较低的场景。
    特点：不展示的DOM元素直接被移除。
    注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

  2. v-show
    写法：v-show="表达式"
    适用于：切换频率较高的场景。
    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

  3. 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>now id : {{ id }}</h2>
    <h3>v-if:</h3>
    <p v-if="id === 1">{{ person_info[0] }}</p>
    <p v-if="id === 2">{{ person_info[1] }}</p>
    <p v-if="id === 3">{{ person_info[2] }}</p>
    <h3>v-if v-else-if v-else:</h3>
    <p v-if="id === 1">{{ person_info[0] }}</p>
    <p v-else-if="id === 2">{{ person_info[1] }}</p>
    <p v-else>{{ person_info[2] }}</p>
    <h3>v-show:</h3>
    <p v-show="id === 1">{{ person_info[0] }}</p>
    <p v-show="id === 2">{{ person_info[1] }}</p>
    <p v-show="id === 3">{{ person_info[2] }}</p>

    <button @click="action">id++</button>
</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data:{
            id:1,
            person_info:[
                {id:1,name:'张三',age:18},
                {id:2,name:'李四',age:19},
                {id:3,name:'王五',age:20},
            ]
        },
        methods:{
            action(){
                this.id = this.id + 1 > 4 ? 1:this.id + 1;
            }
        }

    })
</script>
</html>

列表渲染

列表基础

  1. v-for指令:

    • 用于展示列表数据
    • 语法：v-for="(item, index) in xxx" :key="yyy"
    • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <p>遍历数组</p>
    <ul>
        <li v-for="(p, index) in person_list" key="p.id">
            <p>index:{{index}} -- person:{{p}}</p>
        </li>
    </ul>
    <!--遍历对象-->
    <p>遍历对象</p>
    <ul>
        <li v-for="(value, key) in person_list[0]" key="key">
            <p>key:{{key}} -- value:{{value}}</p>
        </li>
    </ul>
    <!--遍历指定次数-->
    <p>遍历指定次数</p>
    <ul>
        <li v-for="(value, index) in range_times" key="key">
            <p>index:{{index}} -- value:{{value}}</p>
        </li>
    </ul>

    <!--遍历字符串-->
    <p>遍历字符串</p>
    <ul>
        <li v-for="(value, index) in name" key="key">
            <p>index:{{index}} -- value:{{value}}</p>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:"#root",
        data:{
            name:'ronie',
            range_times: 3,
            person_list:[
                {id:"004",name:'赵六',age:30},
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ]
        }
    })
</script>
</html>

列表过滤

  1. watch实现

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>列表过滤</title>
 <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
 <input type="text" v-model:value="value">
 <ul>
     <li v-for="(p, index) in person_filtered" key="index" >
         <p>{{p.id}}:{{p.name}}:{{p.sex}}</p>
     </li>
 </ul>
</div>
</body>
<script type="text/javascript">
 const vm = new Vue({
     el:"#root",
     data:{
         persons:[
             {id:'001',name:'马冬梅',age:19,sex:'女'},
             {id:'002',name:'周冬雨',age:20,sex:'女'},
             {id:'003',name:'周杰伦',age:21,sex:'男'},
             {id:'004',name:'温兆伦',age:22,sex:'男'}
         ],
         value:'',
         person_filtered:[],
     },
     watch:{
         value: {
             immediate: true,
             handler(){
                 this.person_filtered = this.persons.filter((p)=>{
                     return p.name.indexOf(this.value) !== -1
                 })
             }
         }
     }

 })
</script>
</html>

  2. computed实现

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>列表过滤</title>
 <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
 <input type="text" v-model:value="value">
 <ul>
     <li v-for="(p, index) in person_filtered" key="index" >
         <p>{{p.id}}:{{p.name}}:{{p.sex}}</p>
     </li>
 </ul>
</div>
</body>
<script type="text/javascript">
 const vm = new Vue({
     el:"#root",
     data:{
         persons:[
             {id:'001',name:'马冬梅',age:19,sex:'女'},
             {id:'002',name:'周冬雨',age:20,sex:'女'},
             {id:'003',name:'周杰伦',age:21,sex:'男'},
             {id:'004',name:'温兆伦',age:22,sex:'男'}
         ],
         value:'',
     },
     computed:{
         person_filtered(){
             return this.persons.filter((p)=>{
                 return p.name.indexOf(this.value) !== -1
             })
         }
     }
 })

</script>
</html>

列表排序

  1. watch实现

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>列表排序</title>
 <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
 <input type="text" v-model:value="val">
 <button v-on:click.prevent="sortType=2">年龄升序</button>
 <button v-on:click.prevent="sortType=1">年龄降序</button>
 <button v-on:click="sortType=0">原顺序</button>
 <ul>
     <li v-for="(p, index) in person_filtered" key="p.id" >
         <p>{{p.id}}:{{p.name}}:{{p.sex}}:{{p.age}}</p>
     </li>
 </ul>
</div>
</body>
<script type="text/javascript">
 const vm = new Vue({
     el:"#root",
     data:{
         persons:[
             {id:'001',name:'马冬梅',age:19,sex:'女'},
             {id:'002',name:'周冬雨',age:30,sex:'女'},
             {id:'003',name:'周杰伦',age:21,sex:'男'},
             {id:'004',name:'温兆伦',age:25,sex:'男'}
         ],
         val:'',
         person_filtered:null,
         sortType: 0,
     },
     computed: {
         listen(){
             let sortType = this.sortType;
             let val = this.val;
             return {sortType, val}
         }
     },
     watch:{
         listen: {
             immediate: true,
             handler() {
                 this.person_filtered = this.persons.filter((p) => {
                     return p.name.indexOf(this.val) !== -1
                 });
                 if (this.sortType) {
                     this.person_filtered.sort((p1,p2)=>{
                         return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                     })
                 }
             }
         }
     },

 })
</script>
</html>

  2. computed实现

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>列表排序</title>
 <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
 <input type="text" v-model:value="val">
 <button v-on:click.prevent="sortType=2">年龄升序</button>
 <button v-on:click.prevent="sortType=1">年龄降序</button>
 <button v-on:click="sortType=0">原顺序</button>
 <ul>
     <li v-for="(p, index) in person_filtered" key="p.id" >
         <p>{{p.id}}:{{p.name}}:{{p.sex}}:{{p.age}}</p>
     </li>
 </ul>
</div>
</body>
<script type="text/javascript">
 const vm = new Vue({
     el:"#root",
     data:{
         persons:[
             {id:'001',name:'马冬梅',age:19,sex:'女'},
             {id:'002',name:'周冬雨',age:30,sex:'女'},
             {id:'003',name:'周杰伦',age:21,sex:'男'},
             {id:'004',name:'温兆伦',age:25,sex:'男'}
         ],
         val:'',
         sortType: 0,
     },
     computed: {
         person_filtered(){
             let arr = this.persons.filter((p) => {
                 return p.name.indexOf(this.val) !== -1
             });
             if (this.sortType) {
                 arr.sort((p1,p2)=>{
                     return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                 })
             }
             return arr;
         }
     },
 })
</script>
</html>

声明：Hello World|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - Vue.js 笔记 (二)

我的朋友，理论是灰色的，而生活之树是常青的！