Vue 学习(1)

工程师云飞技术 2022年11月19日

0 收藏 800 点赞 2,166 浏览 1583 个字

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" charset="utf-8"></script>
  </head>
  <body>    <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 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 type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    </script>
    <script type="text/javascript">
      var app2 = new Vue({
        el: '#app-2',
        data: {
          message: '页面加载于' + new Date().toLocaleString()
        }
      })
    </script>
    <script type="text/javascript">
      var app3 = new Vue({
        el: '#app-3',
        data: {
          seen: true
        }
      })
    </script>
    <script type="text/javascript">
      var app4 = new Vue({
        el: '#app-4',
        data: {
          todos : [
            {text: '学习 JavaScript'},
            {text: '学习 Vue'},
            {text: '毕业了'}
          ]
        }
      })
    </script>
    <script type="text/javascript">
      var app5 = new Vue({
        el: '#app-5',
        data: {
          message: 'Hello Vue.js!'
        },
        methods: {
          reverseMessage: function() {
            this.message = this.message.split('').reverse().join('')
          }
        }
      })
    </script>
    <script type="text/javascript">
      var app6 = new Vue({
        el: '#app-6',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
    <script type="text/javascript">
      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>