02-Vue技术栈之基础篇（下）

已于 2023-05-04 12:22:38 修改
阅读量684 收藏 2
点赞数 2
分类专栏： Vue.js笔记 文章标签： vue.js javascript 前端 前端框架
于 2023-04-30 12:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhang_wang_yun/article/details/130413682
版权

目录

1、class 与 style 绑定

1.1 理解

  1. 在应用界面中, 某个(些)元素的样式是变化的
  2. class/style 绑定就是专门用来实现动态样式效果的技术

1.2 class 绑定

  1. 写法:class="xxx" xxx可以是字符串、对象、数组。

  2. 字符串写法适用于：类名不确定，要动态获取。
    表达式是字符串: 'classA'

  3. 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    表达式是数组: ['classA', 'classB']

  4. 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
    表达式是对象: {classA:isA, classB: isB}

1.3 style绑定

  1. :style="{fontSize: xxx}"其中xxx是动态值。
    :style="{ color: activeColor, fontSize: fontSize + 'px' "

    fontSize是动态值

  2. :style="[styleObj,styleObj2]"其中a、b是样式对象。

1.4 代码示例

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

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

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

		<!-- 绑定style样式--表达式写法 -->
		<div class="basic" :style=" {fontSize: fontSize + 'px'}">{{name}}</div> <br /><br />
		<!-- 绑定style样式--对象写法 -->
		<div class="basic" :style="styleObj ">{{name}}</div> <br /><br />
		<!-- 绑定style样式--数组写法 -->
		<div class="basic" :style="styleArr">{{name}}</div>
		<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el: '#root',
		data: {
			name: '东方青云',
			mood: 'normal',
			classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
			classObj: {
				atguigu1: false,
				atguigu2: false,
			},
			fontSize: 40,
			styleObj: {
				fontSize: '40px',
				color: 'red',
			},
			styleObj2: {
				backgroundColor: 'orange'
			},
			styleArr: [
				{
					fontSize: '40px',
					color: 'blue',
				},
				{
					backgroundColor: 'gray'
				}
			]
		},
		methods: {
			changeMood() {
				const arr = ['happy', 'sad', 'normal']
				const index = Math.floor(Math.random() * 3)
				this.mood = arr[index]
			}
		},
	})
</script>

2、条件渲染

2.1 v-if

  • 写法：
  1. v-if="表达式"
  2. v-else-if="表达式"
  3. v-else="表达式"

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

2.2 v-show

  • 写法：v-show="表达式"

适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

2.3 注意事项

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

2.4 代码示例

<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <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> -->

			<!-- v-if与template的配合使用 -->
			<!-- template不会改变dom结构，在渲染完后会自动销毁 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>东方青云</h2>
				<h2>北京</h2>
			</template>

		</div>
		</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'东方青云',
				n:0
			}
		})
	</script>

3、列表渲染

3.1 基本列表

  • v-for指令:
  1. 用于展示列表数据
  2. 语法：v-for="(item, index) in xxx" :key="yyy"
  3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

代码示例：

<!-- 
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）</h2>
		<ul>
			<li v-for="(p,index) in persons" :key="index">
				{{p.name}}-{{p.age}}
			</li>
		</ul>

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

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

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

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el: '#root',
			data: {
				persons: [
					{ id: '001', name: '张三', age: 18 },
					{ id: '002', name: '李四', age: 19 },
					{ id: '003', name: '王五', age: 20 }
				],
				car: {
					name: '奥迪A8',
					price: '70万',
					color: '黑色'
				},
				str: 'hello'
			}
		})
	</script>

3.2 key的原理

3.2.1 虚拟DOM中key的作用：

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

3.2.2 对比规则：

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

3.2.3 用index作为key可能会引发的问题：

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

3.2.4 开发中如何选择key?

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

3.3 列表过滤

实现效果：
在这里插入图片描述

watch实现：

<!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>列表过滤</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <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 type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    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实现
            watch: {
                keyWord: {
                    immediate: true,
                    handler(val) {
                        this.filPerons = this.persons.filter(item => {
                            return item.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })

    </script>
</body>

</html>

computed实现：

<!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>列表过滤</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <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 type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    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(item => {
                        return item.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })

    </script>
</body>

</html>

3.4 列表排序

  • 对上述案例进行改进，添加一点新功能
  • 实现效果：

请添加图片描述

  • 实现代码：
<!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>列表排序</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="typeSort=1">年龄降序</button>
        <button @click="typeSort=2">年龄升序</button>
        <button @click="typeSort=0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    persons: [
                        { id: '001', name: '马冬梅', age: 19, sex: '女' },
                        { id: '002', name: '周冬雨', age: 22, sex: '女' },
                        { id: '003', name: '周杰伦', age: 21, sex: '男' },
                        { id: '004', name: '温兆伦', age: 25, sex: '男' }
                    ],
                    typeSort: 0
                }
            },
            computed: {
                filPerons() {
                    const arr = this.persons.filter(item => {
                        return item.name.indexOf(this.keyWord) !== -1
                    })
                    if (this.typeSort) {
                        arr.sort((a, b) => {
                            return this.typeSort === 1 ? b.age - a.age : a.age - b.age
                        })
                    }
                    return arr
                }
            }
        })

    </script>
</body>

</html>

3.5 Vue数据监测

Vue监视数据的原理：

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

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

注： target：目标对象，propertyName/index：属性名或索引号，value：值

  1. 如何监测数组中的数据？

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

  2. 在Vue修改数组中的某个元素一定要用如下方法：
    1.使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    这些方法都会改变原数组

    2.Vue.set() 或 vm.$set()

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

  • 我们来使用这些方法做个小案例：

  • 实现效果：
    请添加图片描述

  • 代码示例：

<!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>数据监测</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        button {
            padding: 8px 10px;
            margin: 5px;
        }
    </style>
</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="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>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: 'tom',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '烫头'],
                    friends: [
                        { name: 'jerry', age: 35 },
                        { name: 'tony', age: 36 }
                    ]
                }
            },
            methods: {
                addSex() {
                    // Vue.set(this.student,'sex','男')//第一种写法
                    this.$set(this.student, 'sex', '男')//第二种写法
                },
                addFriend() {
                    // this.student.friends.unshift({ name: '东方青云', age: '88' })//第一种写法
                    this.student.friends.splice(0,0,{ name: '东方青云', age: '88' })//第二种写法
                },
                updateFirstFriendName() {
                    // this.student.friends[0].name = '念心'//第一种写法
                    // Vue.set(this.student.friends[0],'name','念心')//第二种写法
                    this.$set(this.student.friends[0], 'name', '念心')//第三种写法
                },
                addHobby() {
                    this.student.hobby.push('学习')
                },
                updateHobby() {
                    // this.student.hobby.splice(0,1,'健身')//第一种写法
                    // Vue.set(this.student.hobby,0,'健身')//第二种写法
                    this.$set(this.student.hobby, 0, '健身')//第三种写法
                },
                removeSmoke() {
                    this.student.hobby = this.student.hobby.filter(item => {
                        return item !== '抽烟'
                    })
                }
            }
        })
    </script>
</body>

</html>

4、收集表单数据

1、若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
2、若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
3、若：<input type="checkbox"/>
3.1 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
3.2 配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：
v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

代码示例：

<!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>收集表单数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
            密码：<input type="password" v-model="userInfo.password"> <br /><br />
            年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
            性别：
            男<input type="radio" name="gender" v-model="userInfo.gender" value="男">
            女<input type="radio" name="gender" v-model="userInfo.gender" value="女"> <br /><br />
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br /><br />
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="深圳">深圳</option>
                <option value="武汉">武汉</option>
            </select>
            <br /><br />
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    userInfo: {
                        account: '',
                        password: '',
                        age: '',
                        gender: '',
                        hobby: [],
                        city: '北京',
                        other: '',
                        agree: ''
                    }
                }
            },
            methods: {
                demo() {
                    document.write(JSON.stringify(this.userInfo))
                }
            }
        })
    </script>
</body>

</html>

5、过滤器

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  • 语法：
    1. 注册过滤器：全局Vue.filter(name,callback) 或局部 new Vue{filters:{}}
    2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据

代码示例：

<!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 src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <h1>显示格式化后的时间</h1>
        <!-- 计算属性实现 -->
        <h3>现在的时间是：{{time1}}</h3>
        <!-- 方法实现 -->
        <h3>现在的时间是：{{time2()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在的时间是：{{time | time3}}</h3>
        <!-- 过滤器传参 -->
        <h3>现在的时间是：{{time | time3('YYYY_MM_DD') }}</h3>
        <h3>现在的时间是：{{time | time3('YYYY_MM_DD') | mySlice}}</h3>
    </div>
    <script>
        //全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: '#root',
            data() {
                return {
                    time: new Data()
                }
            },
            // 计算属性实现
            computed: {
                time1() {
                    return dayjs(this.time).format(('YYYY-MM-DD HH:mm:ss'))
                }
            },
            // 方法实现
            methods: {
                time2() {
                    return dayjs(this.time).format(('YYYY-MM-DD HH:mm:ss'))
                }
            },
            //局部过滤器，如果定义为局部过滤器，其他的vue实例不能访问
            filters: {
                time3(value, str = 'YYYY-MM-DD HH:mm:ss') {
                    return dayjs(value).format(str)
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

6、内置指令

  • 对之前学过的内置指令做个统计：

  • 我们学过的指令：

    1. v-bind : 单向绑定解析表达式, 可简写为 :xxx

    2. v-model : 双向数据绑定

    3. v-for : 遍历数组/对象/字符串

    4. v-on : 绑定事件监听, 可简写为@

    5. v-if : 条件渲染（动态控制节点是否存存在）

    6. v-else-if:条件渲染（动态控制节点是否存存在）

    7. v-else : 条件渲染（动态控制节点是否存存在）

    8. v-show : 条件渲染 (动态控制节点是否展示)

6.1 v-text指令

  1. 作用：向其所在的节点中渲染文本内容，如果有标签则会当作文本渲染。
  2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

代码示例：

<!-- 准备好一个容器-->
	<div id="root">
		<div>你好，{{name}}</div>
		<div v-text="name"></div>
		<div v-text="str"></div>
	</div>
</body>

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

	new Vue({
		el: '#root',
		data: {
			name: '东方青云',
			str: '<h3>你好啊！</h3>'
		}
	})
</script>

在这里插入图片描述

6.2 v-html指令

  1. 作用：向指定节点中渲染包含html结构的内容。
  2. 与插值语法的区别：
    (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
    (2).v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
2).一定要在可信的内容上使用v-html，不要用在用户提交的内容上！

6.3 v-cloak指令

v-cloak指令（没有值）：

  1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

代码示例：

		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'东方青云'
			}
		})
	</script>

6.4 v-once指令

  1. v-once所在节点在初次动态渲染后，就视为静态内容了。
  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

代码示例：

<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

请添加图片描述

6.5 v-pre指令

  1. 跳过其所在节点的编译过程。
  2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

代码示例：

<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

7、自定义指令

  • 一、定义语法：

    (1).局部指令：
    new Vue({directives:{指令名:配置对象} 或directives{指令名:回调函数}})
    (2).全局指令：
    Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

  • 二、配置对象中常用的3个回调：

    (1)bind：指令与元素成功绑定时调用。
    (2)inserted：指令所在元素被插入页面时调用。
    (3)update：指令所在模板结构被重新解析时调用。

  • 三、备注：

    1.指令定义时不加v-，但使用时要加v-；
    2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

  • 四、小案例

    • 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
    • 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

代码示例：

	<!-- 准备好一个容器-->
	<div id="root">
		<h2>{{name}}</h2>
		<h2>当前的n值是：<span v-text="n"></span> </h2>
		<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
		<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
		<button @click="n++">点我n+1</button>
		<hr/>
		<input type="text" v-fbind:value="n">
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	//定义全局指令
	/* Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}) 
	 Vue.directive('big', (element, binding) => {
	 element.innerText = binding.value * 10
	})
	*/

	new Vue({
		el: '#root',
		data: {
			name: '东方青云',
			n: 1
		},
		directives: {
			//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
			/* 'big-number'(element,binding){
				// console.log('big')
				element.innerText = binding.value * 10
			}, */
			// element：所绑定的dom元素节点
			// binding：绑定对象
			big(element, binding) {
				console.log('big', this) //注意此处的this是window
				// console.log('big')
				element.innerText = binding.value * 10
			},
			fbind: {
				//指令与元素成功绑定时（一上来）
				bind(element, binding) {
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element, binding) {
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element, binding) {
					element.value = binding.value
				}
			}
		}
	})

</script>

请添加图片描述

东方青云、
关注
专栏目录
vue技术栈豆瓣api豆瓣电影
08-10
本篇将详细介绍如何使用Vue.js技术栈结合豆瓣API来开发一个豆瓣电影应用。 1. **Vue.js基础** 在开始项目之前，首先需要了解Vue.js的基本概念和核心特性，包括模板语法、响应式数据绑定、指令系统、组件化等。Vue....
vue2相关的技术栈对应的环境搭建
GodLoveMe的博客
12-30 246
本文介绍了两个搭建好的环境，一个是web端，一个是mobile端，都在github上有代码的，欢迎star！欢迎PR！ 采用的技术栈包括：vue-cli3脚手架搭建出来的（SPA）单页面应用，涉及的技术包括vue2，vue-router，VueX，axios，sass，等等。 web端： github-web端链接 mobile端： github-mobile端链接 欢迎在下方评论参与讨论！ ...
【Vue】笔记二：Vue详解以及从Vue2.0到Vue3.0的技术栈梳理及操作步骤
weixin_55846296的博客
05-29 2569
Vue是一个流行的JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。Vue的特点是易于学习、易于使用，同时简化了DOM操纵和数据管理的复杂性。综上，Vue2和Vue3都是优秀的JavaScript框架，各有其独特的特点和优势，开发者需要根据具体需求来选择使用。同时，Vue3相对于Vue2具有更高的性能和更丰富的功能特性，建议开发者在新项目中直接选择使用Vue3。
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 3万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
【Java前端技术栈】Vue2、Vue Cli、Axio入门
qq_41891655的博客
03-22 1050
Vue (读音 /vjuː/，类似于 view) 是一个前端框架, 易于构建用户界面2. Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合3. 支持和其它类库结合使用 4. 开发复杂的单页应用非常方便5. Vue 是 Vue.js 的简称官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js官方文档Vue 实例 — Vue.js (vuejs.org)
Vue 技术栈(全家桶)-尚硅谷前端研究院
hyx_1225的博客
12-04 1041
2) Vue.prototype.$bus = new Vue(), 所有的组件对象都能看到$bus 这个属性。2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)(3) PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用。1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
Vue技术栈开发实战视频快速入门
06-25
02路由基础篇；03路由进阶篇；04状态管理bus的使用；05状态管理Vuex(一)；06状态管理Vuex(二)；07状态态管理Vuex进阶；08Ajax请求实战；09使用Mock模拟Ajax请求；10Vue中第三方JS库的使用。。。。；26项目部署
full-stack-vue-book:全栈Vue Book项目集合
04-02
《全栈Vue Book项目集合》是一本专注于Vue.js框架及其相关技术栈的综合教程，旨在帮助开发者从初识到精通，全面掌握Vue.js全栈开发技能。这本书涵盖了Vue.js 2.x版本，以及与之紧密相关的Vuex状态管理库和JavaScript...
06-Vue全家桶-项目实战1
08-03
在本篇“06-Vue全家桶-项目实战1”中，我们将探讨一个基于Vue技术栈的电商后台管理系统。这个项目涵盖了前端和后端的多个关键模块，旨在提供全面的电商管理功能。 1. **项目概述**： - 电商系统通常支持PC、移动...
springboot基础篇-源码
11-13
SpringBoot基础篇源码分析 在本教程中，我们将深入探讨SpringBoot的基础知识，并通过一个实际的SSMP项目（SpringBoot、SpringMVC、MyBatis、MySQL）进行实践。这个项目结合了Vue.js和Element UI前端框架，为开发者...
Web项目常用的技术栈有哪些？
sdasdas12的博客
11-06 2591
我在软件开发工具低代码领域探索了多年，从 2014 开始研发低代码前端渲染，到 2018 年开始研发后端低代码数据模型，发布了JNPF开发平台。
vue技术栈通路
本郡主是喵
05-17 134
1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。3. 表达式是对象: {classA:isA, classB: isB}4. 表达式是数组: ['classA', 'classB']
前端技术栈学习：Vue2、Vue cli脚手架、ElementUI组件库、Axios
最新发布
2301_76144723的博客
06-25 1057
前端技术栈学习：Vue2、Vue cli脚手架、ElementUI组件库、Axios
Vue全家桶
caronil的博客
03-27 1902
Vue 技术栈(全家桶) 文章目录Vue 技术栈(全家桶)第 1 章：Vue 核心1.1. Vue 简介1.1.1. 官网1.1.2. 介绍与描述1.1.3. Vue 的特点1.1.4. 与其它 JS 框架的关联1.1.5. Vue 周边库1.2. 初识 Vue1.3. 模板语法1.3.1. 效果1.3.2. 模板的理解1.3.3. 插值语法1.3.4. 指令语法1.4 数据绑定1.4.1. 效果1.4.2. 单向数据绑定1.4.3. 双向数据绑定1.5. MVVM 模型1.6. 事件处理1.6.1. 效果
vue技术栈--》从vue2.0到vue3.0 ## 篇一 搭建到操作
ztK63LrD的博客
05-05 875
vue技术栈
vue2知识点总结
ElvisSu的专栏
10-23 470
1。介绍1。声明式渲染 2。条件与循环 3。处理用户输入 4。组件化引用构建2。Vue实例1。创建一个Vue实例 2。数据与方法 3。实例生命周期 4。生命周期图示3。模板语法1。插值 2。指令 3。缩写4。计算属性和观察者1。计算属性 2。侦听器5。class和style绑定1。绑定HTLM Class 2。绑定内联样式6。条件渲染1。v-if 2.v-show 3.v-if 和v-show比较
Vue2技术栈归纳与精粹
zdy0_2004的专栏
12-24 959
https://uinika.github.io/2017/12/03/web/vue/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io Vue是一款高度封装的、开箱即用的、一栈式的前端框架，既可以结合webpack进行编译式前端开发，也适用基于gulp、grunt等自动化工具直接挂载至全局window使用。本文成文
vue2项目详解技术点
qq_23372481的博客
08-04 3343
自给自足
vue技术栈开发实战--学习笔记1
weixin_34143774的博客
09-22 240
课程 vue技术栈开发实战 https://segmentfault.com/ls/1650000016221751 iview-admin作者 Lison 出品 个人学习笔记1-7 1 vue-cli 3.0 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -g @vue/cli 2 路由...
Vue技术栈面试题解析大全
资源摘要信息:"程序员热门面试题及详细解析vue篇（4）"主要涵盖了Vue框架相关的面试题目以及对应的解析，旨在帮助程序员在面试过程中更好地理解和掌握Vue技术。以下是根据该文件标题、描述及标签所提取的相关知识点...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方青云、

你的鼓励将是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值