提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue基础 gt ----& vuejs 使用
2023-09-27 14:20:11 时间

　　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;
    }
}

 

友情链接

 

相关文章