认识Vue

认识Vue
vue简介

vue是什么？是一套用于构建用户界面的渐进式JavaScript框架。

渐进式：vue可以自底向上逐层的应用
- 简单应用：只需一个轻量小的核心库
- 复杂应用：可以引入各式各样的vue插件
vue的发展历程

vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护

2、申明式编码，让编码人员无需直接操作DOM，提高开发效率

3、使用虚拟算法+diff算法，尽量复用DOM界点

原生的存在覆盖和未复用

虚拟DOM是首先加载到内存的，采用了diff算法，会将新的虚拟DOM和旧的虚拟DOM进行比较，新的DOM和原来的DOM有相同的部分时，相同的部分在真实的页面会直接复用，不同的会直接添加。

搭建Vue开发环境

采用cdn引入在线资源

尝试 Vue.js 最简单的方法是使用HelloWord例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个html文件，然后通过如下方式引入 Vue：
在vscode下
```
html>
<html>
 <head>
     <meta charset="UTF-8"/>
     <title>初始vuetitle>
  
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
 
 head>
  <body>
  body>
 
html>
```
初始Vue

第一个vue程序HelloWord

建立一个空的目录，用idea打开，在setting中安装vue.js插件

创建html5文件
```
html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">script>
head>
<body>
<div id="kc">
    <h1>{{ message }}h1>
div>
 
<script>
    new Vue({
        el: '#kc',
        data: {
            message: 'Hello Vue.js!'
        }
    })
script>
body>
html>
```
运行结果

分析hello案例

当我们有两个相同的容器时
```
 
<body>
<div class="kc">
    <h1>hello1,{{message}}h1>
div>
 
<div class="kc">
 
    <h1>hello2,{{message}}h1>
div>
 
 
<script>
 vm= new Vue({
        el: '.kc',
        //model 模版
        data: {
            message: '张三'
        }
    })
script>
body>
```
点击页面

只有第一个生效了，一个vue实例不能同时接管两个容器

多个实例对应一个容器
```
<div id="kc">
    <h1>hello1,{{message}},{{sex}}h1>
div>
 
 
 
 
<script>
 //   创建vue实例
 vm= new Vue({
        el: '#kc',
        //model 模版
        data: {
            message: '张三'
        }
    })
 
 
 //   创建vue实例
 vm= new Vue({
     el: '#kc',
     //model 模版
     data: {
         sex: '男'
     }
 })
script>
```
也会报错。

一个容器只能对应一个实例。两者一一对应

总结：
1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2. root容器里的代码依赖符和html规范，只不过混入了一些特殊的Vue语法；
3. root容器里的代码被Vue模版
4. Vue实例和容器是一一对应的：
5. 真实开发汇总只有一个Vue实例，且会配合着组件一起使用；
6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7. 一旦data中的数据发生改变，name页面中用到该数据的地方也会自动更新
注意：js表达式和js代码（语句）

1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
- a
- a+b
- test(1)没有返回值时为undefined，也是一个值
- x==y?'a':'b'
2、js代码（语句）
- if(){}
- for(){}
相关阅读:
MFC高校职工信息管理系统
 Samba服务搭建
 Linux 中 Find 命令的高级用法
 利用Excel支持JUnit参数化测试
 再见 Excel，你好 Python Spreadsheets！ ⛵
Kafka 3.x.x 入门到精通（02）——对标尚硅谷Kafka教程
 外部访问win服务器的mysql数据库
 过去5年，PolarDB云原生数据库是如何进行性能优化的？
RPA是什么意思?RPA机器人很厉害吗?
12 个适合做外包项目的开源后台管理系统
原文地址：https://blog.csdn.net/weixin_60719453/article/details/127967164

vue简介

搭建Vue开发环境

初始Vue

第一个vue程序HelloWord

分析hello案例