Vue基础知识

最新推荐文章于 2024-09-12 15:10:57 发布

完全靠猜

最新推荐文章于 2024-09-12 15:10:57 发布

阅读量357

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Wpl6666/article/details/123121361

版权

Vue 安装模板语法文本渲染属性绑定

关键词由CSDN通过智能技术生成

01.Vue概述

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。简单，高效，生态丰富（插件多）

前端三大框架: React Vue Angular

vue作者尤雨溪:

尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职阿里巴巴Weex团队。

2014年 Vue.js发布 2016年 Vue2.x发布 2022年 Vue3.x发布

02.Vue的安装与使用

1. 直接引用script

2. 安装脚手架

npm install -g @vue/cli

3.创建应用实列

createApp 函数创建一个新的应用实例

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})
const vm = app.mount('#app')
console.log(vm.count) // => 4

创建应用实例-完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue案例</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
	    <div id="app">
   		hello Vue!
	    </div>
	    <script>
		const app = Vue.createApp({
  			data() {
    				return { count: 4 }
 			 }
		})
		const vm = app.mount('#app')
		console.log(vm.count) // => 4
	    </script>
	</body>
</html>

03.Vue模板语法-文本渲染

模板语法介绍:

指令是带有 v- 前缀的特殊 attribute。指令的属性值预期是单个 JavaScript 表达式

文本渲染-{{}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">{{msg}}</div>
		<script type="text/javascript">
			const app = Vue.createApp({
				data() {
					return {
						msg: '你好Vue3'
					}
				}
			})
			const vm = app.mount('#app')
		</script>

	</body>
</html>