1vue之写helloword+todolist

兼容性

Vue兼容性：Vue不兼容IE8，因为Vue采用的是IE8无法模拟的ECMAScript 5特性。支持所有兼容 ECMAScript 5 的浏览器。

Hello World

步骤：

1.引入Vue的库

2.创建Vue实例

3.接管DOM和定义数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">{{content}}</div>
    
</body>
<script>
    var app=new Vue({
        el:"#app",//接管id=app里面的内容，el限制了vue接管的内容
        data:{//定义数据
            content:"hello world"
        }
    });

</script>
</html>

变更内容，无需原生的document操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">{{content}}</div>
    
</body>
<script>
    var app=new Vue({
        el:"#app",//接管id=app里面的内容，el限制了vue接管的内容
        data:{//定义数据
            content:"hello world"
        }
    });

    setTimeout(()=>{
        app.$data.content="bey world";//$data是data的别名
    },2000)

</script>
</html>

todoList

模板指令，双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-model与数据进行双向绑定，当input中的值发生变化的时候，Vue实例中的数据也会发生变化，当Vue数据发生变化的时候，input框中的值也会发生变化 -->
        <input type="text" v-model="inputValue" />
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- v-for是一个模板指令，帮助我们去循环数据 -->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    
</body>
<script>
    var app=new Vue({
        el:"#app",//接管id=app里面的内容，el限制了vue接管的内容
        data:{//定义数据
            list:[],
            inputValue:""
        },
        methods:{//方法定义在methods中
            handleBtnClick:function(){
                alert('click')
            }
        }
    });

   

</script>
</html>

可以在控制台中验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-model与数据进行双向绑定，当input中的值发生变化的时候，Vue实例中的数据也会发生变化，当Vue数据发生变化的时候，input框中的值也会发生变化 -->
        <input type="text" v-model="inputValue" />
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- v-for是一个模板指令，帮助我们去循环数据 -->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    
</body>
<script>
    var app=new Vue({
        el:"#app",//接管id=app里面的内容，el限制了vue接管的内容
        data:{//定义数据
            list:[],
            inputValue:""
        },
        methods:{//方法定义在methods中
            handleBtnClick:function(){
                this.list.push(this.inputValue)
                this.inputValue="";
            }
        }
    });
</script>
</html>

在整个过程中没有出现对DOM的操作，取而代之的是对数据的操作，我们不改变DOM，通过改变数据而改变页面。这样也是MVVM模式，底层会根据数据去渲染页面。

new Vue：通过new Vue创建实例，可以传入一个选项对象。
data：定义数据。当Vue实例被创建的时候，它将data对象中所有的property加入到Vue响应系统中，当property发生改变，视图就产生响应,这种响应时双向的。注意：只有在实例被创建时就存在data中的property才会时响应式的。可以事先设置初始值。如果使用Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
- ```
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
```
前缀$：便于与用户定义的property区分开。
v-for:　循环数据
v-on：绑定事件
v-model:和数据双向绑定