Vue学习记录（一）

最新推荐文章于 2024-04-02 20:06:01 发布

牛仔不当马仔

最新推荐文章于 2024-04-02 20:06:01 发布

阅读量113

点赞数

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/qq_45155741/article/details/118255403

版权

web前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

网络应用

axios:先导入,再引用

axios.get("url").then(function(response){

			}, funcition(err){})

Vue基础

Vue数据单向传递

Vue其实是基于MVVM设计模式的
被控制的区域：View
实例对象：View Model
Vue中的data：Model

Vue数据双向传递

v-model
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="demo">
			<p>{{ message }}</p>
			<input type="text" name="" id="" value="" v-model="name"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var app = new Vue({
				// el:挂载点
				el:"#demo",
				// data:数据对象
				data:{
					message: "nihao!",
					name: "yxy"
				}
			})
		</script>
	</body>
</html>

Vue常用指令

v-once

让界面不跟着数据发生变化，数据只渲染一次

<p v-once>这里数据只渲染一次{{ message }}</p>
<p> 这里数据会受影响{{ message }}</p>

v-cloak

<p> {{ message }}</p>

如上，Vue渲染数据会先将{{message}}显示出来，通过加载完Vue和js后才能将Vue中data的message渲染上去，如果用v-cloak指令，就可以让{{message}}不渲染出来，只渲染最后得到的Vue数据

<div id="demo" v-cloak>
			{{name}}
		</div>

[v-cloak] {
				display: none;
			}

v-text、v-html

v-text
1.相当于js中的innerText
2.v-text替换内容
3.不能解析html代码片段
v-html
1.相当于js中的innerHTML
2.会解析html代码

var app = new Vue({
				el: "#demo",
				data: {
					name:"zs",
					age:"21",
					html:"<p>我是p</p>"
				}
			})

<div id="demo">
			<p v-text="age"></p>
			<p v-html="html"></p>
			{{name}}
		</div>

v-if

条件满足渲染元素（ture），条件不满足不渲染元素（false）

<div id="demo">
			<p v-if="score >= 80">优秀</p>
			<p v-else-if="score >= 60 && score < 80">良好</p>
			<p v-else="score < 60">差</p>
		</div>

var app = new Vue({
				el: "#demo",
				data: {
					score: "50",
				}
			})

v-show

使用方法和v-if相似
与v-if的不同点：
1.v-show只会创建一次元素，ture和false的转换是通过给元素中添加了display属性
2.v-if中ture和false的切换是通过频繁的创建和删除元素，比较消耗性能

v-for

根据数据多次渲染元素
特点：可以遍历数字、字符串、数组、对象

	<body>
		<ul id="demo">
			<li v-for="(key, value) in obj">{{key}}-----{{value}}
				<li v-for="(key, value) in arr">{{key}}
					<li v-for="(key, value) in 5">{{key}}
						<li v-for="(key, value) in 'acndh'">{{key}}</li>
					</li>
				</li>
			</li>
		</ul>
	</body>

var app = new Vue({
			el: "#demo",
			data:{
				arr:[1, 3, 5, 7, 9],
				obj:{
					name:"yxy",
					age:"21",
					score:"100"
				}
			}
		})

图片：
在这里插入图片描述

v-bind

作用：专门用于给元素的属性绑定数据
写法：在要绑定的属性名之前加上v-bind:或者一个:
例：

		<div id="demo">
			<textarea rows="" cols="" :value="text"></textarea>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#demo",
				data:{
					text:"请输入你的内容"
				}
			})
		</script>

绑定类名注意：
可以通过给:class添加属性值，但属性值中必须是数组或者对象，且可以使用三元表达式，建议使用对象给类名赋值，方便今后在Vue中动态的更改元素中的属性
例：

		<div id="demo">
			<!-- <textarea rows="" cols="" :value="text"></textarea>-->
			<p :class="obj">这是修改的内容</p>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#demo",
				data: {
					// text:"请输入你的内容"
					obj: {
						'size': true,
						'color': true
					}
				}
			})
		</script>

css样式：

			* {
				padding: 0px;
				margin: 0px;
			}

			.size {
				font-size: 50px;
			}

			.color {
				color: antiquewhite;
			}

绑定样式style注意：
取值必须要用yinhao，如果样式名带有-，则也需要给样式名加上引号

绑定事件

事件监听

用v-on指令或者@后跟点击事件的名称

		<div id="demo">
			<button type="button" @click="cli">测试</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#demo",
				data:{
					
				},
				methods:{
					cli(){
						console.log("yxy");
					}
				}
			})
		</script>

事件修饰符

在这里插入图片描述
简述：
.once:只执行一次回调函数
.prevent:阻止事件的默认行为，比如a标签的跳转
.stop:阻止事件冒泡（子代向父代传递事件）
.self:只有当前元素发生，才会执行
.capture:将默认的事件冒泡转化成事件捕获（父代向子代传递事件）

常见注意点：
1.如果想在Vue方法中使用data中的数据，就必须加上一个this
2.v-on后面的事件可以加(),()中可以传递参数

Vue自定义指令

Vue.directive():可以接收两个参数
第一个参数是指令的名称（不需要加上v-）
第二各参数指定一个对象（对象中通过生命周期的指定再给元素添加事件）
以下是自定义的获取焦点指令：

			Vue.directive("focus", {
				inserted: function(el) {
					el.focus();
				}
			});

Vue计算属性

computed

	<body>
		<div id="demo">
			{{msg1}}
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#demo",
				data:{
					msg:"abcdef"
				},
				methods:{
					
				},
				directives:{
					
				},
				computed:{
					msg1:function(){
						var msg2 = this.msg.split("").reverse().join("+");
						return msg2;
					}
				}
			})

			</script>
	</body>

Vue计算属性和函数的区别

函数：每次执行都会被调用
计算属性：如果返回的值相同，则只会调用一次
由于计算属性会将计算结果缓保存起来
如果返回的结果不经常发生改变
则使用计算属性对于计算机的性能会比使用函数高

Vue过滤器

全局过滤器

Vue.filter(),可以传两个参数，第一个参数是过滤器的名称，第二个参数传递一个回调函数

	<body>
		<div id="demo">
			{{name | fil1 | fil2}}
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.filter("fil1", function(str){
				str1 = str.replace(/大学，/g, "小学");
				console.log(str1);
				return str1;
			})
			Vue.filter("fil2", function(str){
				str1 = str.replace(/小学/g, " ");
				console.log(str1);
				return str1;
			})
			var app = new Vue({
				el: "#demo",
				data: {
					name:"贵州大学，成都大学，重庆大学，西南大学"
				},
				methods: {

				},
				directives: {

				}
			})
		</script>
	</body>

拓展：var和let、const的区别
链接：
http://www.lht.ren/article/15/（Javascript基础之-var，let和const深入解析（一））
http://www.lht.ren/article/16/（Javascript基础之-var，let和const深入解析（二））
拓展2：
变量命名网址：
https://unbug.github.io/codelf/

牛仔不当马仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习记录（一）

Vue本地应用网络应用本地应用v-textv-htmlv-on或者@v-ifv-mind或者:v-showv-forv-moddle网络应用axios:先导入,再引用axios.get("url").then(function(response){ }, funcition(err){})
复制链接

扫一扫