Vue入门

秋月平湖

于 2023-07-17 23:46:06 发布

阅读量64

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_49677278/article/details/131777482

版权

Vue入门

一.vue简介

1.Vue.js是什么？

Vue是一个构建用户界面的渐进式的Javascript框架

2.库和框架的区别

库本质上是一些函数的集合，通常使用时仅仅只是调用他来实现某一个特定的功能，对于代码的限制不大。

而框架是一套完整的解决方案，使用框架时我们通常都是按照框架的规则来进行代码的编写

3.MVVM的介绍

MVVM是一种更好的UI解决方案，通过数据双向绑定让数据自动地双向同步

M：model数据模型
V：view视图
VM：ViewModel 视图模型虚拟dom

对于数据的管理通常有以下两步，而MVVM可以帮助我们省略第二部

1.Ajax拿用户数据
2.将数据拼接出table的HTML代码，绑定到div上

二.Vue入门

1.引入js文件，在线或本地js都可以

2.定义边界，在边界外的vue代码不会生效

3.创建vue实例，将边界挂载到vue实例上

4.创建数据，在边界中和边界外分别使用vue代码显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    导入Vuejs文件-->
    <script src=" https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>

<body>
<!--定义边界-->
<div id="app">
    {{msg}}
</div>
 {{user}}
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                msg:'hello word',
                user:{name:'zc',age:18}
            }
        }
    })
</script>
</body>
</html>

运行结果

在这里插入图片描述

5.实现跟随输入变化的弹屏，当改变V-model的值时，所有msg的值都随之改变，通过数据的双向绑定，优化了原生中实现弹屏的第二步，也就是省略了获取input输入框对象获取value值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src=" https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!--定义边界-->
		<div id="app">
			<!-- v-model的作用是数据双向绑定 -->
			请输入:<input v-model="msg"/>
			<button @click="tp">弹屏</button>
			<!-- 原生实现弹屏功能
			1.给button添加点击事件
			2.获取input输入框对象，获取value值
			3.alert弹出value值 -->
			{{msg}}
			<input :value="msg"/>
		</div>
		
		<script>
		    new Vue({
		        el:'#app',
		        data(){
		            return {
		                msg:'hello word'
		              
		            }
		        },
				methods:{
					tp(){
						//this指的是vue实例
						alert(this.msg)
					}
				}
		    })
		</script>
	</body>
</html>

运行结果

在这里插入图片描述