Vue的一些简单操作

最新推荐文章于 2022-07-03 20:34:57 发布

原创最新推荐文章于 2022-07-03 20:34:57 发布 · 234 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

一，什么是Vue

由前谷歌员工尤雨溪主导开发得一款前端应用开发框架

是目前前端开发市场上，最主流得开发框架之一！

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

构建用户界面：侧重于网页开发的
渐进式框架：网页中需要的数据，数据的逻辑性处理以及最终网页中的合理渲染进行了良好的支持
自底向上（项目规模）逐层应用：从单个网页效果开发、到大型项目应用集成，都进行了完善的支持
只关注视图层：作为前端框架，从获取数据之后，专门研究如何更好的服务界面，提高用户体验
易于上手：本质上使用的html/css/javascript语法，没有更高的学习成本
便于整合：可以和多项主流技术很合开发的成本很低，不需要学习新的结合性技术
现代化工具链：第三方提供的各种综合技术，提供功能拓展
支持类库：Vue生态链
单页应用：前端应用一种新的开发模式，整合项目只有一个HTML网页

总结：Vue是前谷歌员工尤雨溪主导研发的，一款用于前端应用快速构建的，侧重于视图渲染的应用级框架。

二，为什么要使用Vue

Vue是现在主流的前端开发框架
提供DIFF算法支持，优异的视图渲染性能，提高用户的使用体验
Vue提供了虚拟DOM结构，提高前端视图更新效率
Vue提供了完善的技术生态，极大的提高了前端应用开发效率
Vue同时开发多个版本，包含市场主流版本以及未来的使用趋势

（1），数据渲染

通过代码Vue可以自动将变量数据渲染到网页中

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>

  <div id="app">
    <!-- 使用特殊语法输出一个变量的数据 -->
    {{ message }}
  </div>

  <script src="./vue.js"></script>
  <script>
    // 1、创建一个vue对象，设置特定的选项
    //  el: 全称element，节点、元素、标签的意思；表示将实例对象绑定到哪个标签上
    //  data: 数据的意思；按照key:value的方式声明当前实例中使用的数据
    const app = new Vue({
      el: "#app",
      data: {
        message: 'hello vue!'
      }
    }) 
  </script>
  
</body>
</html>

（2），数据绑定

Vue框架，可以自动完成数据的绑定和渲染

Vue框架底层的封装优化了大量的JS DOM操作（影响网页加载性能的最大因素），提高了网页加载和渲染数据的性能，提高了用户使用体验。

（3），实例和选项

Vue应用本质上就是一个实例对象挂载到一个网页中的标签上！

认识实例

<div id="app">
    {{ message  }}      <!-- 展示变量中对应的数据 -->
</div>

{{ message }}           <!-- 只能原样渲染字符串，不能读取变量数据了，超出绑定范围 -->
....
<script>
	// 创建了一个对象
    new Vue({
        el: "#app",    // 对象和标签/元素绑定
        data: {
            message: 'hello vue!' // 对象的数据，在绑定的标签内部使用
        }
        ...
    })
</script>

认识选项

一个实例对象中，通过各种选项指定/扩展了Vue应用的功能，通常这些选项会包含如下部分：