码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-09-14 20:31:51      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

  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的使用(一)

标签:

原文地址:http://www.cnblogs.com/huhx/p/basevue1.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!