「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