Vue的引入方式，属性和计数器案例
个人简介
👩🚀作者简述：大家好，我是陈春波【花名：水香木鱼】，来自于东北【黑龙江】庆安小城😜
🚁CSDN主页：水香木鱼 🔥
🚄Blog【Plog】主页：陈春波 🔥
💕支持我：点赞👍+收藏⭐+留言📝
📢Vue3系列专栏：邂逅Vue3 🚀
🌏人生格言：木秀于林风或许会摧，堆高于岸流或许湍，但是，初心不改，奋斗不息。🔥
1、CDN引入
案例：
<body> <div id="app"> </div> <script src="https://unpkg.com/vue@next"></script> <script> //vue相关代码 const why = { template: '欢迎来到vue3
' } //将app挂载到id为app的div上 const app = Vue.createApp(why); app.mount('#app') </script></body>2、本地下载与引入
vue@next 官网
①打开官网后ctrl+A 复制源代码
②本地新建vue3.js
③将复制的源代码粘贴到vue3.js当中
④使用
<body> <script src="./js/vue3.js"></script></body>3、计数器案例
①原生写法：
<body> <div style="text-align: center;"> <h1 class="counter">0</h1> <button class="increment">+1</button> <button class="decrement">-1</button> </div> <script src="./js/vue3.js"></script> <script> //获取DOM上的所有元素 const counterEl = document.querySelector('.counter') const incrementEl = document.querySelector('.increment') const decrementEl = document.querySelector('.decrement') //2.定义变量 let counter = 0; counterEl.innerHTML = counter //监听按钮点击事件 incrementEl.addEventListener('click', () => { // 加1 counter += 1; counterEl.innerHTML = counter }) decrementEl.addEventListener('click', () => { // 减1 counter -= 1; counterEl.innerHTML = counter }) </script></body>②vue写法:
<body> <div id="app"></div> <script src="./js/vue3.js"></script> <script> Vue.createApp({ template: ` {{msg}}
{{counter}}
`, data: function () { return { msg: 'Hello Word 计算器', counter: 59 } }, //定义方法 methods: { increment() { this.counter += 1 }, decrement() { this.counter -= 1 } } }).mount('#app') </script></body>4、声明式和命令式：
原生开发和Vue开发的模式和特点，我们发现是完全不同的，其中涉及到两种不同的编程风格。
- 命令式注重的是:how to do
- 声明式注重的是:what to do【由框架（机器）完成how 的一个过程】
5、MVVM模型
MVC和MVVM都是一种软件的体系结构
①MVC是Model-View-Controller 的简称【iOS、前端】
② MVVM 是Model-View-ViewModel 的简称【目前非常流行的架构模式】
【注意：vue 并没有完全遵守MVVM的模型，整个设计是受MVVM的启发】
6、template 写法一
在 script 中定义
type="x-template"
<body> <div id="app"></div> <script type="x-template"id="sxmy"> <div style="text-align: center" > <h1>{{msg}}</h1> <h1>{{counter}}</h1> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div> </script> <script src="./js/vue3.js"></script> <script> Vue.createApp({ template: '#sxmy', data: function () { return { msg: 'Hello Word 计算器', counter: 59 } }, //定义方法 methods: { increment() { this.counter += 1 }, decrement() { this.counter -= 1 } } }).mount('#app') </script></body>7、template 写法二
使用
tamplate标签
<body> <div id="app"></div> <template id="sxmy"> <div style="text-align: center"> <h1>{{msg}}</h1> <h1>{{counter}}</h1> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div> </template> <script src="./js/vue3.js"></script> <script> Vue.createApp({ template: '#sxmy', data: function () { return { msg: 'Hello Word 计算器', counter: 59 } }, //定义方法 methods: { increment() { this.counter += 1 }, decrement() { this.counter -= 1 } } }).mount('#app') </script></body>8、data 属性
该属性传入一个函数，并且该函数需要返回一个对象
- Vue2.x 可以传入对象
Vue3.x 必须传入一个函数，否则会直接在浏览器中报错
9、methods属性
该属性是一个对象，通常我们会在这个对象中定义多个方法
- 这些方法被
绑定到template 模板中 - 该方法中，我们可以
使用this 关键字直接访问到data 中返回的对象的属性
