Vue
1.翻墙在Google浏览器安装Vue Devtools【该插件需在服务器环境下运行】【通过go live】
2.引入Vue.js文件
当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量 Vue
var vm = new Vue( options ) // 实例化Vue的到vm实例
options / el
数据类型:string|Element
称之为自动挂载：将页面一个已经存在dom作为整个实例的作用范围，出了这范围那么vm实例就没有作用了;
注*body不能作为el的挂载目标;
options / data 数据
new类型中 data选项是一个对象;
使用形式： 在实例范围内，它相当于全局变量;
我们要将这个变量放在一个模板语法{{}}中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’;
使用范围： el确定的范围;参数： options 我们称之为‘ 选项 ’ 类型： Object
<script src="../vue.js"> <script> //引入vue文件
<div id="app">
{{ msg }} //el定义了data对象的作用范围 ，只有在大括号内的msg才被解析
msg
</div>
var vm = new Vue // 实例化Vue的到vm实例
el: '#app', // document.querySelector('#app') 可以是id选择符，也可以是元素
data: {
msg: 'hello Vue.js' //在实例范围内，它相当于全局变量;放入模板语法{{}}中才能解析；
};
}) 3. Vue是一个MVVM框架
M: data 选项
V： el 挂载的东西
VM： vm 实例4.使用Devtools
切换到要打开的文件,点击右下角的go live，自动开启；待图标变绿说明开启成功，打开控制台，找到vue模块.5.双向绑定
<div id="app"> //Root组件/根组件/根实例
<h3> VM改变 ——> V也跟着改变 </h3>
{{ msg }}
<h3> V改变 -> VM也跟着改变 </h3>
<input type="text" v-model = "msg"> //Vue中双向数据绑定式通过 v-model 这个指令来实现的
</div>
</script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js'
}
})
</script>
//当我们将vm中的data改变时，会发现视图也跟着改变了，这个模式我们称之为： 数据驱动
//数据驱动： 数据驱动视图改变
//Vue官方将这种模式称之为：深入响应式原理6.底层原理【使用原生js来实现Vue深入响应式 】
<body>
<button> 点击 </button>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
var button = document.querySelector('button')
var data = {
name: 'Jick'
}
var observer = {...data} // 观察者对象，存储data的值
// Object.defineProperty(对象，对象的属性，对象属性的修饰符 )
Object.defineProperty( data,'name',{
// get/set 统称为: '存储器'
get () {
return observer.name // 初始化赋值一个值给name属性
},
set ( val ) {
console.log( val )
box.innerHTML = val
}
})
button.onclick = function () {
data.name = "Rose"
}
box.innerHTML = data.name
</script>