Vue入门笔记(1)

最新推荐文章于 2023-07-11 15:01:53 发布

阿良良斑得贝迪卜多比撸翁

最新推荐文章于 2023-07-11 15:01:53 发布

阅读量221

点赞数

分类专栏： java Vue

本文链接：https://blog.csdn.net/qq_29216281/article/details/100923159

版权

java 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

Vue学习笔记

1.Vue引用
2.Vue简单使用
3.数据绑定与渲染

1.Vue引用

学习或者制作原型，建议使用最新版本

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

对于生产环境则建议连接到一个明确的版本号，以免版本更新对项目造成损坏。

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

如果使用在生产环境，可以使用更小的构建，可以带来比开发环境下更快的速度体验。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

2.Vue简单使用

一段简单的Vue代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //引入Vue.js的包
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	//将来new的Vue实例会控制这个元素中的所有内容
	//Vue实例所控制的元素区就是MCCM中的V 视图
	<div id="app">
	    {{ msg }} //插值表达式
	</div>
	<script>
		//2.创建一个Vue的实例
		//new出来的这个vm对象就是MVVM中的VM 调度者
	    var vm = new Vue({ //糖果块
	        el:'#app', //el是element的缩写，app是我们所要控制的区域
	        //这里的data就是MVVM中的M 专门用来保存每个页面的数据
	        data:{ // data属性中，存放的是el中要用到的数据
				msg:'123'
	        },
	        //这个methods属性中定义了当前vue实例所有可用的方法
	        methods:{
	        	somethings(){//es6写法 不兼容IE9
	        		//to do Somethings
				}
	        }
	    })
	</script>
</body>
</html>

3.数据绑定与渲染

3.1 v-text/插值表达式

Vue中v-text和插值表达式都能够替换元素内部的值，使用方法如下

<!-- html -->
<div id="app">
	<p>{{ msg  }}</p>
	<h4 v-text="msg"></h4>
</div>

//js
<script>
	var vm = new Vue(){
		el:'#app',
		data:{
			//通过Vue提供的指令，很方便的就能把数据渲染到页面上，不用再手动操作DOM元素。
			msg:'hello'
		}
	}
</script>

3.2 v-claok

插值表达式在页面加载的时候，有可能会先加载页面后加载Vue.js，这时候我们需要在标签内设置 v-cloak 属性，同时在css中设置↓，这样在数据还没有加载出来的时候，该元素区就会隐藏起来

<div id="app">
		<!--使用v-cloak能够解决插值表达式闪烁的问题 -->
        <p v-cloak>{{ msg  }} </p>
</div>

<style>
    [v-cloak]{
        display: none;
    }
</style>

3.3 属性绑定

Vue使用v-bind实现了元素的单向绑定，这个指令的意思就是‘将这个元素节点的 title 特性和 Vue 实例的 mytitle 属性保持一致’

<div id="app">
        <input type='button' v-bind:title='mytitle'>
</div>

<script>
	var vm = new Vue(){
		el:'#app',
		data:{
			//通过Vue提供的指令，很方便的就能把数据渲染到页面上，不用再手动操作DOM元素。
			mytitle:'hello'
		}
	}
</script>

3.4 事件绑定

3.4.1 v-on

Vue使用v-on实现了绑定事件，vue实例中的方法绑定在input的click的事件上

<div id="app">
        <input type='button' v-bind:title='mytitle' v-on:click='dosomething'>
</div>

<script>
	var vm = new Vue(){
		el:'#app',
		data:{
			//通过Vue提供的指令，很方便的就能把数据渲染到页面上，不用再手动操作DOM元素。
			mytitle:'hello'
		},
		//这个methods属性中定义了当前vue实例所有可用的方法
		methods:{
			dosomething:function(){
				//doSomethings
			},
			dosomething(){//ES6写法
				//doSomethings
			}
			
		}
	}
</script>

3.4.2 事件修饰符

//使用.stop阻止所有的冒泡
<input type='button' v-bind:title='mytitle' v-on:click.stop='dosomething'>
//使用.self实现只有点击当前元素才会触发事件，只阻止当前元素冒泡
<input type='button' v-bind:title='mytitle' v-on:click.self='dosomething'>
//使用.prevent实现阻止默认事件
<a href="http://www.baidu.com" @click.prevent.once="linkclick">百度出多少钱我知乎出三倍</a>
//使用.once实现只触发一次事件
<input type='button' v-bind:title='mytitle' v-on:click.once='dosomething'>

注意
事件修饰符是可以连续使用的，例如↓

<input type='button' v-bind:title='mytitle' v-on:click.prevent.once='dosomething'>

3.5 双向绑定

双向绑定也是Vue我觉得最厉害的地方，在MVVM中，一般都是通过M单向绑定到V中，v-model实现表单元素和Model中数据的双向数据绑定，但是只能运用在表单元素中。

<input type="text" v-model:value="msg" style="width: 300px;">

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'lalalalalalalla'
        },
        methods:{

        }
    })
</script>

3.6 Vue通过属性绑定设置class/style

属性绑定除了属性赋值以外还可以进行样式的绑定，操作如下：
class设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style>
    .red{
        color: red;
    }

    .thin{
        font-weight: 200;
    }

    .italic{
        font-style: italic;
    }

    .active{
        letter-spacing: 0.5em;
    }
</style>
<body>
    <div id="app">
        <!--第一种使用方式：使用v-bind绑定class 注意class中要使用数组且数组内元素为字符串格式，否则需要在vm实例中写相匹配的数据-->
        <h1 :class=['italic']>一只小SABER</h1>
        <!-- 在数组中使用三元表达式 -->
        <h1 :class=['italic',flag?'active':'']>一只小SABER</h1>
        <!-- 使用对象来代替三元表达式 提高可读性 -->
        <h1 :class=['italic',{'active':flag}]>一只小SABER</h1>
        <!-- 在为了class使用v-bind绑定对象的时候，对象的属性是雷鸣，对象的属性可带引号也可不带 -->
        <h1 :class="{red:true,thin:true,italic:true}">一只小SABER</h1>

        <h1 :class="classobj">一只小SABER</h1>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag: true,
                classobj:{red:true,thin:true,italic:true}
            },
            methods:{}
        })
    </script>
</body>
</html>

style设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <!-- 对象就是无序键值对的集合 -->
        <!-- 如果属性带‘-’则不能省略单引号 -->
        <h1 :style="styleObject1">一只小SABER</h1>
        <h1 :style="[styleObject1,styleObject2]">一只小SABER</h1>

    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                styleObject1:{color:'red','font-weight':'200'},
                styleObject2:{'font-style':'italic'}
            },
            methods:{}
        })
    </script>
</body>
</html>

最推荐的还是在data中设置样式然后让Vue操作元素绑定修改div的样式，这样可以有效的解耦合。

3.7 数据循环 v-for

3.7.1 数组

<div id='app'>
	<p v-for='(item,i) in list'>索引值--{{i}} --插值表达式{{ item }} </p>
</div>

var vm = new Vue({
	el:'app',
	data:{
		list:[1,2,3,4,5]
	},
	methods:{}
})

3.7.2 对象数组

<div id='app'>
	<p v-for='(user,i) in list'>索引值--{{i}} --用户名{{ user.name }} </p>
</div>

var vm = new Vue({
	el:'app',
	data:{
		list:[
			{id='1',name='ywz'},
			{id='2',name='yp'},
			{id='3',name='gkl'}

		]
	},
	methods:{}
})

3.7.3 对象

你没看错，就是可以遍历对象-。-

<div id='app'>
	<!--对象中也是键值对 顺序是值在前，键在后，类似于数组的(item,i)-->
	<p v-for='(val,key,i) in user'>索引值-{{i}}-{{val}}{{key}} </p>
</div>

var vm = new Vue({
	el:'app',
	data:{
		user:{
			id='1',
			name='ywz',
			sex='man'
		}
	},
	methods:{}
})

3.7.4迭代数字

<div id='app'>
	<!--in后面出了放普通数组，对象，还可以放数字-->
	<p v-for='count in 10'>第{{ count }}个数字 </p>
</div>

var vm = new Vue({
	el:'app',
	data:{
		
	},
	methods:{}
})

3.7.5 v-for中key属性的使用说明

v-for正在更新已渲染过的元素列表时，他默认用‘就地复用’策略，如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，是简单复用此处的每个元素，并确保它在特定的索引下显示已被渲染的每个元素。我们需要给Vue一个提示（key），以便它能够跟踪每个节点的身份，从而重用和重排序现有的元素。

<div id='app'>
	<!-- 将输入框的id和name与vue实例中的属性双向绑定-->
	<input type='text' v-model:value='id'>
	<input type='text' v-model:value='name'>
	<!-- key是当前对象中唯一标识符 
	同时因为其中是一个对象的属性，所以也需要属性绑定 -->
	<p v-for='(user,i) in list' :key='user.id'>
		<input type='checkbox'>
		id:{{user.id}} --- name:{{user.name}}
	</p>
</div>

var vm = new Vue({
	el:'app',
	data:{
		id:'',
		name:'',
		list:[
			{id='1',name='ywz'},
			{id='2',name='yp'},
			{id='3',name='gkl'}
		]
	},
	methods:{
		add(){
			list.push({id:this.id,name:this.name})
		}
	}
})

3.8 v-show/v-if

<div id="app">
    <!-- 每次都会进行dom的重新删除或者创建-->
    <h3 v-if="flag">v-if</h3>
    <!-- 每次只是切换元素的display：none样式-->
    <h3 v-show="flag">v-show</h3>
    <input type="button" value="点击" @click="flag=!flag">
</div>

    var vm = new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{

        }
    })

3.9 各个方法总结

渲染方式	说明
插值表达式	可以随意拼接内容，只会替换自己的占位符，但是会因为加载延迟导致数据闪烁
v-text	会覆盖元素中的全部内容
v-bind	是Vue中提供用于属性绑定的指令 v-bing可以写合法的js表达式，可以缩写为 :
v-on	是Vue中提供用于事件绑定的指令，可以缩写为 @
v-model	实现表单元素和Model中数据的双向数据绑定，但是只能运用在表单元素中
v-for	可以迭代数组，集合，对象等等，但是需要在操作元素中添加唯一标识符key
v-if	删除或创建元素，对于频繁切换元素的情况不建议使用，可以使用v-show
v-show	切换元素display的显示状态，对于初始化没有必要渲染的元素不建议使用，可以使用v-if

阿良良斑得贝迪卜多比撸翁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门笔记(1)

Vue学习笔记1.Vue引用2.Vue简单使用3.数据绑定与渲染3.1 v-text/插值表达式3.2 v-claok3.3 属性绑定3.4 事件绑定3.4.1 v-on3.4.2 事件修饰符3.5 双向绑定3.6 各个方法总结1.Vue引用学习或者制作原型，建议使用最新版本<script src="https://cdn.jsdelivr.net/npm/vue"></s...
复制链接

扫一扫