Vue 学习二

于 2024-07-01 22:13:08 发布
阅读量786 收藏 25
点赞数 29
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45691995/article/details/140084537
版权

Vue 学习

1. 绑定样式

1.1 绑定 class 样式–字符串写法，适用于：样式的类名不确定，需要动态指定

<body>
<div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'hello, world',
            mood: 'normal',
        methods: {
            changeMood() {
                this.mood = 'happy'//改变normal样式为happy央视
                //随机选取样式
                //const arr = ['happy','sad','normal']
			    //const index = Math.floor(Math.random()*3)
			    //this.mood = arr[index]
            }

        }
    })

</script>

1.2 绑定class样式–数组写法，适用于：要绑定的样式个数不确定、名字也不确定

<body>
    <div id="root">
        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'hello, world',
            classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
        }
    })

</script>

1.3 绑定class样式–对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用

<body>
    <div id="root">
           <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'hello, world',
            classObj: {
                atguigu1: true,
                atguigu2: false
            }
        }
    })

</script>

1.4 绑定style样式–对象写法

<body>
    <div id="root">
           <!-- 绑定style样式--对象写法 -->
         <div class="basic" :style="styleObj">{{name}}
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'hello, world',
            styleArr: {
                fontSize: '40px',
                color: 'orange'
            }
        }
    })

</script>

1.5 绑定style样式–数组写法（用得较少）

<body>
    <div id="root">
           <!-- 绑定style样式--数组写法 -->
         <div class="basic" :style="styleArr">{{name}}
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'hello, world',
           styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
    })
</script>

2. 条件渲染

2.1 v-if

写法：
（1）v-if =“表达式”
（2）v-else-if =“表达式”
（3）v-else =“表达式”

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

        <h2 v-if="false">欢迎来到{{name}}</h2>

        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>

        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>哈哈</div>

        <template v-if="n === 1">
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </template>

2.2 v-show

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

<h2 v-show="false">欢迎来到{{name}}</h2>

<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

注意：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

3. 列表渲染

3.1 基本列表遍历 V-for

v-for指令:

  1. 用于展示列表数据
  2. 语法：v-for=“(item, index) in xxx” :key=“yyy”
  3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
3.1.1 遍历数组
<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表（遍历数组）</h2>
        <ul>
            <li v-for="(p, index) of person" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                person: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 }
                ],
            }

        })
    </script>
</body>

在这里插入图片描述

3.1.2 遍历对象
<body>
    <div id="root">
        <!-- 遍历对象 -->
        <h2>汽车信息（遍历对象）</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}}-{{value}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                car: {
                    name: '奥迪',
                    price: '70万',
                    color: '黑色'
                },

            }

        })
    </script>
</body>

在这里插入图片描述

3.1.3 遍历字符串
<body>
    <div id="root">
        </ul>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串（用得少）</h2>
        <ul>
            <li v-for="(number,index) of str" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>


    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                str: 'hello'

            }

        })
    </script>
</body>

在这里插入图片描述

3.1.4 遍历次数
<body>
    <div id="root">
        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数（用得少）</h2>
        <ul>
            <li v-for="(number,index) of 5">
                {{index}}-{{number}}
            </li>
        </ul>


    </div>
</body>

在这里插入图片描述

3.2 key 的原理（面试题）

面试题：react、vue中的key有什么作用？（key的内部原理）

  1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

  2. 对比规则：
    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
    ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
    ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key，则创建新的真实DOM，随后渲染到到页面

  3. 用index作为key可能会引发的问题：
    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
    2. 如果结构中还包含输入类的DOM：
    会产生错误DOM更新 ==> 界面有问题。

  4. 开发中如何选择key?:
    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

在这里插入图片描述

3.3 列表过滤

需求：根据名字搜索对应的人名
在这里插入图片描述

<body>
    <div id="root">
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>

        //用computed实现
        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                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: '男' }
                ],
            },
            computed: {
                filPerons() {
                    return this.persons.filter((p) => {
                        //所有字符串都包含空格
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }

        })
    </script>
</body>


<body>
    <div id="root">
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        //用watch实现
        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                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: '男' }
                ],
                filPerons: []
            },
            watch: {
                keyWord: {
                    immediate: true,
                    handler(val) {
                        this.filPerons = this.persons.filter((p) => {
                            // 返回包含val的对象
                            return p.name.indexOf(val) !== -1
                        })
                    }


                }
            }
        })

    </script>
</body>

3.4 列表排序

<body>
    <div id="root">
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType=1">年龄升序</button>
        <button @click="sortType=2">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        // 用computed实现
        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                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: '男' }
                ],
                sortType: 0//0为原顺序，1为升序，2为降序
            },
            computed: {
                filPerons() {
                    const arr = this.persons.filter((p) => {
                        //所有字符串都包含空格
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                    //按照年龄排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType == 1 ? p1.age - p2.age : p2.age - p1.age
                        })
                    }
                    return arr
                }
            }

        })
    </script>
</body>

3.5 列表数据更新

	<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				methods: {
					updateMei(){
						// this.persons[0].name = '马老师' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效
						// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
					}
				}
			}) 

		</script>

3.6 v-set的使用

两种写法：

//第一种写法
Vue.set(this.元素,'属性','属性值')

//第二种写法
this.$set(this.元素,'属性','属性值')

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>

3.7 Vue监视数据原理

Vue监视数据的原理：

  1. vue会监视data中所有层次的数据。

  2. 如何监测对象中的数据？
    通过setter实现监视，且要在new Vue时就传入要监测的数据。
    (1).对象中后追加的属性，Vue默认不做响应式处理
    (2).如需给后添加的属性做响应式，请使用如下API：
    Vue.set(target，propertyName/index，value) 或
    vm.$set(target，propertyName/index，value)

  3. 如何监测数组中的数据？
    通过包裹数组更新元素的方法实现，本质就是做了两件事：
    (1).调用原生对应的方法对数组进行更新。
    (2).重新解析模板，进而更新页面。

  4. 在Vue修改数组中的某个元素一定要用如下方法：
    1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2.Vue.set() 或 vm.$set()
    3.不能对数组直接进行复值操作，如hobby[0]=‘唱歌’

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

实例

<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="addFriend">在列表首位添加一个朋友</button> <br />
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br />
        <button @click="addHobby">添加一个爱好</button> <br />
        <button @click="updateHobby">修改第一个爱好为：开车</button> <br />
        <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br />
        <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>
</body>


<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            student: {
                name: '李四',
                age: 18,
                hobby: ['画画', '游泳', '抽烟'],
                friends: [
                    { id: '001', name: 'Joy', age: '20' },
                    { id: '002', name: 'Cindy', age: '21' },
                    { id: '003', name: 'Bob', age: '16' }
                ]
            },

        },
        methods: {
            addSex() {
                this.$set(this.student, 'sex', '男')
            },
            addFriend() {
                this.student.friends.unshift({ id: '004', name: 'Anna', age: '19' })
            },
            updateFirstFriendName() {
                this.student.friends[0].name = '张三'
            },
            addHobby() {
                this.student.hobby.push('跳舞')
            },
            updateHobby() {
                this.student.hobby.splice(0, 1, '开车')
                //this.$set(this.student.hobby,0,'开车')
            },
            removeSmoke() {
                this.student.hobby = this.student.hobby.filter((p) => {
                    return p !== '抽烟'
                })
            }


        }
    })


</script>

4. 收集表单数据

在这里插入图片描述


<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            年龄：<input type="text" v-model="userInfo.age"><br><br>
            性别：男<input type="radio" name="sex" value="meal" v-model="userInfo.sex"> 女<input type="radio" name="sex"
                value="femeal" v-model="userInfo.sex"><br><br>
            爱好：
            学习 <input type="checkbox" v-model="userInfo.hooby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hooby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hooby" value="eat"><br><br>
            所属校区：<select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="hebei">河北</option>
                <option value="tianjing">天津</option>
            </select><br><br>
            其他信息 <textarea v-model.lazy="userInfo.other"></textarea><br><br><!--lazy失去焦点再获得全部文字-->
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="">用户协议</a><br><br>
            <button>提交</button>
        </form>


    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            userInfo: {
                account: '',
                password: '',
                age: '',
                sex: '',
                hooby: [],
                city: '',
                other: '',
                agree: '',
            }


        },
        methods: {
            demo() {
                console.log(JSON.stringify(this.userInfo));

            }
        }
    })
</script>

在这里插入图片描述

XYR121212
关注
Vue2学习笔记(尚硅谷天禹老师)
weixin_44992737的博客
04-24 1952
Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。
Vue2 vs Vue3：抉择的艺术 —— 学习路线全解析
艾恩小灰灰的博客
07-13 2297
无论是 Vue2 还是 Vue3，它们都是优秀的前端框架，各具特色，各有千秋。你的选择应当基于项目需求、个人兴趣和团队环境。最重要的是，持续学习和实践，才能在这个日新月异的技术领域中保持领先。愿你在 Vue.js 的学习之旅中，不断探索，不断进步，成就非凡！
Vue2学习笔记（尚硅谷张天禹老师）Day-02
运气只是当机会来临时，你已为它准备好。
04-15 1296
8、class与style绑定 8.1、理解 （1）在应用界面中，某个（些）元素的样式是变化的 （2）class/style绑定就是专门用来实现动态样式效果的技术 8.2、绑定class （1）绑定class样式–字符串写法，适用于：样式的类名不确定，需要动态指定 （2）绑定class样式–数组写法，适用于：要绑定的样式个数不确定、名字也不确定 （3）绑定class样式–对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 例如： <style> ...
Vue2笔记——（尚硅谷张天禹Vue笔记)
csdnidofkdy2138的博客
08-08 3820
什么是Vue？一套用于构建用户界面的渐进式JavaScript框架。将数据转变成用户可看到的界面。什么是渐进式？Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件Vue的特点是什么？1.采用组件化模式，提高代码复用率、且让代码更好维护。2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点。
Vue2（学习张天禹老师讲解vue2的笔记）
m0_58882768的博客
02-06 2212
把要构造的指令写在directives：{ }, 跟methods类似在标签里写v-big，在directives中构造是就只用big(){}只要data中数据发生改变，模板重新解析时，就会重新调用该函数相当于对象式的bind和updateelement是添加指令所对应的DOM元素，binding是将指令与元素绑定，binding.value就是n对象中包含三个回调函数1.bind(element,binding){ } 当指令与元素绑定成功时调用。
[暂不持续更新] Vue2+Vue3 框架学习笔记（尚硅谷张天禹版）
wjw89的博客
07-03 1090
* 本笔记是跟随B站张天禹讲师的[尚硅谷Vue2.0 + Vue3.0全套教程丨vuejs从入门到精通](https://www.bilibili.com/video/BV1Zy4y1K7SH/?spm_id_from=333.337.search-card.all.click&vd_source=475d52c1c9e04f0181802504eb57ae7a),附上直达车。 * 本笔记更多为笔者个人使用，笔者的要求是达到**能用的水平**就可以，所以专业前端的同学而慎重考虑选择该笔记。很多原理性的东西笔
黑马vue2+vue3
最新发布
03-09
“黑马vue2+vue3”很可能是一套深入解析Vue.js第二版和第三版的教程或者项目集合，旨在帮助开发者快速上手并深入理解Vue.js框架的核心概念、功能以及最佳实践。由于内容的专属性，建议开发者在学习时能够结合官方...
write-vue3-from-scratch:学习vue学习vue写vue学习vue
05-14
二、Vue CLI 3.x 和项目初始化 1. **Vue CLI**: Vue CLI 是Vue 3的命令行工具，用于快速搭建项目结构。安装Vue CLI后，你可以通过`npm install -g @vue/cli`全局安装，然后运行`vue create my-project`创建一个新的...
vue学习笔记之vue1.0和vue2.0的区别介绍
12-29
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板，不在支持片段代码 VUE1.0是:　 我是组件</h3><strong>我是加粗标签 ...二.关于组件定义 VUE1.0定义组件的方式有: Vue.extend 这种方式，在2.0
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
尚硅谷VUE核心技术课件资料-笔记总结
04-17
尚硅谷VUE核心技术课件资料-笔记总结
Vue2学习笔记（尚硅谷张天禹老师）day-01
运气只是当机会来临时，你已为它准备好。
04-01 4947
Vue 一、vue核心 1、vue简介 1.1、vue是什么 一套用于构建用户界面的渐进式JavaScript框架。 渐进式：vue可以自底向上逐层应用；简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的的vue插件。 1.2、谁开发的 华人 尤雨溪； vue2（攻壳机动队） vue3（海贼王） 1.3、vue的特点 采用组件化模式，提高代码复用率、且让代码更好的维护 声明式编码（原生js为命令式编码），使无需直接操作DOM，提高开发效率 使用虚拟DOM+优秀的Diff算法，尽量复用DOM
vue2笔记(尚硅谷）
m0_51622088的博客
08-08 897
尚硅谷笔记拿过来放着，用的时候方便查看
vue2生命周期笔记（尚硅谷张天禹老师）
热爱编程的你我
05-15 1490
vue2生命周期详解（尚硅谷张天禹老师）
尚硅谷vue2学习笔记
huangjinghui66的博客
10-21 431
尚硅谷天禹老师vue学习笔记
B站张天禹老师vue3课程笔记（保存到csdn方便阅读）
weixin_43026567的博客
03-25 2015
修改名字
Vue3尚硅谷张天禹笔记
青山猿的博客
03-27 2208
修改名字
学习笔记：尚硅谷Vue2基础篇
D_boj的博客
04-22 1950
通过B站尚硅谷学习，了解Vue2基本概述，以及基本使用。本章节主要了解选项式API以及组件化编程
vue2尚硅谷笔记整理
weixin_44686152的博客
06-13 1794
vue2
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值