vue学习（二）

最新推荐文章于 2024-07-19 18:41:59 发布

RxxQingYi

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量248

点赞数 4

分类专栏： vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_52245126/article/details/120730449

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

响应式布局

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

双向数据绑定

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 id="app">
      <input type="text" id="txt">
      <p id="show"></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 id="app">
    <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 id="app">
    <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 id='app'>
    <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 渐进式框架五层设计

在这里插入图片描述

RxxQingYi

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue学习（二）

响应式布局也就是单项数据绑定，即通过改变数据源来改变页面，或者通过页面改变来改变数双向数据绑定vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/se
复制链接

扫一扫