在软件和网页的开发中,学会前端的开发至关重要,我们想快速入门并掌握前端开发的话,vue是一个不错的选择,vue出现在越来越多的前端开发工程师的招聘要求中。在数据库课程的要求下,我对vue有了一个简单的了解。
一 什么是vue?
Vue(通常称为Vue.js)是一种流行的开源JavaScript框架,用于构建用户界面和单页面应用程序。Vue专注于通过其简洁的API和响应式数据绑定系统来简化前端开发。适合用于构建各种规模的Web应用程序。
二 为什么学习vue?
- Vue是目前前端最火的框架之一
- Vue是目前企业技术栈中要求的知识点
- Vue可以提升开发体验
- Vue学习难度较低
三 Vue开发前准备
1.安装
Vue CLI 是一个基于Vue.js进行快速开发的完整系统,用以下安装命令:
- npm install -g @vue/cil
安装之后,我们就可以在命令行中访问vue命令,可以通过简单运行vue看看是否展示出了一份所有可用命令的帮助信息,来验证是否安装成功:
- vue --version
2.创建一个项目
运行以下命令来创建一个新项目(一般在visual studio code中进行)
- vue create vue-demo
可选择默认项目模板,或手动选择需要的特性
(在控制台中,可以按上下按键调整选择项,通过空格选择选中)
如上图所示,选择Babel和Progressive Web App(PWA)Support两个选项即可
剩下的步骤根据自己的需要选择即可
3.运行项目
- cd vue-deom //进入项目根目录
- npm run serve //运行启动项目
结束后会生成类似于下面的网址:
用浏览器打开即可以看到我们设计的前端。
4.安装Vue高亮插件
VSCode中安装vetur或者volar都可,前者针对Vue2版本,后者针对Vue3版本
四 Vue的模板语法
Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
1.文本插值
- <div id="app">
- <p>{{ message }}</p>
- </div>
2.v-html指令(用于输出html代码)
- <div id="app">
- <div v-html="message"></div>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- message: '<h1>菜鸟教程</h1>'
- }
- })
- </script>
3.指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
- <div id="app">
- <p v-if="seen">现在上软件工程课</p>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- seen: true
- }
- })
</script>
4.参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
- <div id="app">
- <pre><a v-bind:href="url">软件工程</a></pre>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- url: 'http://www.runoob.com'
- }
- })
- </script>
5.用户输入
- <div id="app">
- <p>{{ message }}</p>
- <input v-model="message">
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- message: 'Runoob!'
- }
- })
</script>
以上是我本周所学的一点浅薄知识,大家可以在官网和B站上看到更好的学习资料,总体感觉还是很有意思的。不足的内容下次补充。
参考视频:
https://www.bilibili.com/video/BV1Cx4y1K7tk?p=2&vd_source=cfb17a507c1b169f5bc2417a636436ed
参考文档: