「Vue基础」-快速入门
前面，已经学了下 Django 不分离版本，也用
Django写过博客（www.qmpython.com）
and so on……………..
因业余抽空时间学习写的，所以没有整理开发笔记，如果后期有时间，再来整理。后面又学了 DRF，就想着前后分离，顺便抽空把 VUE 也学了，然后将博客改版成前后端分离的，然后就没然后，学不动了，已经到了跑外卖的时候了。
认识Vue
Vue(专业的读法类似 view)，是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。
此处基于vue3.0学习的，而此时vue3.2已发布一周了，再学下去就废了。
Vue安装
使用
Vue.js添加到项目的三种方式：1、在页面上通过
CDN方式引入，这种方式适用于我们这些初学者
<script src=”https://unpkg.com/vue@next”></script>上面的意思是始终找到最新版本，对于生产，建议链接到特定的版本号，并进行构建，以避免新版本意外损坏。
2、使用
npm安装，使用
Vue构建大型应用程序时，建议使用
npm方法安装。
npm install vue@next3、使用正式的 CLI 来搭建项目，该项目为现代的前端工作流。
使用 Vue 时，我们建议您还安装 Vue Devtools，在浏览器中，使您可以在更加用户友好的界面中检查和调试 Vue 应用程序。
Vue初体验
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：我们先新建一个 html 文件，编写以下代码：
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Hello Vue</title> <!– 直接CDN方式引入vue.js –> <script src=”https://unpkg.com/vue@next”></script></head><body> <div id=”root”></div> <div id=”root2″></div></body><script> // 创建vue实例 const APP = Vue.createApp({ template: ‘<div>Hello Vue</div>’ }).mount(‘#root’); // 将template中的内容挂载到id为root的元素中</script></html>在浏览器中显示效果如下：
我们可以看到在 id=root 下增加了另外个 dom 元素，root2 下没有。
上面的显示内容是静态的，如果我们想要动态显示，那应该怎么样呢？继续来改进：
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Hello Vue</title> <!– 直接CDN方式引入vue.js –> <script src=”https://unpkg.com/vue@next”></script></head><body> <div id=”root”></div></body><script> // 创建vue实例 const app = Vue.createApp({ data() { // 一个函数 return { content: 1 // 定义变量，也就是model } }, template: ‘<div>{{content}}</div>’ // 在标签中使用变量， 模板，View }) const vm = app.mount(‘#root’); // 将template中的内容挂载到id为root的元素中</script></html>
有没有种“似曾相识燕归来”的感觉，没错，就和我们学习的 Django 类似，在视图中定义变量，然后渲染模板，模板中也是使用{{}}来使用变量的。
我们再来看下，当页面打开的时候自动执行的方法：
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Hello Vue</title> <!– 直接CDN方式引入vue.js –> <script src=”https://unpkg.com/vue@next”></script></head><body> <div id=”root”></div></body><script> Vue.createApp({ data() { return { content: 1 } }, mounted() { // 页面打开的时候，自动执行 setInterval(() =>{ // 定时器，每隔1s让content++ // 简写 this.content +=1; // 等同于 // this.$data.content +=1 }, 1000) }, template: ‘<div>{{content}}</div>’ // 在标签中使用变量 }).mount(‘#root’); // 将template中的内容挂载到id为root的元素中</script></html>在页面上就可以看到数字不断+1。
再来体验几个例子：
1、反转字符：
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Hello Vue</title> <!– 直接CDN方式引入vue.js –> <script src=”https://unpkg.com/vue@next”></script></head><body> <div id=”root”></div></body><script> Vue.createApp({ data() { return { content: ‘Hello Vue’ } }, methods: { btnClick() { this.content = this.content.split(”).reverse().join(”); } }, template: ‘<div>{{content}} <button v-on:click=”btnClick”>反转字符</button></div>’ }).mount(‘#root’);</script></html>
点击按钮就会反转：
这里用到了 v-on:click 表示，点击按钮的时候调用对应函数。
2、隐藏显示元素：
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Hello Vue</title> <!– 直接CDN方式引入vue.js –> <script src=”https://unpkg.com/vue@next”></script></head><body> <div id=”root”></div></body><script> Vue.createApp({ data() { return { show: true } }, methods: { btnClick() { this.show = !this.show; } }, // 注意字符串换行使用的是1旁边的` template: ` <div> <span v-if=”show”>Hello Vue</span> <button v-on:click=”btnClick”>显示/隐藏</button> </div> ` }).mount(‘#root’);</script></html>上面用到 v-if，如果是 true 则显示标签，如果是 false 则不显示，通过点击来大道显示和隐藏的效果。
#VUE#
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126552.html
starterknow