Home > Developer > Web Develop
About Vue.js
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，它不仅易于上手，还便于与第三方库或既有项目整合.
Vue.js Installation
(The version we are using now is 2.5.16)
Quick Start
declarative rendering
Let's do a simple little example of how to use Vue.js to implement declarative rendering.
Create a vue_1.html, copy vue.min.js of the Dist directory under the Vue.js package into the project and introduce it in the HTML page
<!DOCTYPE html>
Analysis:
{{message}} : 表示view。new Vue()：表示创建Vue对象，用于连接view和model。el:表示指向view。data：表示指向model。通过Vue对象连接view和model，{{message}}就可以获取到Vue对象中data定义的message的内容。
The results of the operation are as follows:
Binding element Attributes
Vue.js In addition to declarative rendering, you can also perform the properties of binding elements:
Create vue_2.html
<!DOCTYPE html>
Analysis:
v-bind:称为指令,将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
The results of the operation are as follows:
Two-Way Binding example
The example we just made is very simple, let's take a look at the use of vue.js bidirectional data binding:
Create vue_3.html
<!DOCTYPE html>
Analysis:
V-model: A command that listens for user input events to update data.
The results of the operation are as follows:
Button Event Bindings
Vue.js can use the v-on directive to listen for tagged events and run JavaScript code when triggered.
Create vue_4.html
<!DOCTYPE html>
Analysis:
v-on:指令。v-on:click:设置监听input的点击事件的事件。methods:定义v-on:click的方法。event：表示标签的原生事件this.message:表示指向Vue对象中定义的message。
The results of the operation are as follows:
Traversing collection data
We can use Vue.js's v-for instruction to iterate through the data of an array or collection.
Create vue_5.html
<! DOCTYPE html>Analysis:
v-for="(product,index) in products" ： v-for为Vue指令，用于遍历集合，其基本语法为“item in items”。products为要遍历的集合。(product,index)中的product用于存放遍历集合的元素，index用于存放集合元素的角标，从0开始。在Vue对象的data属性中，通过products[{}]的形式设置集合的数据。
The results of the operation are as follows:
Routing actions
Vue-router Download
Vue.js want to implement the routing effect, need and vue-router for the combination of implementation, in Vue.js there is no vue-router js file, so vue-router need to download separately, in addition to note is vue.js+ The routing action implemented by Vue-router is a routing operation for the page.
Download Vue-router:https://github.com/vuejs/vue-router
Routing implementation
Create vue_6.html, introduce Vue.min.js and vue-router.min.js files
<! DOCTYPE html>Analysis:
router-link：默认会被渲染成一个a标签，用来设置导航操作，其中的to属性用来指定链接路径。router-view：用来显示路由页面。const JAVAEE = {template:java}：定义跳转的页面组件，因为Vue.js+vue-router是单页面的路由操作，所以如果想要实现页面跳转，需要借助iframe等标签显示页面。{path:‘/‘, component:JAVAEE}：设置相应的路由跳转到相应的页面。var router = new VueRouter({routes:routes}):是创建路由对象。var app = new Vue({router:router}).$mount(‘#myVue‘) ： 将路由的对象设置到Vue对象上，并通过$mount手动的挂载到相应的组件中。
The results of the operation are as follows:
Vue.js Quick Start
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
