Vue.js 简介🐎🐎🐎

你用过Vuejs吗？还是仍然感到困惑？

今天我将用简单易懂的方式讲解 Vue.js 及其用途。
让我们从编写代码开始学习，而不是阅读冗长的文字。

这些示例我使用了 CodePen。
首先，我创建了一个 id 为 app 的 div 标签。

<div id="app"></div>

现在让我们编写一些 Vuejs 代码。Vue

为我们提供了一个新的 Vue 实例，它接受一个对象作为参数。

let app = new Vue({
  el:'#app'
})

上面的代码的作用是，如果我们在 div 元素内编写任何代码，它将由 Vue 控制。

第一个属性是 el，它表示 Vue 需要定位到我们 HTML 代码中的哪个元素。

数据属性：它管理 Vue 内部的状态。

Methods 属性：这是一个可以定义函数的地方。

现在让我们编写数据属性和方法

var app = new Vue({
  el:'#app',
  data:{
    name:'Welcome to Vuejs',
    show:true,
    persons:['Gowtham','Aaron','Tonny']
  },
  methods:{
     changeme(){
       this.show = !this.show
    }
  }
})

数据和方法属性都是对象。

在数据属性中，我定义了一些静态数据；在方法属性中，我声明了changeme函数。

现在让我们在 div 元素中使用这些属性。

<div id="app">
  <h1 v-if="show">{{name}}</h1>

  <ul v-for="person in persons" v-if="show">
    <li>{{person}}</li>
  </ul>
  <button @click="changeme">
    {{show ? 'Hide' : 'Show'}}
  </button>
</div>

我使用v-if指令定义了一个 h1 元素，你有没有注意到我使用了 show 属性，而这个属性我们已经在 Vue 实例的 data 属性中定义了。

v-if 的作用是，只有当给定条件为真时，它才会显示在 DOM 中。

第二件事，我使用了带有 v-for 指令的无序列表。

v-for 可以帮助我们遍历数组，我使用了persons数组，该数组已经在 Vue 实例的 data 属性中定义了。

我使用了双花括号，因为 Vue 使用模板式语法进行数据绑定。

最后，对于按钮元素，我注册了一个点击处理程序
，我使用了 @click 指令，它是 v-on:click 的简写，
你可以使用其中任何一个。

最终输出结果为

你可以使用 Vue 开发小型应用或大型应用，也可以使用 Vue 开发完整的单页应用。

希望你们喜欢这些。想了解更多关于 Vue.js 的信息，可以查看文档。

资源
Vue 文档
Vue 指令
vuejs 中的事件处理