学习vue笔记（2）

最新推荐文章于 2024-09-29 17:29:37 发布

Aliceblle

最新推荐文章于 2024-09-29 17:29:37 发布

阅读量987

点赞数 1

分类专栏：笔记 vue学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/QQQQQQFJQ/article/details/122755593

版权

笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue学习

4 篇文章 0 订阅

订阅专栏

v-cloak&v-once&v-pre属性

VUE.set的使用

vue监测数组原理

总结vue检测数组


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1</button><br />
        <button @click="addSex">添加性别属性，默认值:男</button><br />
        <button @click="student.sex='未知'">修改性别</button><br />
        <button @click="addFriends">在列表首位添加一个朋友</button><br />
        <button @click="updateFirstFriendName">修改第一个朋友的名字为:张三</button><br />
        <button @click="addHobby">添加一个爱好</button><br />
        <button @click='updateHobby'>修改第一个爱好为:开车</button><br />
        <button @click="removePlay"> 过滤掉玩游戏</button>
        <h3>姓名:{{ student.name}}</h3>
        <h3>年龄:{{student.age}}</h3>
        <h3 v-if="student.sex">性别:{{student.sex}}</h3>
        <h3>爱好:</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <h3>朋友们:</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}---{{f.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: "#root",
            data: {
                student: {
                    name: '小麦',
                    age: 12,
                    hobby: ['看书', '踢足球', '玩游戏'],
                    friends: [
                        { name: 'haha', age: 13 },
                        { name: 'xixi', age: 14 }
                    ]
                }
            },
            methods: {
                addSex() {
                    Vue.set(this.student, 'sex', '男')
                    // this.$set(this.student, 'sex', '男')
                },
                addFriends() {
                    this.student.friends.unshift({ name: 'jack', age: 10 })
                },
                updateFirstFriendName() {
                    this.student.friends[0].name = 'nini'
                    this.student.friends[0].age = 102
                },
                addHobby() {
                    this.student.hobby.push('学习')
                },
                updateHobby() {
                    // this.student.hobby.splice(0, 1, '开车')
                    Vue.set(this.student.hobby, 0, '开车')
                    this.$set(this.student.hobby, 0, '开车')
                },
                removePlay() {
                    this.student.hobby = this.student.hobby.filter((h) => {
                        return h !== '玩游戏'
                    })
                }
            }
        })
    </script>
</body>
</html>

收集表单数据


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            <label for="demo">账号:</label>
            <input type="text" id="demo" v-model.trim="account"><br /><br />
            密码:<input type="password" v-model="password"><br /><br />
            年龄:<input type="number" v-model.number="age"><br />
            性别:
            男:<input type="radio" name="sex" v-model="sex" value="man">
            女:<input type="radio" name="sex" v-model="sex" value="woman"><br /><br />
            爱好:
            学习<input type="checkbox" v-model="hobby" value="study">
            打游戏<input type="checkbox" v-model="hobby" value="play"><br /><br />
            所属校区:
            <select name="" id="" v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select><br /><br />
            其他信息
            <textarea v-model.lazy="other "></textarea><br /><br />
            <input type="checkbox" v-model="agree">
            阅读并接受
            <a href="#">用户协议</a><br />
            <button>提交</button>
        </form>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        new Vue({
            el: '#root',
            data: {
                account: '',
                password: '',
                sex: '',
                hobby: [],
                city: '',
                other: '',
                agree: '',
                age: 18
            },
            methods: {
                demo() {
                    alert(1)
                }
            }
        })
    </script>
</body>
</html>

过滤器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>像是格式化后的时间</h2>
        <!-- 计算 属性实现-->
        <h3> 现在是{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>现在是{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是{{time | timeFormater}}</h3>
        <!-- 过滤器实现传参 -->
        <h3>现在是{{time | timeFormater('YYYY MM DD') | mySlice}}</h3>
    </div>
    <div id="root2">
        <h3>{{msg |mySlice}}</h3>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        //全局过滤,写在最前面
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: '#root',
            data: {
                time: 1621561377603
            },
            computed: {
                fmtTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                getFmtTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            //局部过滤
            filters: {
                timeFormater(value, str) {
                    // console.log('@', value)
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                    return dayjs(value).format(str)
                },
                mySlice(value) {
                    return value.slice(0, 4)
                }
            }
        })
        new Vue({
            el: '#root2',
            data: {
                msg: 'hello,atguigu'
            }
        })
    </script>
</body>
</html>

v-text指令

v-html指令

v-cloak&v-once&v-pre属性

v-cloak

v-pre

v-once

自定义属性

自定义属性（big）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是:<span v-text="n"></span></h2>
        <h2>放大十倍后的n值<span v-big="n"></span></h2>
        <button @click="n++">
            点我加一
        </button>
        <hr />
        <input type="text" v-fbind:value="n">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        new Vue({
            el: '#root',
            data: {
                name: 'atguigu',
                n: 1
            },
            directives: {
                big(element, binding) {
                    element.innerText = binding.value * 10
                },
                // fbind(element,binding){
                //     element.value =binding.value
                // }
                //fbind不要写成一个函数了，不然只有两种情况被调用
                // （1）指令与元素成功绑定时（一上来）
                // （2）指令所在的模板被重新解析时
                // 所以写成对象
                fbind: {
                    //指令与元素成功绑定
                    bind(element, binding) {
                        console.log('bind')
                        element.innerText = binding.value
                    },
                    //指令所在元素被插入页面时
                    inserted(element, binding) {
                        console.log('inserted')
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding) {
                        console.log('update')
                        element.value = binding.value
                        element.focus()
                    }
                }
            }
        })
    </script>
</body>
</html>

自定义全局属性

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习vue</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {
            },
            //vue完成模板的解析，并把真实的DOM元素放入页面后（挂载完毕）调用mounted
            mounted() {
                setInterval(() => {
                    vm.opacity -= 0.01
                    if (vm.opacity <= 0) vm.opacity = 1
                }, 16)
            }
        })
        // // 通过外界定时器
        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if (vm.opacity <= 0) vm.opacity = 1
        // }, 16)
    </script>
</body>
</html>

生命周期之挂载

beforeCreate（）

created（）

beforeMount（）

mounted（）