VUE基础使用

尼古拉斯玛卡巴卡

已于 2022-12-26 23:49:46 修改

阅读量167

点赞数

文章标签： vue.js 前端 javascript 前端框架

于 2022-12-26 23:49:44 首次发布

本文链接：https://blog.csdn.net/weixin_52976120/article/details/128450528

版权

一、简介

1、什么是vue.js

Vue.js是一套构建用户界面的渐进式框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

2、为什么使用vue.js

a) 企业为了提高开发效率，使用框架能够提高开发的效率；
b) 能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念；
c) 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js；

3、vue的核心理念

a）数据驱动视图
b）组件化的开发

4、MVC与MVVC

a) MVC 是后端的分层开发概念;
b) MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

二、vue.js代码结构

1、引入vue.js

<script src="../vue-2.4.0.js"></script>

2、书写视图层

<!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        {{ msg }}
    </div>

3、实例化

let vm = new Vue({
			el: '#app',
			data: {
				msg: 'hello vue',
			},
			methods: {},
		})

4、v-text与v-html异同

相同点：会替换掉元素里的内容；
不同点：v-text不能解析富文本，v-html可以解析富文本；

三、属性绑定和事件绑定

1、v-bind 元素属性绑定

<img v-bind:src="imgSrc" alt="" />
//简写：
<img :src="imgSrc" alt="" />

2、v-on 事件绑定

<button v-on:click="log1">log1</button>
//简写：
<button @click="log2">log2</button>

四、事件修饰符

1、.stop 阻止冒泡

<header @click="log1">
				<aside @click.stop="log2">
					<button @click="log3">stop按钮</button>
				</aside>
			</header>

2、.prevent 阻止默认事件

<a @click.prevent.once="target" href="http://www.baidu.com">百度</a>

3、.capture 添加事件侦听器时使用事件捕获模式

<header @click.capture="log1">
				<aside @click="log2">
					<button @click="log3">captrue按钮</button>
				</aside>
			</header>

4、.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

<header @click.self="log1">
				<aside @click="log2">
					<button @click="log3">self按钮</button>
				</aside>
			</header>

5、.once 事件只触发一次

<header @click.once="log1">
				<aside @click="log2">
					<button @click="log3">once按钮</button>
				</aside>
			</header>

五、vue中样式的使用

1、使用Class样式

a)数组
b)三木表达式
c)数组内置对象（对象的键是样式的名字，值是bool类型）
d)直接通过对象

<body>
		<div id="app">
			<!-- 数组 -->
			<div :class="class1">哈哈哈哈哈</div>
			<div :class="class2">哈哈哈哈哈</div>
			<!-- 三目表达式 -->
			<div :class="flag?'red':''">hhhhhhhhhhhh</div>
			<!-- 数组内置对象 -->
			<div :class="[class2,{'fs40':true}]">数组内置对象</div>
			<!-- 对象 -->
			<div :class="{'red':true,'fs40':true}">对象</div>
			<button @click="changeClass">改变</button>
			<ul>
				<li @click="active(1)" :class="activeIndex==1?'red':''">1</li>
				<li @click="active(2)" :class="activeIndex==2?'red':''">2</li>
				<li @click="active(3)" :class="activeIndex==3?'red':''">3</li>
				<li @click="active(4)" :class="activeIndex==4?'red':''">4</li>
			</ul>
		</div>
	</body>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				class1: 'box red',
				class2: ['box', 'red'],
				flag: true,
				activeIndex: 1,
			},
			methods: {
				changeClass() {
					// this.class1+=' fs40'
					this.class2.push('fs40')
				},
				active(index) {
					console.log(index)
					this.activeIndex = index
				},
			},
		})
	</script>

2、内联样式

a)直接在元素上通过 :style 的形式，书写样式对象
b)将样式对象，定义到 data 中，并直接引用到 :style 中在data上定义样式
c)在元素中，通过属性绑定的形式，将样式对象应用到元素中
d)在 :style 中通过数组，引用多个 data 上的样式对象
e)在data上定义样式
f)在元素中，通过属性绑定的形式，将样式对象应用到元素中

<body>
		<div id="app">
			<div style="color: pink">啦啦啦啦</div>
			<div :style="style">啦啦啦啦</div>
			<div :style="style1">啦啦啦啦</div>
			<div :style="[style1,style2]">啦啦啦啦</div>
			<div :style="getStyle()">啦啦啦啦</div>
		</div>
	</body>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				style: 'color: red',
				style1: {
					color: 'orange',
				},
				style2: {
					fontSize: '40px',
				},
			},
			methods: {
				getStyle() {
					return {
						color: 'blue',
					}
				},
			},
		})
	</script>