⁵

前端vue学习

Manghadun

2024-09-23 11:28

阅读403

Manghadun

2024-09-23 11:28

阅读 403

尚硅谷Vue学习

🚀🚀当前进度：70/168

2024年9月23日学习记录

列表渲染、条件渲染
监视属性Watch
计算属性Computed
监视属性原理：数据代理Vue.set()，vm.$set()

综合练习示例代码

▼
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>hello world</h1>
    <div id="app">
        <h3>v-for学习，介绍山西食物</h3>
        <ul>
            <li v-for="e in getFilFood" :key="e.id">{{e.id}}, {{e.name}}</li>
        </ul>
        <br/><br/>
        <button @click="addFood">点击，在首部添加一道山西食物</button>
        <h3>监视属性 ==> {{unWatchField.num}}</h3>
        <button @click="addField">点击，添加能被监视属性</button> &nbsp;&nbsp; <button @click="unWatchField.num++">点击+1</button>
        <h3>测试新数组赋值，filter</h3>
        <button @click="filNoodle()">点击，获取所有面食</button>
        <br/><br/>
        <h3>测试filter + sorted</h3>
        {{sortStatus}}
        <button @click="sortStatus=1">点击，将食物按照编号升序排列</button>
        <button @click="sortStatus=2">点击，将食物按照编号升序排列</button>
        <button @click="sortStatus=0">点击，将食物按照原顺序排列</button>
        <br/><br/>
        <h3>set方法为数组赋值成功</h3>
        <ul>
            <li v-for="e in vfood" :key="e.id">{{e.id}}, {{e.name}}</li>
        </ul>
        <button @click="addFoodByset">set方法为数组下标1赋值成功</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.devtools = true;
    const vm = new Vue({
        el:'#app',
        data: {
            num: 0,
            bidsty: {
                border: 'solid 1px',
                height: '10px',
                width:  '10px',
            },
            food: [
                {id: '004', name: '麻辣拌'},
                {id: '002', name: '牛肉丸子面'},
                {id: '001', name: '酥肉臊子面'},
                {id: '003', name: '阳高杏脯'}
            ],
            vfood: [],
            unWatchField: {},
            keyword: '',
            sortStatus: 0 // 0：原顺序，1:升序，2：降序
        },
        methods: {
            addFood() {
                this.food.unshift({id: '004', name: '大同刀削面'});
            },
            addField() {
                console.log('添加了属性');
                Vue.set(this.unWatchField, 'num', 1);
            },
            filNoodle() {
                this.keyword = '面';
            },
            addFoodByset() {
                vm.$set(this.vfood,0,{id: '003', name: '新疆大盘鸡'})
                console.log("执行");
            }
        },
        computed: {
            getFilFood: {
                immediate: true,
                get() {
                    const curArr =  this.food.filter((e) => {
                        return e.name.indexOf(this.keyword) !== -1;
                    });
                    if(this.sortStatus) {
                        curArr.sort((a, b) => {
                            if(this.sortStatus === 1) {
                                return a.id.localeCompare(b.id);
                            } else {
                                return b.id.localeCompare(a.id);
                            }
                        })
                    }
                    return curArr;
                }
            }
        }
    })
    console.log(vm);
</script>
</html>

2024年9月27学习进度

工作后连续学习时间少的很，趁着这次外派偷偷学一会，现在学的是Vue2，完全是因为直接上Vue3，有好多东西看不懂。现在的目的是会用，没有做更深一步的学习。本次学习的知识点如下：

Vue生命周期

mounted
beforeUpdate
updated
destroyed

学习原因：因为每次在我为组件挂一个变量的时候，组件总是不能按照我的想法进行更新，每次都是控制台打印值发生变化，但是界面的值扔没有更新。

创建非单个组件

直接把所有的组件布置到同一个html中，体会一下根组件，子组件，也知道了为什么data要写成data()而不是data:，看到template选项的用法。这算是初见组件，一般也不会这样写。

▼
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>组件式编程==>{{currentTime}}</h1>
        <h2>组件1</h2>
        <zu-jian-1></zu-jian-1>
        <h2>组件2</h2>
        <zu-jian-2></zu-jian-2>
    </div>
</body>

<script src="./js/vue.js"></script>
<script>

    const zj1 = Vue.extend({
        template: `<h1>组件1==>{{num}}<button @click="num++">点击数字+1</button></h1>`,
        data() {
            return {
                num: 0
            }
        }
    })

    const zj2 = Vue.extend({
        template: `<h1>组件2==>{{num}}<button @click="num++">点击数字+1</button></h1>`,
        data() {
            return {
                num: 0
            }
        }
    })

    const vm = new Vue({
        el: '#app',
        data: {
            currentTime: '2024年9月26日10:11:34',
        },
        components: {
            "zu-jian-1": zj1,
            "zu-jian-2": zj2        
        }
    })
</script>
</html>

组件命名规则

这个算是学习了命名规范吧，之前都是随便明明的，甚至有时候还回去使用下划线。

可以全部小写
可以在单词之间使用-连接
可以使用小驼峰
在手脚架中可以使用大驼峰
不要使用浏览器已经使用的标签
只有在手脚架中才去使用自闭和标签

VueComponent：组件中使用的对象

这个我觉得太重要了，每个子组件的身份象征，VueComponent+prototype

根组件返回的是Vue实例对象
子组件返回的是VueComponent实例对象
vue将vueComponent的原型指向了vue对象，通过这种内置让vue做一个兜底。

脚手架搭建

这个熟悉，就不记录了

标签的ref属性

用在普通标签上，能直接获取标签内容
用在组件标签上，能直接拿到VueComponent对象

▼
html
复制代码
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>ref的学习</h1>
    <h2 ref="title">用于普通标签</h2>
    <About ref="aboutref"></About>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import About from './components/About.vue';

export default {
  name: 'App',
  data() {
    return {
      num: 10
    }
  },
  components: {
    HelloWorld,
    About
  },
  mounted() {
    console.log(this);
    console.log(this.$refs);
    console.log(this.$refs.title.textContent);
    console.log(this.$refs.aboutref.num);
  }
}
</script>

props属性

父组件向子组件发属性。
子组件获取，可用于显示，但不能随意修改，（其实也能改，但是改完也会被父组件重新渲染，所以我感觉改的意义不大）

▼
text
复制代码
props:["name", "age", "sex"]

🍭🍭🍭先更新到这里🍭🍭🍭

问答助学