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 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 渐进式框架 五层设计

vue学习(二)_第1张图片

你可能感兴趣的