<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <p><span v-html="message"></span></p>
    </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>


<!--more-->


    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessgae">逆转消息</button>
    </div>

    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

    <div id="app-7">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
      <p>Reversed message: "{{ reversedMessages() }}"</p>
    </div>

    <div id="app-8">
        
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"<span style=\"color:red\">哈哈哈</span>"
        }
    })


    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:"学习js" },
                { text:"学习vue" },
                { text:"学习java" }
            ]
        }
    })

    var app5 = new Vue({
        el:"#app-5",
        data: {
            message:"hello vue"
        },
        methods:{
            reverseMessgae:function(){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    var app6 = new Vue({
      el: '#app-6',
      data: {
        message: 'Hello Vue!'
      }
    })

    var app7 = new Vue({
        el:'#app-7',
        data: {
            message:"hello"
        },
        //计算属性
        computed:{
            reversedMessage:function(){
                return this.message.split('').reverse().join('')
            }
        },
        //方法
        methods: {
          reversedMessages: function () {
            return this.message.split('').reverse().join('')
          }
        }
    })

    const NotFound = { template: '<p>Page not found</p>' }
    const Home = { template: '<p>home page</p>' }
    const About = { template: '<p>about page</p>' }

    const routes = {
      '/': Home,
      '/about': About
    }

    new Vue({
      el: '#app-8',
      data: {
        currentRoute: window.location.pathname
      },
      computed: {
        ViewComponent () {
          return routes[this.currentRoute] || NotFound
        }
      },
      render (h) { return h(this.ViewComponent) }
    })
</script>
</html>

标签: vue

添加新评论