Vue.js hello world-CSDN博客

<!DOCTYPE HTML>
<html>
    <head>
        <title>vue.js hello world</title>
        <script src="../vue.js"></script>
        
    </head>
<body>
    <div id="demo">
　　　　{{message}}
      <input v-model="message">
    </div>
        <script>
        var demo = new Vue({
              el: '#demo',
              data: {
                message: 'Hello Vue.js!'
              }
            });
            
        </script>
</body>
</html>

效果：

更牛逼的是：我修改了input里面的内容之后，奇迹发生了！！！

牛逼吧，这就是vue.js 的双向数据绑定。

渲染列表

<!DOCTYPE HTML>
<html>
    <head>
        <title>vue.js hello world</title>
        <script src="../vue.js"></script>
        
    </head>
<body>
    <div id="app">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>
        <script>
        var demo = new Vue({
              el: '#app',
              data: {
                todos:[
                    {text:"learn Javascript"},
                    {text:'learn vue.js'},
                    {text:'Build Something Awesome'}
                ]
              }
            });
            
        </script>
</body>
</html>

效果：

处理用户输入：

<!DOCTYPE HTML>
<html>
    <head>
        <title>vue.js 处理用户输入</title>
        <script src="../vue.js"></script>
        
    </head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
        <script>
            var message = new Vue({
                el:"#app",    //对应的元素下面
                data:{    
                    message:"hello vue.js",
                },
                methods:{
                    reverseMessage:function(){
                        this.message = this.message.split('').reverse().join('');    
                    }
                }
            });
            
        </script>
</body>
</html>

效果：