　　Vue.js是一个构建数据驱动的web界面的库。它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件，今天我们就开始vue.js的学习。

vue的安装及使用

二、vue的第一个例子：

项目的结构如下，引入vue.js

vue1.html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue1</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" name="message" v-model="message" />
    </div>
    <script type="text/javascript" src="js/vue1.js"></script>
</body>
</html>

vue1.js的代码：

var app = new Vue({
    el: '#app',
    data: {
        message: "hello world"
    }
});

运行的效果如下：

注意：

el: '#app' 就是管理id为app的部分。
vue1.js的引入在页面代码的后面，否则在某些浏览器上会出现找不到#app的元素的错误。

vue的简单使用

以下的所有例子都是基于上述的例子的。这里只写增加的代码

一、列表的渲染：v-for的使用

在<div id="app">中加入以下代码：

<ul>
    <li v-for="person in persons">
      {{ person.name }} loves {{person.love}}
    </li>
</ul>

在vue1.js的data中加入以下代码：

persons: [
    {name: "huhx", love: "code"},
    {name: "chenhui", love: "book"}
]

运行效果如下：

二、处理输入： v-on:click的使用

在<div id="app">中加入以下代码：

<button v-on:click="changeContent('huhx')">Click on!</button>

在vue1.js中加入以下代码：

methods: {
    changeContent: function(element) {
        this.message = "I love " + element;
    }
}

友情链接

vue的官方教程：http://cn.vuejs.org/guide/index.html
vue的官方api： http://cn.vuejs.org/api/

Vue基础---->VueJS的使用(一)的更多相关文章

Vue基础---->VueJS的使用(二)
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.今天我们就来学习一 ...
Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
第一篇：Vue基础
Vue基础渐进式JavaScript框架通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目走进Vue 什么是Vue 渐进式JavaScrip ...
[前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
Vue基础之Vue的模板语法
Vue基础之Vue的模板语法数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
Vue基础开发入门之简单语法知识梳理（思维导图详解）
基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)

随机推荐

Cocos2dx.3x入门三部曲-Hello Game项目解析(三)
一.前提: 完成Hello Game项目的创建编译. 具体参考:Cocos2dx.3x_Hello Game项目创建篇二.本篇目标: l 分析proj.win32工程的主要构成 l 分析proj ...
深入学习golang(2)—channel
Channel 1. 概述 “网络,并发”是Go语言的两大feature.Go语言号称“互联网的C语言”,与使用传统的C语言相比,写一个Server所使用的代码更少,也更简单.写一个Server除了网 ...
联通宽带家庭网关HG110-B破解步骤
先说说破解的意义,联通赠送的这个无线猫本身是带路由功能的,只是联通为了限制用户分享宽带,把拨号功能给禁用了,于是WIFI虽然能连上,但是不能用.我破解的目的就是达到让此路由既能有猫的拨号功能又能有路由 ...
Android 5.0 Default SMS App以及运营商授权SMS App
已同步更新至个人blog:http://dxjia.cn/2015/08/android-5-default-sms-app/ 题外话:博友们有没有好用的写博客客户端推荐啊,cnblogs推荐的win ...
利用print2flashsetup.exe文档转swf
通过使用Print2Flash您可以轻松的将您的文档转换成真正的Adobe Flash格式,最好的保证您的内容将实际可见,与其他格式相比,它并不存在查看工具的安装问题. Print2Flash中有一个 ...
IOS CopyPNGFile 异常问题解决
今天突然出现一个编译问题,搞了我好久,这里不多说了.直接整理出来,记录下来! 问题描述如下图: 出现:CopyPNGFile 异常错误,Command /Applications/Xcode.app/ ...
[AX 2012] Woker user request
在HR模块和System administrator模块下都能找到Woker user request这个功能,它的作用是为员工创建一个AX账号.比如我们创建一个这样的user request: 注意 ...
JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
解决tomcat启动Socket监听端口死循环被hold问题
原文链接:http://blog.csdn.net/dead_cicle/article/details/7073433 1.SOCKET监听置于servlet的init方法中,在web.xml里加入 ...
10个你必须掌握的超酷VI命令技巧
摘要:大部分Linux开发者对vi命令相当熟悉,可是遗憾的是,大部分开发者都只能掌握一些最常用的Linux vi命令,下面介绍的10个vi命令虽然很多不为人知,但是在实际应用中又能让你大大提高效率. ...

Vue基础---->VueJS的使用(一)