深入式响应
深入响应式原理：
1. 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新
2. Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生
改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染
3. **** 数据必须放在data选项中才能进行深入响应式
底层原理：
核心使用的是es5的一个方法,这个方法不支持ie8以及以下
Object.defineProperty(obj,obj.attr,descriptor)
参数：
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？
configurable： 决定了对象的key是否可删除
enumerable： 决定了对象是否可遍历（枚举）
writeable: 决定了对象的key的value是否可修改
存储器：
get函数 ----起了个名字getter 设置当前对象的key的初始值
set函数 ----起了个名字setter 修改当前对象的key的值
<body>
<div id="app">
<h3> {{msg}} </h3>
<h3> {{num}} </h3>
<button @click = "setHandler">
点击
</button>
</div>
</body>`
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
list: {
id: 1
}
},
methods: {
setHandler(){
this.$set(this.list,'name','张骏')
}
},
watch: {
/* watch中存放的是方法， 方法名就是M(data选项) */
msg(){
console.log('msg改变了')
}
}
})
<script>
双项数据绑定
v-mode 双向数据绑定
1. 效果
数据改 ， 视图更
视图改， 数据更
2. 实现
使用v-model实现
3. 缺点
v-model默认绑定value属性， 所以v-model只能在表单使用
4. 原理
1. 为什么数据能直接在视图显示
v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候，
就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树，
再通过render函数进行渲染,生成真实DOM
2. 为什么视图修改数据就会修改
当视图修改是， 意味着DOM的value属性值改变，就会触发setter,watcher监听机制就会执行
watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM
eg:
<body>
<div id="app">
<input type="text" v-model = "msg">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
</script>
watch-监听
watch
- 作用：
用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发 - 使用
两种用法： - key的value值是一个函数 普通玩家
new Vue({
watch: {
key(value,oldvalue){}
}
})
- key的value值是一个对象 主播/职业玩家
new Vue({
watch: {
key： {
deep: true/false 深入监听,
handler(value,oldvalue){} // 监听的处理函数
}
}
})
watch中的key指的就是data选项中key
eg: 深入监听
<body>
<div id="app">
{{ msg }}
</div>
</body>
************************************************************
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
watch: {
msg(){
alert('数据改变了')
}
}
})
</script>
axios
get请求
1. axios get写法一
axios.get('http://localhost/get.php',{
method: 'get',
params: {
a: 1,
b: 2
}
})
.then( res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
2 axios get写法二
axios({
url: 'http://localhost/get.php', //php路径
method: 'get',
params: { /////
a: 1, //给文件里的属性赋值
b: 2 //
}
})
.then( res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
axios post 写法一
axiosPostHandler(){
axios({
url: 'http://localhost/post.php',
method: 'post',
data: params,
headers: { //可以省略
'Content-Type': "application/x-www-form-urlencoded"
}
})
.then(res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
}