Vue的使用-基础
1.Vue的数据相应
称呼：深入响应式原理、双向数据绑定原理
数据响应指的是：当数据改变时，视图也会随之改变，当用户输入信息时，数据也改变了
原理：
- Vue是通过数据劫持来对数据进行响应式拦截的，通过使用es5的Object.defineProperty中的getter和setter来进行数据劫持的
- 这个数据劫持的对象是Vue中的data选项
- 如果在Data选项外定义数据，那么是不响应的
以下是代码
<body>
<div id="app">
<input *type*="text" *v-model* = "msg">
<hr/>
{{ msg }}
</div>
</body>
<script>
const vm = new Vue({
el: '#app',// 确定作用范围 - 挂载
data: {
msg: 'Hello Vue.js'
}
})
vm.money = 10000// 不响应
</script>
</html>
2.插值表达式对于JS数据类型的支持性
1.插值表达式对于JS的支持性：
可以识别基本类型number,string,boolean,null,undefined,symbol以及引用类型Object和函数、运算符、
三目运算符、短路原则及数组操作
3.常用的一些指令
v-bind: 单项数据绑定：
1.绑定图片地址：
<img v-bind:src=" " alt=" ">2.绑定类名：
//<p v-bind:class="{类名:布尔值，类名：布尔值}"：对象形式; //<p v-bind:class="['类名',布尔值 && '类名' || false条件下类名]"3.绑定行内样式：
//<p :style = "{width: '100px',height: '100px',background: 'purple'}"> </p>
//<p :style = "[{ width: '200px',height: '200px' },{ background: 'yellow' }]"></p>
条件渲染：
1.单路分支
<p v-if = "条件"></p>
2.双路分支
<p v-if = "布尔值"></p>
<p v-else></p>
3.多路分支
<p v- if = "条件范围"> </p>
<p v-else-if = "条件范围"></p>
<p v-else></p>
另一种条件渲染
<p v-show = "布尔值"></p>
v-if VS v-show
1.
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。2.
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。3.相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。总结：一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
