Vue基础

最新推荐文章于 2023-07-28 16:05:15 发布

半成熟、

最新推荐文章于 2023-07-28 16:05:15 发布

阅读量161

点赞数

本文链接：https://blog.csdn.net/bs775926015/article/details/117676237

版权

Vue是什么

Vue 是一套用于构建用户界面的渐进式框架。
从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作dom元素，vue 和这些不一样能够帮助我们减少不必要的DOM操作;提高渲染效。

渐进式是什么

在这里插入图片描述
渐进式就跟这个图片一样，开发可以根据需求，逐渐递增所要的方式，但每个方,式有不是依靠行特别强。

Vue的两个核心

1.响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作
2.可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

在使用Vue的过程是定义MVVN各个组成部分的过程

1、定义View
2、定义Model
3、创建一个Vue实例或者"ViewModel",它用于连接View和Model

双向绑定实例
MVVM模式本身是实现了双向绑定，在Vue.js可以使用v-model指令在表单元素上创建双向数据绑定。

 <div id="app" class="app">
           <h1>{{msg}}</h1>
           <input type="text" v-model="msg" @keyup.13="getMsg">

           <input type="button" value="修改msg" @click="changeData">
        </div>

将msg绑定到文本框，当更改文本框的值时，

中的内容也会被更新。
在这里插入图片描述

上面的v-mode是Vue.js常用的一个指令。除了这，还提供了一些常用的内置指令：

**- v-if指令

v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令**

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，和v-else-ifv-else配合判断真假，语法：v-if=“expression”，expression是一个返回bool值的表达式。

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
语法：v-for=“item in items” items是一个数组，item是当前被遍历的数组元素。

 <div id="app">
            <p v-for="(item, index) in songList" @click="sing(item)">{{item}}</p>
        </div>

const app = new Vue({
                  el : "#app",
                  data : {
                      songList : ["两只老虎", "爱跳舞", "舒克和贝塔", "邋遢大王"]
                  },
                })

效果图：
在这里插入图片描述
简单的遍历数组完成了。

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class。
v-bind 绑定属性动态操作
也可以用简写形式 :属性名="{属性值: 判断表达式}"

 var app = new Vue({
       
            el: '#app',
            data: {
                isRed : true
            },
            methods: {
               
            }
        })

反复点击按钮，红色方块会显示或消失
效果如下：
在这里插入图片描述

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听元素的点击事件：

有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。
Greet按钮将它的单击事件直接绑定到greet()方法，而Hi按钮则是调用say()方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p><input type="text" v-model="message"></p>
			<p>
				<!--click事件直接绑定一个方法-->
				<button v-on:click="greet">Greet</button>
			</p>
			<p>
				<!--click事件使用内联语句-->
				<button v-on:click="say('Hi')">Hi</button>
			</p>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				message: 'Hello, Vue.js!'
			},
			// 在 `methods` 对象中定义方法
			methods: {
				greet: function() {
					// // 方法内 `this` 指向 vm
					alert(this.message)
				},
				say: function(msg) {
					alert(msg)
				}
			}
		})
	</script>
</html>