vue学习(二)

响应式布局

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

双向数据绑定

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

简单来说就是:如果数据源改变 页面就改变,而且页面改变(用户交互) 数据源中的数据也变 就是双向数据绑定

对应指令:v-model

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

条件渲染

相关指令

v-if/v-else 或者 v-show

两者的区别

v-show是把元素通过设置css的display:none来隐藏 //v-if是把组件给销毁了来达到隐藏 //因此v-show具有较高的渲染消耗,v-if具有较高切换消耗 //所以 经常切换的业务使用v-show 不常切换的业务使用v-if

使用示例

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

循环渲染

指令:v-for

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

使用示例

<div >
    <div v-for="el in arr">//el为新建的变量,通过循环arr数组来给el赋值	
        <h1>{{el}}</h1>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            arr:["hello","vue","js","css"],
        }
    })
</script>

同for语句,可以在v-for中嵌套v-if语句

v-for和v-if写在同一个标签时,v-for优先级高,会先执行(但是不建议写在一起,有些版本会报错)

可以用template标签来写v-for

<div >
    <template v-for="(el,index) in arr">
        <h1 v-if="index!=1">{{el}}</h1>
    </template>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: ["hello", "vue", "js", "css"],
        }
    })
</script>

同理也有v-for中嵌套v-for,v-if中嵌套v-for

补充一个图片:vue.js 渐进式框架 五层设计

在这里插入图片描述

来源url
栏目