vue项目开发实战案例

最新推荐文章于 2025-06-21 15:11:43 发布

mabanbang

最新推荐文章于 2025-06-21 15:11:43 发布

阅读量2.8w

点赞数 13

CC 4.0 BY-SA版权

文章标签： vue项目案例

本文链接：https://blog.youkuaiyun.com/kekezezeguoguo/article/details/96910756

今天分享一些vue基础实战例子

实例1: 渲染声明

渲染声明是 vue 的最核心模块。

vue 基于传统的 HTML 模板语法，将 DOM 绑定到 vue 实例上，然后 vue 在底层的实现上，将模板编译成虚拟 DOM 渲染函数(render function)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>

  <!-- Mustache 标签将会被替代为对应数据对象上 message 属性的值 -->
  {{ message }}

  <!-- 如果只想一次性的插值，不想被数据驱动改变，用 v-once -->
  <div v-once>{{ messageForOnce }}</div>

  <!-- 也可以渲染模板，用 v-html -->
  <div v-html="messageHtml"></div>

</div>
</body>
<script src="../utils/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello vue for message!',
    messageForOnce: 'Hello vue for once message',
    messageHtml: '<span style="color: red;"> Hello vue for template render</span>'
  }
})
</script>
</html>

打开浏览器 Console，感受 v-once 的不同

app.message = 'Hello vue for message, Updated'
app.messageForOnce = 'Hello vue for once, Updated' // 无效

指令 (Directives)

带有 v- 前缀的 v-once、v-html、v-bind、v-on、v-if... 称指令。它的作用是当它的值（表达式）改变时，其带来的影响，响应式地作用于 DOM。

实例2: 属性绑定

可以将 html 的属性和数据进行绑定，动态的更改属性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
  <span v-bind:title="title">
    这个 DOM 具有动态的 Title
  </span>
  <img v-bind:src="imgUrl"></img>
</div>
</body>
<script src="../utils/vue.js"></script>
<script>
// http://o9h4emdrs.bkt.clouddn.com/atomatom-boom2.gif
var app2 = new Vue({
  el: '#app',
  data: {
    title: 'title-1',
    imgUrl: 'http://o9h4emdrs.bkt.clouddn.com/live.jpg'
  }
})
</script>
</html>

打开浏览器 Console，验证动态的 title

app2.message = 'title-2'
app2.imgUrl="http://o9h4emdrs.bkt.clouddn.com/atomatom-boom2.gif"

指令参数

在指令名称之后以冒号表示的是指令的参数，一些指令能够接收一个“参数”.

比如: v-bind:title="title" 和 v-bind:src="imgUrl"，这里的 v-bind 指令可以用于响应式地更新 HTML 的特性。