Vue.js 3.0 学习笔记（三）指令

最新推荐文章于 2024-03-24 16:43:36 发布
最新推荐文章于 2024-03-24 16:43:36 发布
阅读量244 收藏 2
点赞数
分类专栏： #vue3 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44648936/article/details/123424136
版权

一、内置指令

1、v-show

v-show指令会根据表达式的真假值，切换元素的display CSS属性，来显示或者隐藏元素。当条件变化时，该指令会自动触发过渡效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-show指令</title>
</head>
<body>
<div id="app">
    <h3 v-show="ok">西瓜</h3>
    <h3 v-show="no">苹果</h3>
    <h3 v-show="num>=1000">库存很充足！</h3>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             ok:true,
             no:false,
             num:1000
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

2、v-if/v-else-if/v-else

使用这三个指令来实现条件判断，使用v-if时，会根据表达式来决定是否创建元素，这和v-show只是隐藏元素不同

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-else-if指令与v-if指令</title>
</head>
<body>
<div id="app">
    <span v-if="score>=90">优秀</span>
    <span v-else-if="score>=80">合格</span>
    <span v-else-if="score>=60">及格</span>
    <span v-else>不及格</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             ok:true,
             no:false,
             score:85
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

3、v-for

  1. 遍历数组
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-for指令遍历数组</title>
</head>
<body>
<div id="app">
    <ul>
        <!--也可以使用of替代in作为分隔符，因为数组中key和index的值相同-->
        <li v-for="item in nameList">
          {{item.name}}--{{item.city}}--{{item.price}}元
        </li>
    </ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
                  nameList:[
                      {name:'洗衣机',city:'上海',price:'8600'},
                      {name:'冰箱',city:'北京',price:'6800'},
                      {name:'空调',city:'广州',price:'5900'}
                  ]
            }
         }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>
  1. 遍历对象
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-for指令遍历对象</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in nameObj">
            {{item}}
        </li>
    </ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            nameObj:{
                name:"洗衣机",
                city:"上海",
                price:"6800元"
             }
           }
         }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

添加二、三个参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加第二、三个参数</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,key,index) in nameObj">
            {{index}}--{{key}}--{{item}}
        </li>
    </ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            nameObj:{
                name:"洗衣机",
                city:"上海",
                price:"6800元"
             }
           }
         }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>
  1. 遍历整数
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-for指令遍历整数</title>
</head>
<body>
<div id="app">
    <span v-for="item in 20">
        {{item}}
    </span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
     }).mount('#app');
</script>
</body>
</html>
  1. 在< template >中使用
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在<template>上使用v-for</title>
</head>
<body>
<div id="app">
    <ul>
        <template  v-for="(item,key,index) in nameObj">
            <li>{{index}}--{{key}}--{{item}}</li>
        </template>
    </ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
        data(){
          return{
            nameObj:{
                name:"洗衣机",
                city:"上海",
                price:"6800元"
             }
           }
         }
     }).mount('#app');
</script>
</body>
</html>
  1. 数组更新检测
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数组更新检测</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in nameList">
            {{index}}--{{item}}
        </li>
    </ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
        data(){
          return{
            nameList:["洗衣机","上海","5800元"]
           }
         }
     }).mount('#app');
//使用数组原型的splice()方法
app.$set(vm.nameList,3,"高三")
</script>
</body>
</html>
  1. key属性
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用key属性</title>
</head>
<body>
<div id="app">
    <div>名称:<input type="text" v-model="names"></div>
    <div>产地:<input type="text" v-model="citys"></div>
    <div>价格:<input type="text" v-model="prices"><button v-on:click="add()">添加</button></div>
    <hr>
    <!--key属性用于标识唯一-->
    <p v-for="item in nameList" :key="item.name">
    <input type="checkbox">
    <span>名称:{{item.name}}—产地:{{item.city}}—价格:{{item.price}}</span>
</p>

</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
        data(){
          return{
            names:"",
            citys:"",
            prices:"",
            nameList:[
                {name:'洗衣机',city:'北京',price:'6800元'},
                {name:'冰箱',city:'上海',price:'8900元'},
                {name:'空调',city:'广州',price:'6800元'}
            ]
           }
         },
        methods:{
            add:function(){
                this.nameList.unshift({
                    name:this.names,
                    city:this.citys,
                    price:this.prices
                })
            }
        }
     }).mount('#app');
</script>
</body>
</html>
  1. 过滤与排序
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>过滤与排序</title>
</head>
<body>
<div id="app">
    <p>所有库存的商品：</p>
    <ul>
        <li v-for="item in nameList">
            {{item}}
        </li>
    </ul>
    <p>产地为上海的商品：</p>
    <ul>
        <li v-for="item in namelists">
            {{item}}
        </li>
    </ul>
    <p>价格大于或等于5000元的商品：</p>
    <ul>
        <li v-for="item in prices()">
            {{item}}
        </li>
    </ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
        data(){
          return{
            nameList:[
                {name:"洗衣机",price:"5000",city:"上海"},
                {name:"冰箱",price:"6800",city:"北京"},
                {name:"空调",price:"4600",city:"深圳"},
                {name:"电视机",price:"4900",city:"上海"}
            ]
           }
         },
        computed:{  //计算属性
            namelists:function(){
                //filter过滤器
                return this.nameList.filter(function (nameList) {
                    return nameList.city==="上海";
                })
            }
        },
        methods:{  //方法
            prices:function(){
                return this.nameList.filter(function(nameList){
                    return nameList.price>=5000;
                })
            }
        }
     }).mount('#app');
</script>
</body>
</html>
  1. v-for和v-if一同使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for与v-if一同使用</title>
    </head>
    <body>
        <div id="app">
            <h3>已经出库的商品</h3>
            <ul>
                <template v-for="goods in goodss">
                    <li v-if="goods.isOut">
                        {{goods.name}}
                    </li>
                </template>
            </ul>
            <h3>没有出库的商品</h3>
            <ul>
                <template v-for="goods in goodss">
                    <li v-if="!goods.isOut">
                        {{goods.name}}
                    </li>
                </template>
            </ul>
        </div>
        <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    goodss: [
                        {name: '洗衣机', isOut: false},
                        {name: '冰箱', isOut: true},
                        {name: '空调', isOut: false},
                        {name: '电视机', isOut: true},
                        {name: '电脑', isOut: false}
                    ]
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>

4、v-bind

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
</head>
<body>
<div id="app">
    <!--v-bind是单向绑定，这意味着前台的不能改变后台的，而后台的可以改变前台的-->
    <input type="button" value="按钮" v-bind:title="Title" v-bind:style="{color:Color,width:Width+'px'}">
    <p><a :href="Address">超链接</a></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
         data(){
             return {
                Title: '这是我自定义的title属性',
                Color: 'blue',
                Width: '100',
                Address:"https://www.baidu.com/"
           }
        }
     }).mount('#app');
</script>
</body>
</html>

5、v-modul

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-modul指令</title>
</head>
<body>
<div id="app">
    <!--使用v-model指令双向绑定input的值和test属性的值-->
    <!--双向绑定意味着前台输入的可以改变后台的值，后台的也可以改变前台的-->
    <p><input v-model="content" type="text"></p>
    <!--显示content的值-->
    <p>{{content}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
         data(){
             return {
                content: "空调"
           }
        }
     }).mount('#app');
</script>
</body>
</html>

6、v-on

v-on用于监听DOM事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
<div id="app">
    <p>
        <!--监听click事件，使用JavaScript语句-->
        <button v-on:click="number-=1">-1</button>
        <span>{{number}}</span>
        <button v-on:click="number+=1">+1</button>
    </p>
    <p>
        <!--监听click事件，绑定方法-->
        <button v-on:click="say()">古诗</button>
    </p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             number:100
           }
        },
        methods:{
            say:function(){
                alert("曲水浪低蕉叶稳，舞雩风软纻罗轻。")
            }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

7、v-text

v-text用于更新元素的文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
</head>
<body>
<div id="app">
    <!--更新部分内容-->
    <p>古诗欣赏:{{message}}</p>
    <!--更新全部内容-->
    <p v-text="message">古诗欣赏:</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             message: '百舌无言桃李尽，柘林深处鹁鸪鸣。'
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

8、v-html

v-html用于更新元素的innerHTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
<div id="app">
        <p v-html="message">古诗欣赏:</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             message:'<h3 style="color:red"> 老去惜花心已懒，爱梅犹绕江村。</h3>'
            }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

9、v-once

v-once指令表示只渲染元素和组件一次，后续禁止更新

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
</head>
<body>
<div id="app">
    <p v-once>不可改变：{{message}}</p>
    <p>可以改变：{{message}}</p>
    <p><input type="text" v-model = "message" name=""></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             message:"苹果"
            }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

10、v-pre

v-pre用于跳过这个元素和它的子元素编译过程，让它显示原始Mustache标签，说实话，没想到有什么具体的用处

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-pre</title>
</head>
<body>
<div id="app">
    <div v-pre>{{message}}</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             message:"竹根流水带溪云。醉中浑不记，归路月黄昏。"
            }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

二、自定义指令

使用方法同vue2类似

  1. 自定义v-focus指令
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-focus</title>
    </head>
<body>
<div id="app">
    <input v-focus>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({  });
    // 注册一个全局自定义指令 `v-focus`
    vm.directive('focus', {
        //当被绑定的元素插入到DOM中时
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
    vm.mount('#app');
</script>
</body>
</html>
  1. bind钩子函数的参数
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bind钩子函数的参数</title>
    </head>
<body>
<div id="app">
    <div v-demo:foo.a.b="message"></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
     //该函数返回数据对象
        data(){
            return{
                 message: '海上生明月'
           }
        }
     })
     // 注册一个全局自定义指令 `demo`
    vm.directive('demo', {
        mounted (el, binding, vnode) {
            let s = JSON.stringify
            el.innerHTML =
    	 'instance: '   + s(binding.instance) + '<br>' +
    	 'value: '      + s(binding.value) + '<br>' +
    	 'argument: '   + s(binding.arg) + '<br>' +
    	 'modifiers: '  + s(binding.modifiers) + '<br>' +
    	 'vnode keys: ' + Object.keys(vnode).join(', ')
        }
    })
    vm.mount('#app');
</script>
</body>
</html>
  1. 动态指令参数
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态指令参数</title>
    </head>
<body>
<div id="app">
    <!--直接给出指令的参数-->
   <p v-pin:top="100">林风纤月落</p>
   <!--使用动态参数，也就是说属性也可以被自定义-->
   <p v-pin:[direction]="100">林风纤月落</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
     //该函数返回数据对象
        data(){
            return{
                 direction: 'left'
           }
        }
     })
     // 注册一个全局自定义指令 `pin`
    vm.directive('pin', {
         beforeMount(el, binding, vnode) {
            el.style.position = 'fixed';
            //binding.arg表示传给指令的参数，这里即direction:left
            let s = binding.arg || 'right';
            //binding.value表示参数的值
            el.style[s] = binding.value + 'px'
        }
    })
    vm.mount('#app');
</script>
</body>
</html>

三、综合案例-下拉菜单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
			body {
				width: 600px;
			}
			a {
				text-decoration: none;
				display: block;
				color: #fff;
				width: 120px;
				height: 40px;
				line-height: 40px;
				border: 1px solid #fff;
				border-width: 1px 1px 0 0;
				background: #5D478B;
			}
			li {
				list-style-type: none;
			}
			#app > li {
				list-style-type: none;
				float: left;
				text-align: center;
				position: relative;
			}
			#app li a:hover {
				color: #fff;
				background: #FF8C69;
			}
			#app li ul {
				position: absolute;
				left: -40px;
				top: 40px;
				margin-top: 1px;
				font-size: 12px;
			}
			/*防止屏幕闪动*/
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id = "app" v-cloak>
			<!--鼠标移入时就会触发mouseover，移出时会触发mouseout-->
			<li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
				<a :href="menu.url" >
					{{menu.name}}
				</a>
				<ul v-show="menu.show">
					<li v-for="subMenu in menu.subMenus">
						<a :href="subMenu.url">{{subMenu.name}}</a>
					</li>
				</ul>
			</li>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
		    const data = {
		      menus: [
		      	{
		      		name: '在线课程', url: '#', show: false, subMenus: [
		      				{name: 'Python课程', url: '#'},
		      				{name: 'Java课程', url: '#'},
		      				{name: '前端课程', url: '#'}
		      			]
		      	},
		      	{
		      		name: '经典图书', url: '#', show: false, subMenus: [
		      				{name: 'Python图书', url: '#'},
		      				{name: 'Java图书', url: '#'},
		      				{name: '前端图书', url: '#'}
		      			]
		      	},
		      	{
		      		name: '技术支持', url: '#', show: false, subMenus: [
                                                                                                {name: 'Python技术支持', url: '#'},
		      				{name: 'Java技术支持', url: '#'},
		      				{name: '前端技术支持', url: '#'}
		      			]
		      	},
		      	{
		      		name: '关于我们', url: '#', show: false, subMenus: [
                                                                                                {name: '团队介绍', url: '#'},
		      				{name: '联系我们', url: '#'}
		      			]
		      	}
		      ]
		    };
		    const vm = Vue.createApp({
                data() {
                    return data;
                }
            }).mount('#app');
</script>
</body>
</html>

在这里插入图片描述

奥妙无穹
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 学习笔记
qq_35072197的博客
02-23 1752
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 学习笔记
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3092
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
Vue.js的内置指令
qq_57688111的博客
10-08 231
Vue.js的内置指令 简单的介绍一下指令，详细用法还会更新哦！ v-once: 定义它的元素或组件只渲染一次，包括它里面的所有子节点，首次渲染后不再随数据的变化重新渲染，将被视为静态内容 v-cloak: 保持在元素上直到关联实例结束编译，解决初始化慢导致页面闪动问题的最佳实践 v-bind: 属性绑定，动态更新HTML元素上的属性 v-on: 用于监听DOM事件 如v-on:keyup v-on:click等 v-html: 赋值就是变量innerHTML（注意防止XSS攻击） v-h
初识Vue 3.0 —— v-if/v-else/v-else-if/v-show条件渲染
QUX轻博客
12-14 588
<h5>18.条件渲染</h5> <div> <p>&lt;div v-if="awesome"&...
VUE3v-if、v-for、v-show的理解
最新发布
qingdouxiaohua的博客
03-24 1203
是一个条件渲染指令，它会根据表达式的真假值来动态地添加或移除元素。如果表达式的值为真，则元素会被添加到 DOM 中；是一个列表渲染指令，它用于遍历数组或对象的属性，并为每个元素或属性生成一个模板的副本。如果元素频繁地显示和隐藏，且对性能要求较高，通常使用。因此，即使元素被隐藏，它仍然会保留在 DOM 中。是三种常用的指令，它们分别用于条件渲染、列表渲染和元素显示隐藏。如果元素不常变化，或者需要在条件不满足时完全移除元素，可以使用。不会从 DOM 中移除元素，而是通过改变元素的 CSS 属性。
【Vue3】Vue的v-show无效
此人太懒，没有任何简介
12-02 2903
vue vue的v-if与v-show失效解决方法
Vue3.0学习 （6）- 条件渲染v-if和v-show
雨Winning
08-12 1132
v-if指令 1、v-if 的格式： 2、条件为true时 3、条件为false时 v-show指令 格式以及使用与v-if相同 v-if 与 v-show 的区别 通过抓取dom节点可以看出两者区别： 1、两者均不显示时，v-if指令直接不会显示，v-show通过控制style来控制是否显示。 ...
vue 3.0学习笔记(从入门到精通)
10-07
Vue 3.0是Vue.js框架的最新版本，它带来了许多...总之，Vue 3.0学习涵盖了许多方面，从基础的模板语法到高级的响应式机制，以及组件开发和路由管理。通过深入理解这些知识点，你将能够熟练地运用Vue 3.0进行前端开发。
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1920
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
【vue3】07. 跟着官网学习vue3-条件渲染，v-if和v-show
qq_17335549的博客
09-03 1690
跟着官网学习vue3、v-if、v-show的使用和区别、模版中有多个根节点时使用v-show会出现的问题、了解文档片段相关知识
Vue 3.0 条件渲染 【Vue3 从零开始】
2201_75866484的博客
02-21 136
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
vue3数组操作学习
热门推荐
weixin_43871703的博客
03-09 2万+
Vue3操作数组的那些小技巧！
vue3.0 新特性
weixin_43878117的博客
04-21 2739
Setup setup函数是Composition API逻辑组织的入口。 <template> <div>{{ title }}</div> </template> <script> export default ( setup() { const title = 'vue' return { title } } ) </script> Reactive reactive 相当于 Vue 2
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 10000
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
vue3.0知识点分析
weixin_42332641的博客
10-29 207
ref让数据变成响应式,即改变会引发视图层的变化 ref通过给value属性设置setter和getter实现数据劫持 1.ref推荐定义基本数据类型(ref值也可以是对象，但是一般情况下是对象直接使用reactive更合理)。 2.在 Vue 的模板中使用 ref 的值不需要通过 value 获取 （Vue 会通过自动给 ref 的值加上 .value）。 3.在 js 中使用 ref 的值必须使用 .value 获取。 //watchEffect是立即执行的，没有惰性。immediate //watc
Vue3.0 ｜ vue3的新特性
qq_45939676的博客
11-07 988
Vue3.0 ｜ vue3的新特性
Vue 3 中 v-if 和 v-show 指令实现的原理（源码分析）
五柳
01-17 1万+
前言 又回到了经典的一句话：“知其然，而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是，我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。 所以，今天就让我们来一起了解一番 v-if 和 v-show 指令实现的原理～ v-if 在之前 【Vue3 源码解读】从编译过程，理解静态节点提升 一文中，我给大家介绍了 Vue 3 的编译过程，即一个模版会经历 baseParse、transform、generate 这
VUE3.0之v-for 中的 Ref 数组
m0_49989338的博客
12-02 1万+
v-for 中的 Ref 数组 在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。 在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)： 一 : 在vue 2中的获取方式 <p v-for="(item,index) in 5" :key="index"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值