[ADD]介绍vue.js

2020-10-07 22:49:39 +08:00 · 2020-10-07 22:49:39 +08:00 · d86c6ecf5b
parent f1bf6db608
commit d86c6ecf5b
1 changed files with 129 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Page Title</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  </head>
+  <body>
+    <!--[if lt IE 7]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+    <div id="app">
+      {{ message }}
+    </div>
+
+    <div id="app-2">
+      <span v-bind:title="message">
+        鼠标悬停几秒钟查看此处动态绑定的提示信息
+      </span>
+    </div>
+
+    <div id="app-3">
+      <p v-if="seen">现在你看到我了</p>
+    </div>
+
+    <div id="app-4">  
+      <ol>
+        <li v-for="todo in todos"> {{todo.text}}</li>
+      </ol>
+    </div>
+
+    <div id="app-5">
+      <p>{{message}}</p>
+      <button v-on:click="reverseMessage">反转消息</button>
+    </div>
+
+    <div id="app-6">
+      <p> {{ message }} </p>
+      <input type="text" v-model="message">
+    </div>
+
+    <div id="app-7">
+      <ol>
+        <todo-item
+          v-for="item in groceryList"
+          v-bind:todo="item"
+          v-bind:key="item.id"
+        ></todo-item>
+      </ol>
+    </div>
+
+    <script>
+      var app = new Vue({
+        el: '#app',
+        data: {
+          message: 'Hello Vue!'
+        }
+      })
+
+      var app2 = new Vue({
+        el: '#app-2',
+        data: {
+          message: '页面加载于' + new Date().toLocaleString()
+        }
+      })
+
+      var app3 = new Vue({
+        el: '#app-3',
+        data: {
+          seen: true
+        }
+      })
+
+      var app4 = new Vue({
+        el: '#app-4',
+        data: {
+          todos: [
+            { text: '学习JavaScript' },
+            { text: '学习vue' },
+            { text: '整个牛项目' }
+          ]
+        }
+      })
+
+      var app5 = new Vue({
+        el: '#app-5',
+        data: {
+          message: 'Hello Vue.js!'
+        },
+        methods: {
+          reverseMessage: function(){
+            this.message = this.message.split('').reverse().join('')
+          }
+        }
+      })
+
+      var app6 = new Vue({
+        el: '#app-6',
+        data: {
+          message: 'Hello Vue.js',
+        }
+      })
+
+      Vue.component('todo-item', {
+        props: ['todo'],
+        template: '<li>{{todo.text}}</li>'
+      })
+
+      var app7 = new Vue({
+        el: '#app-7',
+        data: {
+          groceryList: [
+            { id: 0, text: '蔬菜'},
+            { id: 1, text: '奶酪'},
+            { id: 2, text: '随便其他什么人吃的东西'}
+          ]
+        }
+      })
+    </script>
+  </body>
+</html>