
<!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>Document</title>
  <!-- <script src="https://unpkg.com/vue@next"></script> -->
</head>
<body>
  <div style="text-align: center;" id="application">
  <h1>{{count}}</h1>
  <button v-on:click="clickButton">点击</button>
</div>
  
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const App={
      data(){
        return{
          count:0
        }
      },
      methods: {
        clickButton(){
          this.count++
        }
      },
    }
    Vue.createApp(App).mount("#application")
  </script>
</body>
 
</html>

首先在head标签里加入了一个script标签，采用CDN的方式引入Vue3的新版本。

然后在body标签里添加一个div盒子，里面加入了一个标题和按钮

h1标签里运用了vue的变量替换功能，v-on：click属性用来进行组件的单击事件绑定。

定义vue组件，在body标签霞添加一个script标签，data方法用来返回组件所需要的数据，methods定义组件所需要的方法函数。

实现一个简单的用户登录页面

需要完成的工作：

1.登录页面需要有标题，提示用户当前的登录状态

2.在未登录时，需要有两个输入框以及登录按钮供用户输入账号、密码和进行登录操作

3.在登录完成后，输入框需要隐藏，需要提供按钮让用户登出

借助vue的单双向绑定和条件渲染功能，这些操作会比元素的JavaScript DOM操作要简单很多。


<!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>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
 
<body>
  <div id="Application" style="text-align: center;">
    <h1>{{title}}</h1>
    <div v-if="noLogin">账号：<input v-model="userName" type="text" /></div>
    <div v-if="noLogin">密码：<input v-model="password" type="password" /></div>
    <div v-on:click="click"
      style="border-radius: 30px;width: 100px;margin: 20px auto;color: white;background-color: blue;">{{buttonTitle}}
    </div>
  </div>
  <script>
    const App = {
      data() {
        return {
          title: "欢迎您：未登录",
          noLogin: true,
          userName: "",
          password: "",
          buttonTitle: "登录"
        }
      },
      methods: {
        click() {
          if (this.noLogin) {
            this.login()
          } else {
            this.logout()
          }
        },
        login() {
          if (this.userName.length > 0 && this.password.length > 0) {
            alert(`userName:${this.userName}
          password:${this.password}`)
            this.noLogin = false
            this.title = `欢迎您:${this.userName}`
            this.buttonTitle = "注销"
            this.userName = ""
            this.password = ""
          } else {
            alert("请输入账号密码")
          }
        },
        logout() {
          this.noLogin = true
          this.title = "欢迎您：未登录"
          this.buttonTitle = "登录"
        }
      }
 
    }
    Vue.createApp(App).mount("#Application")
  </script>
</body>
 
</html>

效果图：

Vue3的新特性

vue3的设计目标：

1.更小的尺寸和更快的速度

2.更加现代化的语法特性，加强了typescript的支持

3.在api设计方面，增强统一性和一致性

4.提高前端工程的可维护性

5.支持更多、更强大的功能，提高开发者的效率

vue2和3的差别

2的时代，最小化被压缩的vue核心代码约为20kb，目前3的有10kb，大小减少了一半。在前端开发中，依赖模块越小，意味着更少的流量和更快的速度。

3中，虚拟dom的设计也进行了优化，引擎可以更加快速地处理局部的页面元素修改，在一定程度上提升了代码的运行效率，vue3页配套进行了更多编译时的优化，例如将插槽编译为函数等。

代码风格方面。3基本弃用了类风格的Api，而推广采用函数风格的API，以便更好的对typescript进行支持。这种编程风格更利于组件的逻辑复用，例如v3组件中心引入的setup（组合式api）方法，可以让组件的逻辑更加聚合。

v3中也添加了一些新组件，例如teleport。

为什么要使用vue框架

在学习阶段，可以使用三件套开发一些简单的静态页面，但是大型商业应用要完成的代码量会非常大，要编写的功能函数会很多，而且对于交互复杂的项目来说，不使用框架开发，后期维护和扩展非常困难。

既然选择使用框架，为什么一定是vue呢？web早期，jQuery的JavaScript框架非常流行，其内部封装了大量的JavaScript函数，可以帮助开发者操作dom，并且提供了事件处理、动画和网络的相关接口。当时的前端页面更多是用来进行展示的，所以使用jquery框架足以应付所需要的逻辑交互操作。后来互联网发展，就诞生了angularjs框架，这种框架的核心是响应式和模块化，其使得前端页面的开发方式发生了变革，前端可以自行处理非常复杂的业务逻辑，前后端的职责也逐渐分离，前端从页面展示向单页面应用发展。

angularJS虽然强大，但是确定也非常明显：

1.学习曲线陡峭，入门难度高

2.灵活性很差

3.速度性能差

4.某些api设计复杂，使用麻烦

所以为了应对这些问题，vue和react出现了。

这两种框架在前端项目开发中平分秋色，都是非常优秀的框架。设计上，这两个有很多的相似之处，比如相较于功能齐全的angularjs来说，他们都是骨架类的框架，即只包含基础的核心功能，路由、状态管理都需要考分离的插件来支持。逻辑上，v和r都是基于虚拟dom树的，改变页面真实dom树比改变vdom的开销要大很多，所以这两者的性能都非常优秀。v和r都采用组件化的方式进行编程，模块之间通过接口进行连接，方便维护和扩展。

v和r也有很多不同之处。

v的模板编写采用的是类似HTML的模板方式，写起来和标准的HTML很像，只是多了一些数据绑定和事件交互的方式。r采用jsx编写模板，虽然这种编写方式提供的功能更加强大，但是JavaScript混合xml的语言会使得代码看上去很复杂。v和r的还有一个很大的区别就是组件状态管理，v的状态管理本身非常简单，局部的状态在data中进行定义，其默认就被赋予了响应性。修改的时候直接将对应属性更改即可，全局状态管理有vuex来完成。r的状态管理不能直接修改，需要使用setstage方法进行更改。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/190866