首页 > 代码库 > Vue基础---->VueJS的使用(一)

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

2024-08-13 09:28:58   212人阅读

　　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的官方教程：http://cn.vuejs.org/guide/index.html
  • vue的官方api：  http://cn.vuejs.org/api/

 

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


联系
我们