Vue.js第一个程序

最新推荐文章于 2022-07-19 23:07:27 发布

爱草莓的番茄酱

最新推荐文章于 2022-07-19 23:07:27 发布

阅读量692

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/qq_25973779/article/details/88823482

web前端专栏收录该内容

39 篇文章

订阅专栏

本文介绍了Vue.js的基本使用，包括通过实例化创建应用，详细讲解了Vue.js的模板语法，如插值、指令（v-bind、v-on及其缩写）、用户输入的双向数据绑定以及事件处理。通过实例代码展示了如何在DOM中绑定数据和处理用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、每个vue应用都需要通过实例化vue来实现，vue模块格式如下：

var vm = new Vue({

//选项

})

具体代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue程序</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue_id">
<h1>a : {{a}}</h1>
<h1>b : {{b}}</h1>
<h1>c:{{c}}</h1>
<h1>d:{{d}}</h1>
</div>

<script type="text/javascript">
var data = {a:"Vue起步",b:"lalala",c:10000,d:"学习使我快乐"}
var vm = new Vue({
  el:"#vue_id",
  data:data
  
})
// document.write(vm.a===data.a)
// document.write("<br>")
// vm.b = "Ketchup"

// document.write(data.b+"<br>")
// vm.c = 521
// document.write(vm.c+"<br>")
// document.write(data.c)

</script>
</body>
</html>

这段代码指明了模块的id 也就是vue_id，模块里面将要显示a,b,c,d四个元素的内容，而内容由后面的指定。

这段代码就是对上段dam的实现，其中el参数对应于上面代码DOM元素中的id，这意味着我们接下来的改动都是针对vue_id模块而不针对其他组件。

data用于定义属性，我定义了它的属性有四个，分别为a,b,c,d。这样就可以给a，b,c,d赋值了。运行结果为：

二、Vue.js模板语法

Vue.js使用了基于HTML的模块语法，允许开发者声明式第将DOM绑定至底层Vue实例的数据。

Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

1.插值

文本：数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值，如下例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本插值</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue_id">
<h1>a : {{a}}</h1>
</div>

<script type="text/javascript">
var data = {a:"文本插值测试"}
var vm = new Vue({
  el:"#vue_id",
  data:data
  
})
</script>
</body>
</html>

运行结果：

HTML：使用v-html指令用于输出html代码，例子如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本插值</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue_id">
<div v-html="test"></div>
</div>

<script type="text/javascript">
var vm = new Vue({
  el:"#vue_id",
  data:{
  test:'<h3>使用v-html可以输出html格式的内容</h3>'

  }
  
})
</script>
</body>
</html>

运行结果：

属性：HTML属性中的值应该使用v-bind指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind:class 指令测试</title>
</head>
<style>
.class1{
  background: #097;
  color: rgb(241, 13, 13);
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="vue_id">
<label for="a">修改颜色</label><input type="checkbox" v-model="use" id="a">
<br><br>
<div v-bind:class="{'class1':use}">
  v-bind:class 指令测试
</div>
</div>

<script>
var vm = new Vue({
  el:"#vue_id",
  data:{
  use:true

  }
  
});
</script>
</body>
</html>

其中id可自由改，但是v-model必须为use。

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表达式测试</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="vue_id">
    {{1+2}}<br>
    {{ok ? 'yes':'no'}}<br>
    {{message.split('').reverse().join('')}}
    <div v-bind:id="'list-'+id">表达式测试</div>
</div>

<script>
var vm = new Vue({
  el:"#vue_id",
  data:{
  ok:true,
  message:'KETHUP',
  id:2
  }
});
</script>
</body>
</html>

2.指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子就是一个使用指令属性v-if来控制是否显示指定文本的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指令测试</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="vue_id">
    <p v-if="look">现在你能看到我</p>
    <template v-if="ok">
    <h1>指令测试</h1>
    <p>一如既往地爱学习</p>
    </template>
</div>

<script>
var vm = new Vue({
  el:"#vue_id",
  data:{
  look:false,
  ok:true
  }
});
</script>
</body>
</html>

运行结果：

补充：<template>元素，顾名思义，就是用来声明是“模板元素”。<template>标签还有一个特性，就是位置任意性，这非常类似<script>或者<style>标签，可以在<head>中，也可以在<body>或者<frameset>中。

参数参数在指令后以冒号指明。

例如， v-bind 指令被用来响应地更新 HTML 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>参数测试</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="vue_id">
    <pre><a v-bind:href="url">我的主页</a></pre>
</div>

<script>
var vm = new Vue({
  el:"#vue_id",
  data:{
  url:'https://i.youkuaiyun.com/#/uc/profile'
  }
});
</script>
</body>
</html>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">，在这里参数是监听的事件名。

补充：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

<a> 标签定义超链接，用于从一张页面链接到另一张页面，<a> 元素最重要的属性是 href 属性，它指示链接的目标。

修饰符修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

3.用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户输入测试</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="vue_id">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<script>
var vm = new Vue({
  el:"#vue_id",
  data:{
      message:'哈哈哈哈'
  }
});
</script>
</body>
</html>

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

反转字符串测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>反转字符串测试</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="vue_id">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>

<script>
var vm = new Vue({
  el:"#vue_id",
  data:{
      message:'ketchup'
  },
  methods:{
    reverseMessage:function(){
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

运行结果：

缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>