今天分享一些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-oncev-htmlv-bindv-onv-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 的特性。

Logo

前往低代码交流专区

更多推荐