vue入门学习

        在软件和网页的开发中，学会前端的开发至关重要，我们想快速入门并掌握前端开发的话，vue是一个不错的选择，vue出现在越来越多的前端开发工程师的招聘要求中。在数据库课程的要求下，我对vue有了一个简单的了解。

一 什么是vue?

Vue（通常称为Vue.js）是一种流行的开源JavaScript框架，用于构建用户界面和单页面应用程序。Vue专注于通过其简洁的API和响应式数据绑定系统来简化前端开发。适合用于构建各种规模的Web应用程序。

二 为什么学习vue?

1. Vue是目前前端最火的框架之一
2. Vue是目前企业技术栈中要求的知识点
3. Vue可以提升开发体验
4. Vue学习难度较低

三 Vue开发前准备

1.安装

Vue CLI 是一个基于Vue.js进行快速开发的完整系统，用以下安装命令：

1. npm install -g @vue/cil

安装之后，我们就可以在命令行中访问vue命令，可以通过简单运行vue看看是否展示出了一份所有可用命令的帮助信息，来验证是否安装成功：

1. vue --version

2.创建一个项目

运行以下命令来创建一个新项目（一般在visual studio code中进行）

1. vue create vue-demo

可选择默认项目模板，或手动选择需要的特性

（在控制台中，可以按上下按键调整选择项，通过空格选择选中）

如上图所示，选择Babel和Progressive Web App(PWA)Support两个选项即可

剩下的步骤根据自己的需要选择即可

3.运行项目

1. cd vue-deom  //进入项目根目录
2. npm run serve  //运行启动项目

结束后会生成类似于下面的网址：

用浏览器打开即可以看到我们设计的前端。

4.安装Vue高亮插件

VSCode中安装vetur或者volar都可，前者针对Vue2版本，后者针对Vue3版本

四 Vue的模板语法

        Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

1.文本插值

1. <div id="app">
2.   <p>{{ message }}</p>
3. </div>

2.v-html指令（用于输出html代码）

1. <div id="app">
2.     <div v-html="message"></div>
3. </div>
4.     
5. <script>
6. new Vue({
7.   el: '#app',
8.   data: {
9.     message: '<h1>菜鸟教程</h1>'
10.   }
11. })
12. </script>

3.指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

1. <div id="app">
2.     <p v-if="seen">现在上软件工程课</p>
3. </div>
4.     
5. <script>
6. new Vue({
7.   el: '#app',
8.   data: {
9.     seen: true
10.   }
11. })

</script>

4.参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

1. <div id="app">
2.     <pre><a v-bind:href="url">软件工程</a></pre>
3. </div>
4.     
5. <script>
6. new Vue({
7.   el: '#app',
8.   data: {
9.     url: 'http://www.runoob.com'
10.   }
11. })
12. </script>

5.用户输入

1. <div id="app">
2.     <p>{{ message }}</p>
3.     <input v-model="message">
4. </div>
5. <script>
6. new Vue({
7.   el: '#app',
8.   data: {
9.     message: 'Runoob!'
10.   }
11. })

</script>

以上是我本周所学的一点浅薄知识，大家可以在官网和B站上看到更好的学习资料，总体感觉还是很有意思的。不足的内容下次补充。

参考视频：

https://www.bilibili.com/video/BV1Cx4y1K7tk?p=2&vd_source=cfb17a507c1b169f5bc2417a636436ed

参考文档：

https://www.runoob.com/vue2/vue-tutorial.html