VUE数据驱动和双向绑定

1、安装VUE
（1）、CDN引入：
对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

（2）、vue-cli3脚手架安装：
npm install -g @vue/cli
创建项目：
vue create 项目目录

2、双向绑定
v-model：双向绑定
v-cloak：解决加载闪烁时出现vue标签或指令符号
（1）、双向绑定原理
实现双向绑定的原理就是利用Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

<script>
    var data={},text=document.getElementById("text"),tempVal
    Object.defineProperty(data,"name",{
        set:function(val){
            console.log(val);
            tempVal=val;
            text.innerHTML=val;
        },
        get:function(){
            return tempVal
        }
    })
    window.addEventListener("input",function(e){
        data.name=e.target.value
    })
    function getName(){
        alert(data.name);
    }
</script>