Vue基础

先将VUE引入到html文件中：
VUE官网

输出：

 <div id="app">
        {{ message }}
      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
      </script>

输出截图：

替换：

    <div id="app">
        <span v-bind:title="message2"> 你好 </span>
      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                message2:"你好，世界。"
            }
        });
      </script>

替换截图：

条件：

    <div id="app">
        <p v-if="seen">Seen变量为true</p>
        <p v-else="seen">Seen变量为false</p>
        <hr>
      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                seen:true
            }
        });
      </script>

结果截图：

    <div id="app">
        <p v-if="seen">Seen变量为true</p>
        <p v-else="seen">Seen变量为false</p>
        <hr>
      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                seen:false
            }
        });
      </script>

结果截图：

循环：

    <div id="app">
        <h1>
            学生列表
        </h1>
        <ol>
            <li v-for="stu in list">
                学生姓名：{{stu.name}} --- 年龄：{{stu.age}}
            </li>
        </ol>
        <hr>
      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                list:[
                    {"id":1,"name":"张三","age":18},
                    {"id":2,"name":"李四","age":19},
                ]
            }
        });
      </script>

结果截图：

处理用户输入：

    <div id="app">
        <input type="button" v-on:click="myCk" value=" 提 交 ">
        <hr>
      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                message2:"你好，世界。"
            },
            methods:{//vue.js中方法的集合
                myCk:function(){
                    alert(this.message2);
                }
            }
        });
      </script>

结果截图：

表单输入和应用状态之间的双向绑定

    <div id="app">
        <p>{{message}}</p>
        <input v-model="message">
        <hr>
        <input type="button" v-on:click="myCk" value=" 提 交 ">
        <hr>
      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                message2:"你好，世界。",
            },
            methods:{//vue.js中方法的集合
                myCk:function(){
                    alert(this.message2);
                }
            }
        });
      </script>

结果截图：

v-show(条件渲染)

    <div id="app">
        <div>
            <h1 v-show="isLogin">登录信息</h1>
            姓名：<input>
            <p>
            </p>
            密码：<input>
        </div>
        <input type="button" v-on:click="myCk" value=" 提 交 ">
        <hr>

      </div>
      <script>
        var app = new Vue({
            el: '#app',
            data: {
                isLogin:true,
                message: 'Hello Vue!',
                message2:"你好，世界。",
            },
            methods:{//vue.js中方法的集合
                myCk:function(){
                    this.isLogin=false;
                }
            }
        });
      </script>

结果截图：

点击“提交之后”：