欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js的使用(一)

程序员文章站 2022-03-19 16:05:19
1.引入Vue.js引入开发版本(包含了有帮助的命令行警告):引入生产环境版本(优化了尺寸和速度):创建一个div并且给出id:
{{ message }}...

1.引入Vue.js

引入开发版本(包含了有帮助的命令行警告):

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

引入生产环境版本(优化了尺寸和速度):

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

创建一个div并且给出id:

<div id="app">
  {{ message }}
</div>

然后在script中实例化Vue:
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})</script>

运行的结果就是{{message}}中显示的是Hello Vue
语法分析一下:这里面el是element的缩写,表示的是这个vue实例对html中哪个部分起作用,#app表示的就是起作用的id名称,所以对元素名称为“app”的元素起作用,而{{}}是固定写法,表示Vue的作用区域,在例子中如果不加{{}}那么显示的就是message而非Hello Vue了,data表示的Vue中的数据区域,要渲染的数据必须现在data中先定义好,否则就会报错undefined,data可以定义一个key,value键值对,也可以是一个对象:{}或者数组:[],

2.Vue的简单使用

首先Vue中的渲染是响应式的,就是data中的数据一经修改,界面显示的内容也会响应做出更新,比如你在浏览器vm.message中将它修改,界面也会修改
Vue.js的使用(一)
Vue.js的使用(一)
在标签内使用{{}}表示vue作用在此,那么在标签中呢?则使用v-bind,这是vue的一个指令,表示动态绑定,比如

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
</script>

则显示的是页面加载的当地时间,我们可以看出,加入v-bind:title后,title中则与我们的vue有了关联,就是表示这个地盘以后就是vue说了算,使用vue的语法规则,title与vue中的message绑定,所以界面中显示的就是加载的当地时间
当然了v-bind的有一个简写":" “v-bind:titile"和”:title"效果是一样的

3.Vue中的指令

vue中常见的指令:
1.v-bind是一个,简写:,表示与vue中的数据进行动态绑定用法我在上面也已经讲过了
2.v-text其实和{{}}是一回事

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

3.v-html:更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译,不推荐使用这个指令,太鸡肋了简单来说就是插入一段HTML语句
如:

<body>
		<div id='app'>
			<div v-html="template"></div>
		</div>
		
	</body>
<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				template:`<div>我是新插入的html</div>`,
			}
		})
	</script>
	<!--结果显示我是新插入的html  -->

这个指令很荣誉导致XSS共计,如果是一个小页面 小demo可以考虑使用,一般不建议使用
4.v-show:顾名思义,这个指令有关的肯定是show–显示方面的内容,事实上这个v-show指令根据真假值将标签中display设置为none或者还原:

<div v-show="true">我显示了</div> <!-- 结果:我显示了-->
<div v-show="false">我消失了</div> <!-- 结果:我消失了-->

一般v-show的使用:

<div v-show="isShow">我显示了</div>
<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				isShow:true,
				template:`<div>我是新插入的html</div>`,
			}
		})
	</script>

用方法来改变isShow的值来动态显示:

<body>
		<div id='app'>
			<div v-html="template"></div>
			<button @click="handlclick()">点击控制显示</button>
			<div v-show="isShow">我显示了</div>
		</div>

	</body>
	<!--  -->
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				isShow: true,
				template: `<div>我是新插入的html</div>`,
			},
			methods: {
				handlclick() {
					this.isShow = !this.isShow
				},
			}
		})

v-if和v-else-if和v-else:这三个可以连用,学过编程语法的现在估计知道这是个怎么回事了,v-if和v-show都是用来控制标签显示的,不同的是v-show是将标签的css属性的display修改为none,但是他依然存在,而v-if则是销毁标签不存在也不占用内存。当然效果都是一样的
将上面的v-show改为v-if也是同样的效果,而v-else和v-else-if则和编程中的语法一样
比入v-if绑定一个div,v-else绑定一个span,他们绑定的要是同一个数据,加入都绑定isShow,v-if="isShow"v-else='isShow',则如果isShow为‘true’,div显示,ishow为假,span显示,可能有人会问了,真假就两个值,为啥多个v-else-if呢?

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

上这个代码估计就懂了
注意v-else和v-else-if只能和v-if连用,不能单独使用!

5.v-for:遍历vue中定义的数据
直接上代码:

<div id='app'>
			<div v-html="template"></div>
			<button @click="handlclick()">点击控制显示</button>
			<div v-show="isShow">我显示了</div>
			<div v-for="item in items" :key="item.id">
			  {{ item.text }}
			</div>
		</div>

	</body>
	<!--  -->
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				isShow: true,
				template: `<div>我是新插入的html</div>`,
				items:[
					{
						id:1,
						text:'我是第一个'
					},
					{	id:2,
						text:'我是第二个'
					},
					{
						id:3,
						text:'我是第三个'
					},
				]
			},
			methods: {
				handlclick() {
					this.isShow = !this.isShow
				},
			}
		})
	</script>

Vue.js的使用(一)
可见显示了三个div,此例子中v-for的作用是将items数组中的每个对象取出来作为item显示在页面中,有多少个item就创建多少个div,可以遍历的有:Array | Object | number | string | Iterable (2.6 新增)
其中动态绑定的key是作为一个唯一标识key,为什么设置一个标识key呢?

原理:当我们对遍历的这个数组进行增删改时,我们的vue是怎么做的呢?
难道是把我们修改后的新数组与旧数组进行类似于嵌套for循环这种for(int i,i<newarr.leng,i++){for(int i,<oldarr.lenth,i++{})}逐步取出每个数组的每一项,然后每个都对比吗?显然这样做的话太复杂度会很惊人,于是我们就巧妙的引入了一个唯一标识 Key,上次我的博客就写到,Vue在渲染时会创建一个虚拟的dom树,key就是在虚拟dom创建后,新旧数组直接对比key而不用对比内容了,找key相同的就直接对比内容,将新数组的值赋给旧数组,然后渲染到实际dom上,如果新数组有旧数组中没有的key,就增加一个key,如果没有,就删除一个key,对应的数组也增加或删除,这样性能就得到了一个量级的提升,复杂度由n的2次方变为n,
注意:key一定要加动态绑定指令v-bind或者简写“:” ,且key的值必须唯一,否则将造成渲染错误!

好了 今天写到这里

本文地址:https://blog.csdn.net/abcsxc258/article/details/111935387

相关标签: vue