Vue.js

Vue入门

2020-04-27 18:22发布

站内文章 / Vue.js
728 0 0

Vue入门

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


hellovue

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
</head>

<body>
<div id="app">
  {{message}}
</div>

<script type="text/javascript">
  var app= new Vue({
       el:'#app',
       data: {
           message: "hello vue!"
      }
  });

</script>
</body>
</html>
现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

绑定属性

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
</head>

<body>
<div id="app">
 <span v-bind:title="message">
      鼠标悬停看效果
 </span>
</div>

<script type="text/javascript">
   var app = new Vue({
       el: '#app',
       data: {
           message: "页面加载于" + new Date()
      }
  });

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

条件判断

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
</head>

<body>
<div id="app">
   <span v-if="seem">
      你看得到我
   </span>
   <span v-else>
      你看不到我
   </span>
</div>

<script type="text/javascript">
   var app = new Vue({
       el: '#app',
       data: {
           seem: true
      }
  });

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

循环

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
</head>

<body>
<div id="app">
   <ul>
       <li v-for="entity in list">
          {{entity.name}}
       </li>
   </ul>
</div>

<script type="text/javascript">
   var app = new Vue({
       el: '#app',
       data: {
           list: [
              {id: "1", name: "苹果", price: 3.4},
              {id: "2", name: "香蕉", price: 3.5},
              {id: "3", name: "橙子", price: 3.6}
          ]
      }
  });

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

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
</head>

<body>
<div id="app">
   <p>{{message}}</p>
   <button v-on:click="reverseMessage">反转</button>