Vue.js新手入门
首页 > Vue.js新手入门 > Vue.js 基础入门

Vue.js 基础入门

2021-03-23 22:07:43 5 0

编辑 收藏

Vue介绍

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


|   Vue的基础入门

1.app-1:声明式渲染


<div id="app">  {{ message }}</div>

var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

Hello Vue!


2.app-2:条件与循环

div id="app-2">  <p v-if="seen">请各位老铁点波关注</p></div>
var app2 = new Vue({  el: '#app-2',  data: {    seen: true  }})
请各位老铁点波关注!

 继续在控制台输入 app-2.seen: false ,你会发现之前显示的消息消失了。


3.app-3:处理用户输入


  处理用户输入 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:

<div id="app-3">  <p>{{ message }}p>  <button v-on:click="reverseMessage">反转消息button>div>
var app3 = new Vue({  el: '#app-3',  data: {    message: 'Hello Vue.js!'  },  methods: {    reverseMessage: function () {      this.message = this.message.split('').reverse().join('')    }  }})

注意在 reverseMessage 方法中,我们更新了应用的状态,但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理,你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

 4.app-4 组件化应用构建

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:


<div id="app-7">  <ol>    
<!--      现在我们为每个 todo-item 提供 todo 对象      
todo 对象是变量,即其内容可以是动态的。      
我们也需要为每个组件提供一个“key”,稍后再      作详细解释。    -->    
<todo-item      v-for="item in groceryList"      v-bind:todo="item"      v-bind:key="item.id"    ></todo-item>  </ol></div>


// 定义名为 todo-item 的新组件Vue.component('todo-item', {  props: ['todo'],  template: '<li>{{ todo.text }}</li>'})
var app7 = new Vue({  el: '#app-7',  data: {    groceryList: [      { id: 0, text: '蔬菜' },      { id: 1, text: '奶酪' },      { id: 2, text: '随便其它什么人吃的东西' }    ]  }})


准备好了吗?


这还只是 Vue 核心最基础的功能

TAGS:Vue基础

取消回复欢迎 发表评论: