Vue.js的使用(一)

2024-03-24 14:32:34

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作用在此，那么在标签中呢？则使用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>

可见显示了三个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的值必须唯一，否则将造成渲染错误！

好了今天写到这里

码农公寓

1.引入Vue.js

2.Vue的简单使用

3.Vue中的指令

相关文章