vue学习笔记一（v-bind，v-on，v-model，v-if ，动画transition，组件，ref 属性）有详细的案列

最新推荐文章于 2024-07-18 20:00:00 发布

青鸟88

最新推荐文章于 2024-07-18 20:00:00 发布

阅读量572

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43610698/article/details/103757887

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、vue的学习官网

vue的学习网站

二、进入正题，开始介绍vue的具体用法。

1、如何引入vue.js 文件

可以直接引入vue的连接例如
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
可以下载vue的jar包，放到项目的路径中，直接引用放置的地址就行。

2、v-bind 和 v-on 的使用

v-bind 是绑定属性可以简写为 :
v-on 是时间绑定，可以简写为 @
具体的用法：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>Document</title>

    <style>
        .red {
            background: red;
        }
        .green {
            background: green;
        }
        .yellow {
            background: yellow;
        }
        .width {
            width: 300px;
        }

        .height {
            height: 20px;
        }
        .a {
            font-size: 30px;
            height: 185px;
        }
    </style>
</head>

<body>
    <div id="app2">
        <img v-bind:src="imgUrl" alt="这里是图片,对,就是这样哈哈哈哈" />
        <h4 :class="[Class , h4Width]"> {{message}}</h4>
        <!-- 当有多个;class时，他只会识别第一个，后面不管有几个：class都不会别识别-->
        <!-- 当有多个class时，可以使用数组或者是对象 -->
        <h4 :class="[{green:true},h4Height,h4Width]">{{message1}}</h4>
        <!-- 还可以在：class后面加 class，他两互相没有关系 -->
        <h4 :class="[{green:true},h4Height,h4Width]" class='a'>{{message1}}</h4>
        <!-- 还可以在标签中设置样式 -->
        <img v-bind:src="imgUrl" alt="这里是图片,对,就是这样哈哈哈哈" :style="{width:imgWidth,border:'10px solid red'}" />
        <!-- 点击事件的验证 -->
        <button @click="dealOnclick">点击切换背景颜色</button>
        <h4 :class="h4ClassArr[index]" class='a'>{{message2}}</h4>

    </div>
    <script>
        var app2 = new Vue({
            el: "#app2",
            data: {
                message: "这里练习v-bind特性的属性",
                message1: "验证class的数组和对象的使用",
                message2: "点击事件的验证",
                imgUrl: "http://img5.imgtn.bdimg.com/it/u=3916481728,2850933383&fm=26&gp=0.jpg",
                h4Class: 'red',
                h4Width: 'width',
                h4Height: 'height',
                imgWidth: '200px',
                index: 0,
                count: 0,
                h4ClassArr: ['red', 'green', 'yellow']
            },
            /* 这里是存放方法的地方 */
            methods: {
                dealOnclick() {
                    this.index = this.count++ % 3
                }
            }
        })
    </script>
</body>

</html>

3、v-if v-else-if v-else 可以一快使用，进行条件控制 v-show的使用

v-if 和 v-show的区别

v-show 是控制dom的样式的显示与隐藏，就是间接的改变display的值，
v-if 是控制dom的是添加和移除，频切换显示和隐藏时，要使用v-show,只进行一次判断时用v-if
v-show不可以在template标签中使用

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if的使用</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
		<style>
			.red{
				background: red;
			}
			.green{
				background: green;
			}
			.box{
				height: 100px;
				width: 100px;
			}
			.pink{
				background: pink;
			}
		</style>
	</head>
	<body>
		<!-- v-if v-else-if  v-else   的使用-->
		<div id="app">
			<button @click="dealOnclick">{{text}}</button>
			<div class="box red" v-if="num===0"></div>
			<div class="box green" v-else-if="num===1"></div>
			<div class="box pink" v-else=""></div>
		</div>

		<!-- v-if v-else 的使用 -->
		<div id="app1">
			<button @click="dealOnclick">{{text}}</button>
			<div class="box red" v-if="show"></div>
			<div class="box pink" v-else=""></div>
			<button @click="dealOnclick">{{text}}</button>
			<!-- <template>标签的使用，他可以批量的处理标签，他是一个虚拟的容器 -->
			<template v-if="show">
				<div class="green box"></div>
				<div class="red box"></div>
			</template>
			<button @click="dealOnclick">{{text}}</button>
			v-show 的使用说明
			
   <!-- v-show 是控制dom的样式的显示与隐藏，就是间接的改变display的值，
			v-if 是控制dom的是添加和移除，
			频切换显示和隐藏时，要使用v-show,只进行一次判断时用v-if
			v-show不可以在template标签中使用 -->
			
   <div class="green box" v-show="show"></div>
			<div class="red box" v-if="show"></div>	
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					show: true,
					text: "隐藏",
					num: 0
				},
				methods: {
					dealOnclick() {
						this.show = !this.show;
						this.text = this.show ? '隐藏' : '显示';
					}
				}
			})
			var app1 = new Vue({
				el: "#app1",
				data: {
					show: true,
					text: "隐藏",

				},
				methods: {
					dealOnclick() {
						this.show = !this.show;
						this.text = this.show ? '隐藏' : '显示';
					}
				}
			})
		</script>
	</body>
</html>

4、v-for的使用、

对集合进行遍历渲染
实例

<body>
   	<div id="app">
   		<ul>
   			<li v-for="item in arr">{{item}}</li> <!-- 输出数组中的元素值-->
   		</ul>
   		<ul>
   			<li v-for="people in obj">{{people}}</li>  <!-- 输出对象的属性-->
   		</ul>
   		<ul>
   			<li v-for="item in 'shanghai' "> {{item}}</li> <!-- 输出每个字符-->
   		</ul>
   		<ul>
   			<li v-for="item in 10">{{item}}</li><!-- 输出1到10 的数字 -->
   		</ul>
   		<ul>
   			<li v-for="(item,index) in fruitArr" :key="index">{{item}}——————{{index}}</li><!-- 输出元素值和元素的索引 -->
   		</ul>
   		<button @click="dealclick">点击反转</button>
   		<button @click="dealclick1">点击隐藏</button><br />
   		<div v-if="show">用户名<input type="text" key="name" /></div>
   		<div  v-else="">密码<input type="text" key="pass"/></div>
   	</div>
   	<script type="text/javascript">
   		var app = new Vue({
   			el: "#app",
   			data: {
   				arr: ["苹果", "香蕉", "葡萄"],
   				obj: {
   					name: "张三",
   					age: 18,
   					looks: "beautiful"
   				},
   				fruitArr: ["樱桃", "芒果", "菠萝"],
   				show : true
   			},
   			methods:{
   				dealclick(){
   					this.fruitArr.reverse();
   				},
   				dealclick1(){
   					this.show = !this.show;
   				}
   			}
   		})
   	</script>
   </body>

注：

对数组进行操作
1、不能通过索引的方式更改数组，这样不能渲染
2、不能通过更改数组的长度更改数组，这样不能渲染
3、更改数组要是用数组的变异方法 pop shift unshift  splice sort reverse push
4、向对象内添加和删除属性不能渲染页面可以使用$set()方法向对象中添加属性

实例

var app2 = new Vue({
				el: "#app2",
				data: {
					arr: ["小哈", "小黑", "小白"],
					people: {
						name: "hengheng",
						age: 23,
						looks: "handsome"
					}
				},
				methods: {
					insertElement() {
						const len = this.arr.length;
						this.arr.push("呵呵呵呵呵");
						this.arr.push(this.people);
						this.$set(this.people, "salary", 154654);
					},
					inertFiled() {
						/* 这种情况不会被渲染 */
						//delete this.people.name;
						//this.people.salary = 125525;
						/* 这种情况可以渲染 */
						this.$set(this.people, "salary", 1578648);
					}
				}
			})
<div id="app2">
    <button @click="insertElement"> 添加 </button>
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul->
    <button @click="inertFiled">添加属性</button>
    <ul>
    	<li v-for="item in people">{{item}}</li>
	</ul->
 </div>

5、v-model的使用，双向数据绑定

实例

<div id="app">
			<input type="text" :value="value" @input="dealInput"/><span>{{value}}</span>
		</div>
		<!-- 使用，v-model对象 -->
		<div id="app2">
			<input type="text" v-model="value" /><span>{{value}}</span>
			<br />
			<textarea v-model="content"></textarea><span>{{content}}</span>
			<br />
			第一项：<input type="checkbox" value="哈哈哈"  v-model="checkArr"/>
			第二项：<input type="checkbox" value="恩门" v-model="checkArr"/>
			第三项：<input type="checkbox" value="啊啊啊" v-model="checkArr"/>
			<span>{{checkArr}}</span>
			
			<!-- 下拉框中使用标签 -->
			<select v-model="selectValue" >
				<option>请选择</option>
				<option>北京</option>
				<option>上海</option>
				<option>深圳</option>
			</select>
			<span>{{selectValue}}</span>
		</div>		
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					value:""
				},
				methods:{
					dealInput(e){
						this.value = e.target.value;
					}
				}
			})
			const app2 = new Vue({
				el:"#app2",
				data:{
					value:"jiangheng",
					content:"",
					checkArr:[],
					selectValue:""
				},
				methods:{	
				}
			})		
		</script>

6、计算属性和侦听器的使用

实例

<body>
		<div id="app">
			姓名:{{name}} 年龄 ： {{age}} 外貌：{{looks}}<br />
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: "#app",
				data: {
					name: '姜恒',
					age: 18,
					looks: 'very beautiful'
				},
				/* 方法 */
				methods: {
					desc() {
						console.log("—————————————————————methods");
						return '姓名：' + this.name + '年龄:' + this.age;
					}
				},
				/* 侦听器 ,能够监听事件的变化*/
				watch: {
					name() {
						console.log("—————————————————————watchname");
						return '姓名：' + this.name + '年龄:' + this.age;
					},
					age() {
						console.log("—————————————————————watchage");
						return '姓名：' + this.name + '年龄:' + this.age;
					}
				},
				/* 计算属性 */
				computed: {
					desc() {
						console.log("—————————————————————compute");
						return '姓名：' + this.name + '年龄:' + this.age;
					}
				}
			})
		</script>
	</body>

7、动画 transition

过渡的类名（6个）

 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

图解
实例


<!-- 使用animate.css 动画库 -->
   <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">

<style>
       /* 自定义的类名 */
       .my-enter,
       .my-leave-to {
           opacity: 0;
           transform: translateX(80px);
       }

       .my-enter-active,
       .my-leave-active {
           transition: 0.8s;
       }

       /* 默认的类名 */
       .v-enter,
       .v-leave-to {
           opacity: 0;
           transform: translateY(500px);
       }

       .v-enter-active,
       .v-leave-active {
           transition: 0.8s;
       }
   </style>
</head>
<body>
   <div id="app">
       <div>

           <button @click="flag=!flag">点击</button>
           <transition>
               <h3 v-show="flag">我在这里</h3>
           </transition>
       </div>
       <hr>
       <div>
           <button @click="flag2=!flag2">点击</button>
           <transition name="my">
               <h3 v-show="flag2">我在这里</h3>
           </transition>
       </div>

       <hr>
       <!-- 使用animate.css 动画库 -->
       <!-- bounceIn 进入  bounceOut 离场 -->

       <div>
           <button @click="flag3=!flag3">点击</button>
           <!-- duration 设置入场和离场的时间 -->
           <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="1000">
               <h3 v-if="flag3">我在这里</h3>
           </transition>
       </div>
   </div>

   <script>
       var vm = new Vue({
           el: "#app",
           data: {
               flag: false,
               flag2: false,
               flag3: false
           } 
       });
   </script>
</body>

使用钩子函数实现动画的单程，即只有入场或者是离场

  <transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

实例

<style>
       .ball {
           border-radius: 50%;
           width: 20px;
           height: 20px;
           background-color: red;
       }
   </style>
</head>
<body>
   <div id="app">
       <hr>
       <!-- 使用钩子函数实现动画的单程，即只有入场或者是离场 -->
       <div>
           <button @click="flag4=!flag4">点击</button>
           <!-- duration 设置入场和离场的时间 -->
           <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
               <div class="ball" v-show="flag4"></div>
           </transition>
       </div>
   </div>
   <script>
       var vm = new Vue({
           el: "#app",
           data: {
               flag4: false
           },
           methods: {

               beforeEnter: function (el) {
                   // 设置动画的初始位置
                   el.style.transform='translate(0,0)';
               },
               // 当与 CSS 结合使用时
               // 回调函数 done 是可选的
               enter: function (el, done) {
                   //这句话没有实际的效果，但是不是没有动画效果
                   el.offsetWidth;
                   el.style.transform='translate(150px,450px)';
                   el.style.transition = "all 2s ease";
                   done();
               },
               afterEnter: function (el) {
                   this.flag4 = !this.flag4;
               }
           }
       });
   </script>

8、组件
组件是可复用的 Vue 实例，且带有一个名字

创建全局的组件（3中方式）
实例

<body>

   <div id="app">
       <!-- 调用组件 直接使用组件的名称就可以 -->
       <my-com1></my-com1>
       <my-com2></my-com2>
       <my-com3></my-com3>
   </div>
   <template id="temp">
       <h2>通过在实例外部定义组件{{msg}}</h2>
   </template>
   <script>
       // 定义全局的组件
       // 第一种方式
       //1.1 使用vue.extend创建全局的组件
       var com1 = Vue.extend({
           template: "<h1>这是通过Vue.extend的方式创建的  </h1>"
       });
       //1.2 使用vue.component 来声明组件的名字,注意不要写错语法
       //这里的命名方式的驼峰方式配置的，在引用是需使用-分开
       Vue.component('myCom1', com1);
       //第二种方式创建组件 使用Vue.component ("",{})的方式来创建
       Vue.component('myCom2', {
           template: '<h3>这是通过Vue.Component方式创建的</h3>'
       })
       //第三种的方式  在实例外部定义组件

       Vue.component("myCom3", {
           template: '#temp',
           //组件中的data是以函数返回值的形式返回
           data: function () {
               return {
                   msg: '这是属性值'
               }
           }
       })
      
       var vm = new Vue({
           el: "#app",
           data: {
               msg: "父组件中的属性值"
           },
           methods: {
           }
          
       });
   </script>
</body>

定义私有的组件
实例

<div id="app">
        <!-- 调用组件 直接使用组件的名称就可以 -->
        <login></login>
    </div>
 var vm = new Vue({
            el: "#app",
            //定义私有的组件
            components: {
                //login就是组件的名称
                login: {
                    template: "<div><h3>这是私有的组件，引用组件中的属性------{{name}}</h3>"+
                    "<input type='button' value = '点击' @click='myFunction'/></div>",

                    //data 一定是函数返回值得形式
                    data: function () {
                        return {
                            name: '私有组件'
                        }
                    },
                    methods: {
                        myFunction() {
                            console.log("调用了组件的方法")
                        }
                        
                    }
                } 
            }
        });
    </script>

父组件向子组件传值

<div id="app">
       <!-- 使用属性绑定的方式来实现父向子传值 -->
       <!-- 通过事件绑定的方法想子组件传递方法 ,func 是随便起的名字-->
       <coml4 v-bind:parentmsg='msg' @func='show' @func2='show2'></coml4>
   </div>


<template id="temp2">
       <div>
           <h2>父组件向子组件传值</h2>

           <p>得到父组件中的属性值——————————{{parentmsg}}</p>
           
           <input type="button" value="调用父类的方法" @click="myFunction">
           <input type="button" value="调用父类带参的方法" @click="myFunction2">
       </div>


<script>
   //定义一个模板
       var coml4 = {
           template: "#temp2",
           //向子组件传值的名称
           //父组件向子组件传值,这里面的值是v-bind 里面自定义的名字
           props: ['parentmsg'], //这里面的数据只能读，不能写
           methods:{
               myFunction(){
                   this.$emit('func')
               },
               myFunction2(){
                   this.$emit('func2',123)
               }
           }
       }
       var vm = new Vue({
           el: "#app",
           data: {
               msg: "父组件中的属性值"
           },
           methods: {
               show() {
                   console.log('调用了父组件的show方法');
               },
               show2(data){
                           console.log("调用了组件带参数的方法"+data)
                       }
           },
          
           components: {
               // 对上面定义的组件进行赋值
               'coml4':coml4
           }
       });
   </script>

9、ref 获取元素和组件引用

实例

<body>
    <div id="app">
        <input type="button" value="获取元素" @click="getElement">
        <h3 ref='myH3'>使用ref获取元素</h3>
        <hr>
        <mycoml ref='mycoml'></mycoml>
    </div>
    <template id="temp">
        <div>
            <h3>使用ref获取组件</h3>
        </div>
    </template>
    <script>
        var coml = {
            template: "#temp",
            data: function () {
                return {
                    name: "组件的属性值"
                }
            }
        }
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                getElement() {
                    console.log(vm.$refs.myH3.innerText);
                    console.log(this.$refs.mycoml.name);
                }
            },
            components: {
                "mycoml": coml
            }
        });
    </script>
</body>

持续更新………………

青鸟88

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
vue学习笔记一（v-bind，v-on，v-model，v-if ，动画transition，组件，ref 属性）有详细的案列

一、vue的学习官网vue的学习网站二、进入正题，开始介绍vue的具体用法。1、如何引入vue.js 文件可以直接引入vue的连接例如<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>可以下载vue的jar包，放到项目的路径中，直接引用放置的地址就行。2...
复制链接

扫一扫