1.MVVM概念

MVVM的概念-这张图很值钱.png

2.Vue基本结构代码和MVVM的对应关系





    {{msg}}

3.插值表达式

插值表达式的用法:表达式/三元表达式,只能用在元素的内容区域

   
    
    {{msg}}
    
    {{name+"18岁"}}
    
    {{2*3}}
    
    {{8%2 === 0 ? "偶数":"奇数"}}
    
    {{age > 18? "已成年":"未成年"}}

4.指令v-text

v-text是用来渲染文本的,用法: v-text="属性名"

注意:只能被使用在标签的属性上,会把元素内部的内容全部替换掉,

v-text 会把元素内部的内容都替换掉

   
        123
     
   const vm=new Vue({
     el:"#app",
     data:{
         msg:"这是一首简单的小情歌"
     }
 })
结果是:这是一首简单的小情歌,,会把123替换掉

5.指令v-html

v-html是用来渲染带标签的文本,用法: v-html="属性名"

6.插值表达式,v-text和v-html的区别

1.插值表达式

1.插值表达式可以渲染普通的文本,使用在标签的内容innerHtml区域, 用法: {{}}
注意:插值表达式不会清空元素中其它的内容, 插值表达式,只是一个占位符,不会清空元素的内容,但是在网速慢的情况下,会出现闪烁的问题,v-text没有闪烁问题,使用v-cloak指令,解决插值表达式闪烁问题

     123{{msg}}456
      结果是:   123这是一首简单的小情歌456

2.v-text指令

v-text指令也可以用来渲染普通文本,用法:v-text="属性名"
注意:只能被使用在标签的属性上,会把元素内部的内容全部替换掉,

        
            123
         
       const vm=new Vue({
         el:"#app",
         data:{
             msg:"这是一首简单的小情歌"
         }
     })
    结果是:这是一首简单的小情歌,,会把123替换掉

3.v-html指令

1. v-html是用来渲染带标签的文本,用法: v-html="属性名"

7.v-bind指令

可以用来动态的绑定属性,用法: v-bind:属性名="data中的属性名",简写形式 :属性名="data中的属性名",可以用来绑定class样式,用法 :class="{'类名':布尔值}" 布尔值为true则样式显示,为false则样式不显示

8.v-for指令

v-for能够根据data中数据的变化自动刷新视图,
注意1: v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候,它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复
注意2: 以下两种情况不会触发视图更新
1.使用数组的length属性取改变数组的时候,不会触发视图更新(model层数据变化了,视图层没有刷新)
2.使用数组下标的方式去改变数组的时候,也不会触发视图更新
解决方法:
1.使用Vue.set(arr,index,newVal) arr是需要改变的数组,index是数组里面的项,newVal是改变后的值,Vue.set(vm.arr3,0,{name:"小明",age:2222})
2.Array.prototype.splice(),vm.arr1.splice(0,1)删除arr1数组中的第一项

1.渲染数组

1. 数组arr1 ,item是数组中的每一项,arr1是要循环的数组

        arr1:["甄嬛","年石兰","安陵容"],
        
        {{item}}

2.数组arr2

      arr2:[
               {"name":"貂蝉",age:20},
               {"name":"昭君",age:18},
           ],

渲染方式有两种:
2.1方法1,item是数组中的每一项,arr2是要循环的数组

   
          {{item.name}}-----{{item.age}}

2.2方法2,item是数组中的每一项,index是数组项的索引值,arr2是要循环的数组

     
         {{item.name}}--{{item.age}}-{{index}}

###2.渲染对象
val,key,index分别代表值,键,每项的索引

 obj:{
                "邮箱":"247171",
                "电话":"284561596321",
                "爱好":"吃饭,睡觉"
           }
 
        {{key}}:{{val}}:{{index}}

9.v-model指令

v-model指令用来双向数据绑定：就是model和view中的值进行同步变化 ,用法:v-model="属性名"

10.v-on 指令

v-on用来监听事件dom事件
用法:
1.v-on:事件类型="执行的函数"
2.简写@:事件类型="执行的函数"
3.参数 @:事件类型="执行的函数(实参)"
4.通过执行函数中添加 $event参数传递事件,注意只能是$ event,并且没有双引号
5.事件修饰符可以给事件添加特殊功能, .stop阻止单击事件继续传播 .prevent阻止页面跳转

11. v-if和v-show指令

v-if和v-show用来控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" ,布尔值为true的时候显示,为false的时候不显示
两者的区别:
v-if通过控制dom来控制元素的显示和隐藏
v-show通过控制样式display:none来控制元素的显示和隐藏
使用场景区别
1.设计到大量dom操作的时候,我们需要使用v-show
2.设计到异步数据渲染的时候就使用v-if

vue笔记-day1