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

vue的安装及使用

一、vue的下载地址:http://vuejs.org/js/vue.js

二、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基础---->VueJS的使用(一)的更多相关文章

  1. Vue基础---->VueJS的使用(二)

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.今天我们就来学习一 ...

  2. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  3. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

  4. 第一篇:Vue基础

    Vue基础 渐进式JavaScript框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 走进Vue 什么是Vue 渐进式JavaScrip ...

  5. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  6. Vue基础之Vue的模板语法

    Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...

  7. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  8. Vue基础二之全局API、实例属性和全局配置,以及组件进阶(mixins)的详细教程(案列实现,详细图解,附源码)

    本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...

  9. Vue基础开发入门之简单语法知识梳理(思维导图详解)

    基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)

随机推荐

  1. MVC视图中处理Json

    /// <summary> /// 登录 /// </summary> /// <param name="value"></param&g ...

  2. Android---真机调试时不能识别手机的解决方案

    我自己遇到的问题是VS2013和VS2015中xamarin无法识别到真机,现象就是插上手机开启调试模式,豌豆荚都可以连接上手机,就是VS上没出现手机. 但是低版本的手机貌似又行,4.0.3的. 于是 ...

  3. Linear or non-linear shadow maps?

    Quote: Original post by RobMaddisonI understand that, for aliasing mitigation, it might be beneficia ...

  4. COM是一个更好的C++

    昨天看了<COM本质论>的第一章”COM是一个更好的C++”,觉得很有必要做一些笔记,于是整理成这篇文章,我相信你值得拥有. 这篇文章主要讲的内容是:一个实现了快速查找功能的类FastSt ...

  5. PHP —— 读取文件到二维数组

    转自:PHP读取自定义ini文件到二维数组 读取文件,可以使用file_get_contents,file,parse_ini_file等,现在有一个需求,需要读取如下格式的文件: [food] ap ...

  6. PCM音频设备的操作(转)

    对音频设备的操作主要是初始化音频设备以及往音频设备发送 PCM(Pulse Code Modulation)数据.为了方便,本文使用 ALSA(Advanced Linux Sound Archite ...

  7. Linux 统计某个字符串出现的次数

    要统计一个字符串出现的次数,这里现提供自己常用两种方法: 1. 使用vim统计 用vim打开目标文件,在命令模式下,输入 :%s/objStr//gn 即可 2. 使用grep: grep -o ob ...

  8. vue开发资料

    http://cn.vuejs.org/v2/guide/ (vue框架手册)https://router.vuejs.org/zh-cn/ (vue框架路由手册)https://github.com ...

  9. Sql中的Merge和output

    先看merge, 不用merge时: --更新 update TA Value ) --插入没有的数据 insert into TA ,,Value from TB ) and TypeName=@v ...

  10. 使用proxool 连接池:No suitable driver found for proxool

    使用proxool连接池时:报错误No suitable driver found for proxool.shide的原因: ①.WEB-INF目录下的lib中没有proxool连接池jar驱动包. ...