Vue：Vue快速入门

vue2教程:

2-2 vue初体验_哔哩哔哩_bilibili

vue3教程:

2-vue的开发调试工具vue-devtool插件安装_哔哩哔哩_bilibili

这里有网友发布的vue2和vue3的学习教程，主要是那个路飞学城的老师讲的课，没错就是那个python之父
而本笔记主要是vue3的学习过程,个人喜欢配上大量示例图，希望你能够有所收获。
好了就这么开始学习之旅吧！
从此刻开始我又多了一项好像学过但是想不起来，想起来又不会用的技术

那，什么是vue呢？

vue.js是目前前端web开发最流行的工具库（三大前端开发框架之一），由尤雨溪2014年2月发布的。

另外几个常见的工具库:react.js(企业级开发用的比较多)/angular.js/jQuery

官方网站：

中文：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

英文：Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)

可能你之前学过JQuery,你可能疑问，JQuery不也是挺好用的吗？系统的学习后，你会发现Vue是相当好用

JQuery作为老牌的前端大哥，已经走到了风口的浪尖上

JQuery和vue的定位是不一样的

1 2	1. JQuery的定位是获取元素和完成特效。 2. vue的定位是方便操作和控制数据和完成特效。

安装Vue

下载js文件

基于脚本导入(适用于前后端不分离)

下载vue.js文件，通过script标签

github地址:Release v3.3.4 · vuejs/core (github.com)
你可以通过cdn下载一个min的版本，我就随便给一个链接
https://unpkg.com/vue@3.2.36/dist/vue.global.js

当然你也可以通过npm包管理器下载vue整个模块。当前我们vue其他的功能都没有学习使用的需求，只要得到vue.min.js就行

在nodel_modules中的vue中的dist中的

Vue 获得 vue.min.js 文件_卡尔特斯的博客-CSDN博客

vue.global.js=vue.js

基于项目构建工具（适用于前后端分离

安装项目构建工具，自动构建成一个独立的项目
目前官方推荐的项目构建工具构建项目:vue-CLI,vite

我们先通过vue.js的第一种那个方式完成学习，这种使用方式类似于JQuery,开发中可以使用开发版本vue-x.x.x.js,产品上线要换成vue.min.js 当然这不是我说的，因为我个人还没有上线什么vue开发的项目，不过还是有机会的

Vue简单尝试

通过script导入vue后，当我们给Vue对象赋值时

<script>
    var vm=html.createApp({
        data() {
            return {
                message: "这就是数据，一般来自服务端，客户端通过Ajax来请求的"//通过正则来匹配
            }
        }
    }).mount('##app')//控制对应的id元素
</script>

可以在前端的控制台上获取和修改数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.3.3.4.js"></script>
</head>
<body>
<div id="app">
    <!--  {{message}} 表示把vue对象的data属性中对应的数据输出到页面  -->
    <!--    {{在通过双标签显示数据}}-->
    <p>hello vue!</p>
    <p>{{ message }}</p>
    <p>{{ num }}</p>
    <p>{{ is_delete }}</p>
    <!--    下面nodata没有数据，就是因为在data中没有设置预设值-->
    <p>{{ nodata }}</p>
</div>
<script>
    //vue的代码始于初始化一个bue对象，这给对象的名字建议叫vm,通过Vue.createApp
    // 所以每次操作从声明一个vue变量开始
    var vm = Vue.createApp({
        data() { //data是将要展示到HTML标签中的数据。一般会在这里设置vue变量,并给变量一个默认值
            return {
                message: "这就是数据，一般来自服务端，客户端通过Ajax来请求的",//通过正则来匹配
                num: 100,
                is_delete: true
            }
        }
    }).mount('##app')//控制对应的id元素

    // mount:设置vue可操作的html内容范围,值一般是css的id选择去，个人感觉像是xpath语法
    //data:保存vue.js显示到前端html页面数据
</script>
</body>
</html>

效果如下

vue的浏览器开发工具（扩展)

扩展链接

Installation | Vue Devtools (vuejs.org)

很酷炫，也很有用，在检查数据的时候就知道了

Vue的M-V-VM思想

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式。是一种代码分工

flowchart  LR
    Model-->ModelView
    ModelView<-->View
    ModelView-->Model

Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
view指代的就是HTML文档中的DOM元素。负责视图处理
ViewModel指代的是vue.js中我们编写的代码时的vm对象，他是vue.js的核心,负责链接View和Model,保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中就是vm对象自动完成。vm对象会时刻的监控View和Model的编号，并保持双方数据的一致性！！！这个特性也被称为双向绑定

编写代码，让我们更清晰的了解MVVM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.3.3.4.js"></script>
</head>
<body>
<div id="app">
    <!--  {{message}} 表示把vue对象的data属性中对应的数据输出到页面  -->
    <!--    {{在通过双标签显示数据}}-->
    <p>hello vue!</p>
    <p>{{ message }}</p>
    <p>{{ num }}</p>
    <p>{{ is_delete }}</p>
    <!--    下面nodata没有数据，就是因为在data中没有设置预设值-->
    <p>{{ nodata }}</p>
<!--    <input type="text" v-model="num">-->
    <input type="text" v-model.number="num">
<!--    当手动往input输入值后就变成了字符串拼接每次在末尾添上一个1-->
</div>
<script>
    //vue的代码始于初始化一个bue对象，这给对象的名字建议叫vm,通过Vue.createApp
    // 所以每次操作从声明一个vue变量开始
    var vm = Vue.createApp({
        data() { //data是将要展示到HTML标签中的数据。一般会在这里设置vue变量,并给变量一个默认值
            //data中声明的所有数据都会被vm对象进行遍历，赋值给vm对象作为属性。
            //我们要访问或操作data里面的数据直接通过this来访问
            return {
                message: "这就是数据，一般来自服务端，客户端通过Ajax来请求的",//通过正则来匹配
                num: 100,
                is_delete: true
            }
        },
        mounted() {
            //会在vue加载html完成后自动执行这一部分
            //js原生的定时函数，两个参数，参数一是匿名函数或者函数名，参数二是时间
            setInterval(() => {
                this.num += 1;//this表示vm对象，相当于python里的self
            }, 1000)
        },
    }).mount('##app')//控制对应的id元素

    // mount:设置vue可操作的html内容范围,值一般是css的id选择去，个人感觉像是xpath语法
    //data:保存vue.js显示到前端html页面数据
</script>
</body>
</html>

vm.$el//可控制范围 ##app的内部 
vm.$el.parentElement//可控制范围
vm.$data        //vm对象中要显示在页面中的数据对象
vm.$data.message//访问data里面的数据
vm.message//message就是data里面声明的对象，可以使用vm.变量名显示其他数据,message只是示例，在vm对象的内部可以直接通过this,num获取数据

1.如果要输出data里面的数据作为普通双标签的内容，需使用{{  }}
	用法:
		vue对象的data属性，
        data(){
            return{
                name"小明"
            }
        }
		标签元素:
			<h1>{{ name }}</h1>
2.如果要输出data里面的数据作为表单元素的内容，需使用vue.js提供的元素属性vue-model
		vue对象的data属性，
        data(){
            return{
                name"小明"
            }
        }
		表单元素:
			<input v-model="name">
	使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面凡是使用这个数据都会发生变化。
	用户修改了的数据，会变成字符串格式！

显示数据

在双标签中显示纯文本数据一般通过{{ }}来完成，双括号中还可以支持js表达式和符合js语法的代码，列如函数调用
在表单输入框中显示数据要使用v-model来完成数据的显示
如果双标签的内容要显示id数据包含html代码，则使用v-html来完成


vue对象的data属性，
        data(){
            return{
               "message": '<img src="./static/img-2.jpg" >',
            }
        }
     标签元素:
         <!--    "message":'<img src="./static/img-2.jpg" >'
         的结果相当于↓ 实体化了，而不是标签
         -->
         <p>&lt;img src=&quot;./static/img-2.jpg&quot;&gt;</p>
         <!--    应当-->
         <p v-html="message"></p>

v-html必须在html标签里面作为属性写出来，而且只能写在普通双标签中，单标签元素或是表单元素都不行

小作业

{
   goods: [
      {
         "name": "python入门",
         'price': 150,
         'page': 200
      },
      {
         "name": "python进阶",
         'price': 100,
         'page': 300
      },
      {
         "name": "python高级",
         'price': 500,
         'page': 200
      },
      {
         "name": "python研究",
         'price': 300,
         'page': 200
      },
      {
         "name": "python放弃",
         'price': 60,
         'page': 290
      },
      {
         "name": "python入土",
         'price': 555,
         'page': 1
      }
   ]
}

1.把上面的数据采用table的形式输出到页面
2.价格大于150的单元格设置橙色背景[orange]
3.page页数大于200，字体改为红色，否则为黑色

警告此处为个人本题答案仅供参考，非唯一答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.3.3.4.js"></script>
    <style>
        table, tr, th, td {
            text-align: center;
            border-collapse: collapse; /*合并边框*/
            border: 1px solid red;
        }

        th, td {
            width: 120px;
            height: 32px;
            line-height: 32px;
            vertical-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>价格</th>
            <th>页数</th>
        </tr>
        <tr v-for="(book,key) in goods">
            <td>##{{key + 1}}</td>
            <td>{{book.name}}</td>

            <td v-if="book.price>150" :style="{backgroundColor: 'orange'}">{{book.price}}</td>
            <td v-else >{{book.price}}</td>
            <td v-if="book.page>200" :style="{color:'red'}">{{book.page}}</td>
            <td v-else :style="{color:'black'}">{{book.page}}</td>
        </tr>
    </table>
</div>
<script>
    vm = Vue.createApp(
        {
            data() {
                return {
                    goods: [
                        {"name": "python入门", 'price': 150, 'page': 200},
                        {"name": "python进阶", 'price': 100, 'page': 300},
                        {"name": "python高级", 'price': 500, 'page': 200},
                        {"name": "python研究", 'price': 300, 'page': 200},
                        {"name": "python放弃", 'price': 60, 'page': 290},
                        {"name": "python入土", 'price': 555, 'page': 1},
                    ]
                }
            }
        }
    ).mount("##app")
</script>
</body>
</html>