vuejs相关的基础知识

最新推荐文章于 2022-09-23 10:24:36 发布

不想秃头的前端开发

最新推荐文章于 2022-09-23 10:24:36 发布

阅读量191

点赞数

分类专栏： vue2.0 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45888429/article/details/107206070

版权

vue2.0 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue是什么？

用于构建用户界面的渐进式框架，Vue主要关心视图层，容易上手。

简单的demo

我们使用vue时候需要进行实例化一个vue对象

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>

      
    <script>
    new Vue({
    	el: '#app',
    	data: {
    		message: 'Hello Vue.js!'
    	}
    })
     </script>
</body>
</html>

{{}}文本插值
v-cloak 防止插值闪烁

一般有个渲染的时间，增加用户的体验
v-text 更新元素的 textContent。如果要更新部分的 textContent

`v-for`条件判断与循环

<div id="app">
	<ul>
		<li v-for="tit in arr">{{tit}}</li>
		<!--下方的和上方的代码实现两个相同-->
		<li v-for="tit in arr" v-text="tit"></li>
	</ul>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			arr:[
				"标题1",
				"标题2",
				"标题3",
				"标题4",
				"标题5",
				"标题6"
			]
		}
	})
</script>

`v-if`判断是否显示元素

如果该指令后跟的值隐式转换后的布尔值为true则显示出来该元素

<div id="app">
	<ul>
        <!-- 显示 -->
		<li v-if="true">123</li>
        <!-- 不显示 -->
		<li v-if="false">123</li>
        <!-- 不显示 -->
		<li v-if="flag">123</li>
	</ul>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			flag: false
		}
	})
</script>

`v-html`如果标签内要填充html代码，可以在后边直接跟变量名

<div id="app">
	<div id="box" v-html="html">
		
	</div>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			html:"<h2>标题</h2>"
		}
	})
</script>

`v-pre`如果标签内部有大量不需要编译的文本或者别的，为了加快渲染速度，我们可以忽略编译标签

<div id="app">
    <!-- 不再显示该标签 -->
	<div id="box" v-pre v-html="html">
		
	</div>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			html:"<h2>标题</h2>"
		}
	})
</script>

`v-on`标签元素会被绑定一个监听事件

<div id="app">
	<button type="button" v-on:click="fn">触发弹窗</button>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			html: "<h2>标题</h2>"
		},
		methods:{
			fn(){
				alert('触发点击事件')
			}
		}
	})
</script>

`v-bind` 该属性主要用于的属性该指令后可以跟data里的值

<div id="app">
	<button type="button" @click="fun()">点击我</button>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			arr:[
				"标题1",
				"标题2",
				"标题3",
				"标题4",
				"标题5",
				"标题6"
			]
		},methods:{
			fun(){
				alert('123');
			}
		}
	})
</script>

怎么阻止事件默认行为

阻止事件默认行为

@click.prevent="fun()"

只阻止一次

@click.prevent.once="fun()"

阻止默认的事件冒泡行为

只阻止冒泡

@click.stop="fun()"

只阻止自身的冒泡事件

@click.stop="fun()"

v-show

根据布尔值进行相应的判断，如果为false则不显示，这里与v-if的区别时在vue对虚拟dom进行渲染时候，不做任何解析编译和渲染，只有为true时才会重新渲染，这会浪费性能，当然切换的频率不高的时候可以用吗v-if，频率高或者渲染编译难度大的话，建议用v-show，这只会让浏览器进行重排，但不会让vue重新编译。

vue的计算属性

计算属性是单纯的减少计算部分的代码在模板中过多，导致代码不好分析和维护。

<div id="app">
		<p>{{mesAdd}}</p>
		<button type="button" @click="mesAdd">回答</button>
</div>	
<script>
	// 计算属性,和方法的区别
	//模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
	new Vue({
		el:'#app',
		data:{
			mes:'guest why?'
		},
		computed:{
			//注意在vue中需要用this使用该实例，如果箭头函数的话，由于箭头函数的特殊性，没有this，所以这里不建议使用箭头，如果使用箭头函数，那么我们可以把实例当参数传入函数
			//你可以把实例当第一个参数传进来
			mesAdd:function(){
				return this.mes  +'You are a nice man!';
			}
			
		}
	})
</script>

计算属性的优点

计算属性的优点，计算属性是有缓存的，只有当数据发生变化时才会重新求值，否则从缓存中拿原来缓存到的值，减少了不必要的计算。

相对方法里边写，减少了methods的重复执行次数，提升了页面性能。当然不希望有缓存，请用方法替代。

计算属性默认只有getter(简单理解为对获取变量时执行setter中的代码)，必要时候我们可以设置setter（简单理解为对变量设置时执行setter中的代码）

不想秃头的前端开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs相关的基础知识

vue是什么？用于构建用户界面的渐进式框架，Vue主要关心视图层，容易上手。简单的demo我们使用vue时候需要进行实例化一个vue对象<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫