Vue的基础语法（初学Vue）

一、Vue介绍

1.概念

2.关键特性和优势

二、Vue初体验

1.CDN引入

2.本地引入

3.初体验-动态数据

4.初体验-列表数据

5.初体验-计数器

6.初体验计数器（高级）

7.原生实现计数器

8.options-data属性

9.options-methods属性

一、Vue介绍

1.概念

Vue.js（通常简称为 Vue）是一款流行的开源 JavaScript 前端框架，用于构建交互式的用户界面和单页面应用程序（SPA）。Vue 的设计灵感主要来自于 Angular 和 React，但它的核心库更小巧，易于上手，并且具有更快的渲染速度。

2.关键特性和优势

简单易用：Vue 的核心库非常轻量级，学习曲线较低，使得新手和有经验的开发者都能快速上手。
响应式数据绑定：Vue 使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新，开发者无需手动操作 DOM。
组件化开发：Vue 鼓励将页面拆分成多个组件，每个组件负责自己的一部分功能，便于复用和维护，同时提高了代码的可读性和可维护性。
虚拟 DOM：Vue 使用虚拟 DOM 技术来优化页面渲染性能，通过比较虚拟 DOM 的差异，只对需要更新的部分进行实际的 DOM 操作，从而提高了页面的渲染效率。
单文件组件：Vue 支持使用单文件组件（.vue 文件）来组织代码，将模板、样式和逻辑封装在同一个文件中，便于管理和维护。
生态系统丰富：Vue 生态系统庞大而丰富，拥有大量的第三方库和插件，可以满足各种需求，例如路由管理、状态管理、UI 组件库等。
灵活性：Vue 采用了渐进式的设计理念，可以逐步引入到现有项目中，也可以作为完整的前端解决方案使用。

二、Vue初体验

1.CDN引入

vue的CDNhttp://unpkg.com/vue

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>哈哈哈哈</h2><p>我是内容，嚯嚯嚯</p><div id="app"></div><!--CDN引入--><script src="http://unpkg.com/vue"></script><script>// 使用Vueconst app = Vue.createApp({template: `<h2>Hellp World!</h2><span>呵呵呵</apan>`})// 挂载app.mount("#app")</script>
</body>
</html>

2.本地引入

首先将vue代码保存到本地

vue代码地址从这里获取

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script src="./lib/vue.js"></script><script>// 使用Vueconst app = Vue.createApp({template: `<h2>Hellp Vue!</h2><span>呵呵呵</apan>`})// 挂载app.mount("#app")</script>
</body></html>

3.初体验-动态数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//插值语法：{{title}}template:`<h2>{{message}}</h2>`,data:function(){return{title:"Hello World",message:"你好啊，Vue3"}}})app.mount("#app")</script>
</body></html>

4.初体验-列表数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//插值语法：{{title}}template: `<h2>电影列表</h2><ul><li v-for = "item in movies">{{item}}</li></ul>`,data: function () {return {message: "你好啊，利银行",movies: ["大话西游", "星际穿越", "到梦空间", "少年派", "飞驰人生", "侠岚"]}}})app.mount("#app")</script>
</body></html>

5.初体验-计数器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({template: `<h1>当前计数：{{counter}}</h1><button @click="increment">+1</button><button @click="decrement">-1</button>`,data: function () {return {counter: 0}},methods: {increment: function () {this.counter++},decrement: function () {this.counter--}}})app.mount("#app")</script>
</body></html>

6.初体验计数器（高级）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h1>当前计数：{{counter}}</h1><button @click="increment">+1</button><button @click="decrement">-1</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({data: function () {return {counter: 0}},methods: {increment: function () {this.counter++},decrement: function () {this.counter--}}})app.mount("#app")</script>
</body></html>

7.原生实现计数器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>当前计数：<span class="count"></span></h1><button class="add">+1</button><button class="sub">-1</button><script>//1.获取domconst h1El = document.querySelector("h1")const countEl = document.querySelector(".count")const addBtnEl = document.querySelector(".add")const subBtnEl = document.querySelector(".sub")//2.定义一个变量记录数据let count = 100countEl.textContent = count//3.监听按钮点击addBtnEl.onclick = function () {count++countEl.textContent = count}subBtnEl.onclick = function () {count--countEl.textContent = count}</script>
</body></html>

8.options-data属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><button @click = "changeMessage">改变message</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata:function(){return{message:"Hello Data"}},// methods : ootion apimethods:{changeMessage:function(){this.message = "Hello xjy"}}})app.mount("#app")</script>
</body>
</html>

9.options-methods属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>当前计数：{{counter}}</h1><button @click="increment">+1</button><button @click="decrement">-1</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({data:function(){return{counter:0}},methods:{increment:function(){this.counter++},decrement:function(){this.counter--}}})app.mount("#app")</script>
</body>
</html>