Vue2.0 教程-表达式,条件渲染,列表渲染,样式绑定,事件,v-model

表达式

Vue的表达式不叫表达式,叫插值,写法是
{{ 5*4 }}
或者 {{ [1.2.3].reverse().join("--") }}
单次插值:{{ *val }}值插入后不能再改变
html 插值 : {{{ htmlStr }}} 输出 html 标记

 
            
            {{ 5*4 }}
            {{ [1,2,3].reverse().join("-") }}
            {{ 4<6 ? 4<6 : false}}
            {{ msg }} 
{{ html }}   会正确输出Hello 中国  
如果是{{ html }}  则会输出 Hello 中国  带标签的原样模板

链接vue2.0

绑定 v-bind:attr

简写形式是 v-bind:style="styleObject" 可以简写为 :style="styleObject"


           鼠标停一下
           鼠标停一下
           鼠标停一下
           {{ 5 }}

给span 绑定一个 title 事件,鼠标放上去就会显示 " 这是 title"
但改一个形式 v-bind:title="msg"
msg 是我们在 data 里面初始化的变量 ,这样,鼠标再放上去的时候就会显示 " Hello Vue!!! "
我们又给 span 绑定一个 style 样式 , 有两个样式,标准属性前面写上 v-bind: 就可以绑定变量了. span 就会变成红色的 30px 的文字
用一个变量 vm 去接收 new Vue 的实例:
给span 绑定一个 id 属性 a 再绑定一个 diy 属性,也是 msg ,在脚本里面,如果没有初始化 msg 会报一个错误,但可以初始化一个空.msg:" "

然后我们去浏览器的后台去输出 vm 回车,

能看到 $el : div #box
所以可以通过 vm.$el 拿到#box 这个节点 vm.$el == #box
写法是 vm.$el 可以console.log() 一下,就能得到 id 是 box 的 div
而且还能看到很多比如: msg : "Hello Vue!!!"
还有 styleObject : 点开就能看到 fontSize 和 color
所以 : vue 把所有 data 的东西都挂载在实例上了.所以可以直接在后台直接更改, 很方便

以上: 我们可以换一种挂载方式: vm.$mount ("#box") mount 是挂载的意思这样也是可以的,也能实现挂载在某个节点上

$el 用于获取 vue 所挂载的元素
而$mount 用于将 Vue 实例挂载到指定元素

样式绑定

以下 div 绑定了两个 class 样式, 但是 a 会被 b 覆盖 ,
:class=[first,second] 样式也可以用数组的形式来绑定,
在数组里面写一个三元表达式 :class="[first,isShow ? ' ' : third]"
这个

条件

v-if 条件渲染跟angular的 ng-if 是一样的

v-if 跟angular效果一样,从DOM树中移除
v-else 紧邻着 v-if
v-else-if


           加油!!站起来!!
           看不到我
           Hello  Vue!!!
           
            no Hello Vue!!!
           v-show content

以上例子:
1.第一个 span 是默认显示的,如果在浏览器的控制台,改变vm.isShow=false 这样 span 就不显示了,而与 span 相反属性的 p 标签,就会显示

最后一个 span 标签 v-show 是隐藏元素为 true 就显示,为 false 就隐藏

v-if v-show 的区别

区别

（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
（5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

写一个条件渲染的demo




data:{
  loginType:' '
}
method:{
  toggle:function(){
       var a = this.loginType==="username" ? 'email' :'username';
       this.loginType = a;
        }
/*这个三元表达式不是很好理解,先判断  this.loginType===username  
  true为email      fasle为username    最后赋值,把this.loginType赋值为判断过后a的结果.  */
}

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的placeholder。

如果想这两个元素独立出来,不复用,用一个key去命名就可以解决.这样就不是简单的更改playsholder这么简单了,而是两个单独的模板

v-show


data:{
    ok1:false,
  }

列表渲染

v-for

以上数据: 遍历出来的方法 :以下

Vue1.0 :$index 2.0没有$index 但是要想得到下标 ,就是
{{ x }}---{{ index }}

值在前,下标在后

,如果index写在前面,index 得到的就是值.所以,为了方便语义化,val写在前面,index写在后面

整数遍历, 想当于一个 for 循环, vue 整数遍历,比angualr 的整数遍历简单,不用初始化一个数组,只用初始化一个数字就OK
遍历有相同元素的数组时;vue可以直接遍历, 不用track by index 比angular 简单
vue1.0


 vue2.0

遍历数组的对象的下标,参考v-for="a in arr3" 通过绑定 :key 可以得到id,

 
遍历数组
          
              {{ x }}
          
遍历对象
           
               {{ x }}
               
           
           
               1++{{val +"--"+ key}}
值在前, 键在后
           
           
               {{index +"--"+ key +"--"+ val}}
值,键,下标,顺序要写对,得到的对应的数据就是语义化的数据,
           
           

               {{ i }}
结果是1,2,3,4,5,
           
           
遍历有相同元素的数组时;vue可以直接遍历, 不用track by index 比angular 简单
               {{ a }}
           
           
               
               
               
               {{ a }}
               {{ a.name}}----{{a.id }}  
输出结果是 zhar---1    tom---2

v-if v-for一起使用

v-for比v-if有更高的优先级,所以如果v-if要判断的话,在v-for的外层元素上加v-if进行判断

事件

添加事件的方法是,v-on:click 简写形式是 @click
第一个 button ,点击 {{ a }} 插值就会显示 true 或者 false ,因为 a 就是脚本里面初始化的值,初始是true ,然后button 绑定的是非a 所以点击一下,就会显示false 再点击就会显示true 默认是 true
第二个button 绑定的changeEvent 事件 ,是个函数,函数就不能写在data里面初始化了,要写在 methods 配置项里面去初始化,
change 事件可以不传参,也可以传参
先说不传参的: change 绑定的还是插值 a 的状态点击false 再点击就是true
------------分割线------------
再说传参的: 第一个是默认的参数,$event 打印出来的是 mouseevent 和其他的两个 a b 参数,
又声明了一个foo函数,在页面输出的时候,一定要是 {{ foo() }} 返回的是一个随机数, 而不能不加括号,否则输出的是function boundFn(a) { var l = arguments.length; return l ? l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) : fn.call(ctx) } 是一堆看不太懂的东西
下面又初始化了一个数据, firstname 和lastname 在methods里面初始了一个函数,返回的是 firstname+lastname 方法的调用就是加上括号也能用上data 的数据

添加事件的放法就是 v-on:click 或者 @click click可以换成别的事件,mouseenter mouseleave等

事件冒泡 ,如果子元素和父元素绑定上相同的click事件,就会由子触发,一直触发到父,一直往外冒泡, Vue 提出的解决办法是 @click.stop 就可以阻止事件往外冒泡,

DOM 提供的方法是

event.stopPropagation() 和addEventlisten() 阻止冒泡,

jquery也提供了方法: 是

event.preventDefault()
event.stopPropagation();

下面代码里面的 input 绑定了 v-model 绑定的是 firstName这个变量 , 添加事件叫 @keydown 键盘按下事件,后面的都是修饰符,按上下左右键和deleta键才会在控制台输出,否则,不管页面怎么修改,控制台都不会输出

4.jpg

还有这么多修饰符可以添加
这个图片是键盘修饰符,还有stop,还有preevent可以连用

 
     
 输出 v-on:click="a=!a"{{ a }}

 
 
{{ msg }} show  is  show 
 {{ foo() }}
 {{ fullName()}}
 


 修饰符

           this  is  div
 
   

 
 
{{ firstName }}

model

v-model 就是将我们的数据和表单数据进行绑定

c2 初始化是一个数组,给三个不同的checkbox 不同的 val , 如果 checkbox 是true ,他的 value 的值,就会被添加到 c2 数组,如果是 false , val 就会从数组里删除
v-model 还有单选还有下拉列表,自己看手册练一练
最后一个input 绑定的事件有点多,可以单独去练一练但这里有一个知识点,就是true-value="hello" false-value="bye"
这是绑定的字符串,点击就是hello,再点击就是bye , 但是如果想绑定变量,就要用v-bind:true-value="a" v-bind:false-value="b" 虽然看上去效果差不多,但是一个是固定的字符串,一个是变量
我刚才试了一下,c3 如果是字符串的话,变量a 和变量b 的形式都得是字符串,
如果形式不一样,就会得不到正确的输出

计算属性

{{ computedFullName() }} 这个方法是添加在 methods 里面的,没毛病啊,之前说过的,方法是添加在 methods 里面的

但是 vue 提供了更加便利的配置项, computed ,所以那个依赖 data 的函数,可以写在 computed 这个配置项里面,data 里面的 fullname 就没有必要了,因为他是计算出来的,再计算属性里面把 fullname 写成一个函数,返回的是firsname + lastname 可以直接在body 里面用插值输出fullname
用methods 也可是实现fullname 但为什么还存在计算属性
他们之间的差别是:
A: 计算属性是缓存的,只有依赖的值发生变化时,他才会发生变化,
给一个 button 点击事件, 输出 this,fullname 输出的是同一个值
如果写在methods 里面,每执行一次,会被重新调用一次,多使用计算属性,

 
         {{ firstName+lastName }}
          {{ computedFullName() }}
          {{ fullName }}
          {{ fullName }}
          
          {{ str }}

补充一点,上面提到过的,初始化一个模板字符串,直接用插值输出的话,输出的是模板字符串原样,如果用输出的就是正确的被渲染过的标签内容

 fullName:{
            get: function(){
                return this.firstName +' '+ this.lastName;
            },// 只写get方法的话,是单向数据绑定,fullName的改变依赖于firstName或者lastName.
            set: function (newValue){
                var names = newValue.split(' ');
                console.log(22,names)
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }   // 加上set方法的话,就是双向数据绑定,fullName改变,firstName和lastName也会改变
        }

- 以上fullName方法写在computed计算属性里面,是通过计算得到的

class 与 style 绑定

绑定HTML class



data: {
  isActive: true,
  hasError: false
}

对象语法

绑定一个属性,
绑定多个属性括号里面用逗号隔开
绑定2个或者3个以上的属性


data:{
   classObject:{
       info : false,
       info2 : true,
       info3: true,
       info4: false
   }
}

还有就是通过计算属性添加类(以后项目中会使用)


data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

这是绑定多个属性的进阶版.

数组语法

普通的数组语法

 {{ msg }}
data:{
     activeClass: 'info',
     errorClass: 'info3',
}

最后的渲染结果就是两个类都添加上了.

三元表达式的数组语法

{{ now }}
    
    
data:{
      isactive:false
}
methods:{
      click:function(){
            this.isactive = !isactive;
      }
}

最后实现的效果就是点击按钮可以切换两个属性

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

用在组件上

跟用在html标签上的用法一致, 可以用三元表达式,数组语法,对象语法

绑定内联样式

内联跟class样式差不多,也有对象语法,数组语法,不一样的是,内联样式,是写在style="{ }" 这个大括号里面的

对象语法

这是style绑定的对象语法

data:{
  num: 30,
}

也可以不直接写样式,变成动态的,可变的

你好啊反馈的积分卡蓝灯就估计得发老公觉得

直接绑定到一个样式对象通常更好，这会让模板更清晰,同样的，对象语法常常结合返回对象的计算属性使用。以下:

data:{
  styleObj:{
        color:'#333',
        background:"#f0f0f0",
        fontSize: '24px'
    },
}

数组语法

可以把多个 样式对象 应用到同一个元素中

data:{
     baseStyles:{
          width:'200px',
          height:'100px',
          background:'cyan',
      },
      overridingStyles:{
          color:'red',
          fontSize:'30px'
      }
}

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

Vue2.0 教程-表达式,条件渲染,列表渲染,样式绑定,事件,v-model

表达式

Hello 中国

绑定 v-bind:attr

然后我们去浏览器的后台去输出 vm 回车,

样式绑定

条件

v-if 条件渲染跟angular的 ng-if 是一样的

v-if v-show 的区别

v-show

列表渲染

v-for

值在前,下标在后

v-if v-for一起使用

事件

添加事件的放法就是 v-on:click 或者 @click click可以换成别的事件,mouseenter mouseleave等

DOM 提供的方法是

jquery也提供了方法: 是

{{ msg }} show is show

model

{{ msg }}

{{ c1 }}

{{ c2 }}

{{ c3 }}

计算属性

class 与 style 绑定

绑定HTML class

对象语法

数组语法

用在组件上

绑定内联样式

对象语法

数组语法

自动添加前缀

你可能感兴趣的:(Vue2.0 教程-表达式,条件渲染,列表渲染,样式绑定,事件,v-model)

Vue2.0 教程-表达式,条件渲染,列表渲染,样式绑定,事件,v-model

表达式

Hello 中国

绑定 v-bind:attr

然后我们去浏览器的后台去输出 vm 回车,

样式绑定

条件

v-if 条件渲染 跟angular的 ng-if 是一样的

v-if v-show 的区别

v-show

列表渲染

v-for

值在前,下标在后

v-if v-for一起使用

事件

添加事件的放法就是 v-on:click 或者 @click click可以换成别的事件,mouseenter mouseleave等

DOM 提供的方法是

jquery也提供了方法: 是

{{ msg }} show is show

model

{{ msg }}

{{ c1 }}

{{ c2 }}

{{ c3 }}

计算属性

class 与 style 绑定

绑定HTML class

对象语法

数组语法

用在组件上

绑定内联样式

对象语法

数组语法

自动添加前缀

你可能感兴趣的:(Vue2.0 教程-表达式,条件渲染,列表渲染,样式绑定,事件,v-model)

v-if 条件渲染跟angular的 ng-if 是一样的