干货｜初探Vuejs

Posted 2021-05-01 中兴开发者社区

每天读一篇一线开发者原创好文

▍1.Vue.js的特点

1. 简洁：官方文档很清晰，比 Angularjs 简单易学。

2. 高效：异步批处理方式更新 DOM。

3. 组件化：用解耦的、可复用的组件组合你的应用程序。

4. 轻量：~23kb min+gzip。

5. 数据驱动：是一个MVVM的前端框架。

▍2.Vue.js的组件化

     组件是Vue.js最强大的功能之一。组件可以扩展html元素，封装可重用的代码。每一个*.vue文件都是一个组件，它包括三部分

1. HTML ：我们把html代码写在<template></template>标签中

2. javascript ：我们把逻辑代码写在<script></script>标签中

3. CSS ：我们把Css样式代码写在<style></style>标签中  

▍3.Vue.js的数据驱动

1. 从左至右依次为视图层view -> viewModel层 -> Model层（MVVM框架）

2. 当视图层中DOM结构发生变化，viewModel层中的DOM Listeners会监听到变化，从而改变Model层中的数据

3. 当Model层中的数据发生改变，viewModel层中的Data Bindings(指令对DOM封装)监测到变化，从而改变view层的DOM

▍4.Vue.js中的指令

可以通过几个例子来了解Vue.js中的表达式和指令：

1.{ {} }差值表达式，数据单向绑定

用简洁的模板语法来声明式的将数据渲染进 DOM，当改变data方法中的message属性值，刷新页面后{ {} }中的值也会改变

2.v-bind属性绑定

这里v-bind指令的作用是：将这个元素节点的title属性和 Vue 实例的message属性保持一致

3.v-if的使用

这个例子演示了我们可以绑定DOM结构到数据，当seen为true时加载绑定的DOM，seen为false时不加载

4.v-show的使用

此例与上例不同的是，当seen为true时加载绑定的DOM，seen为false时也加DOM，只是将其隐藏

5.v-for的使用

v-for指令可以绑定数组的数据来渲染一个项目列表

6.v-on事件绑定

为了让用户和应用进行互动，可以用v-on指令绑定一个事件监听器，通过它调用Vue实例中定义的方法

7.v-model数据双向绑定

可以用v-model指令在表单控件元素上创建双向数据绑定

8.v-bind中class绑定

9.v-on事件绑定-计数器