vue.js|vue学习（二） html|javascript

响应式布局

也就是单项数据绑定，即通过改变数据源来改变页面，或者通过页面改变来改变数

双向数据绑定

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
简单来说就是：如果数据源改变页面就改变，而且页面改变(用户交互) 数据源中的数据也变就是双向数据绑定
对应指令：v-model

//也可以称之为语法糖写法 > new Vue({el: '#app', data: {msg:"1234" } }) //实现的效果等同于 > new Vue({el: '#app', data: {msg:"1234" }, methods:{input1(e){this.msg=e.target.value } } }) //这是不使用vue的方式 type="text/javascript"> var obj = { } Object.defineProperty(obj, 'txt', {get: function () {return obj }, set: function (newValue) {document.getElementById('txt').value = https://www.it610.com/article/newValue document.getElementById('show').innerHTML = newValue } }) document.addEventListener('keyup', function (e) {obj.txt = e.target.value })

条件渲染

【vue.js|vue学习（二）】相关指令
- v-if/v-else 或者 v-show
两者的区别
- v-show是把元素通过设置css的display:none来隐藏
- //v-if是把组件给销毁了来达到隐藏
- //因此v-show具有较高的渲染消耗,v-if具有较高切换消耗
- //所以经常切换的业务使用v-show 不常切换的业务使用v-if
使用示例

//根据vue的data中flag值来判断显示还是隐藏 hello > new Vue({el: '#app', data: {flag: true } }) //与if、else语句一样也可以连用，同样也可以使用ifelse if的形式 //if else用法 //假设这里的flag为false 这是隐藏的部分这是显示的部分 //ifelseif else使用方式这是隐藏的部分这也是隐藏的部分

循环渲染

指令：v-for
v-for指令会把写在它上面的元素包含它的后代元素全部克隆数组个数这么多次
使用示例

//el为新建的变量，通过循环arr数组来给el赋值 { {el}} > new Vue({el: '#app', data: {arr:["hello","vue","js","css"], } })
同for语句，可以在v-for中嵌套v-if语句
- v-for和v-if写在同一个标签时，v-for优先级高，会先执行（但是不建议写在一起，有些版本会报错）
- 可以用template标签来写v-for
> new Vue({el: '#app', data: {arr: ["hello", "vue", "js", "css"], } })
同理也有v-for中嵌套v-for，v-if中嵌套v-for