vue基础知识部分

扯淡前言

这个笔记是关于vue的所有重点基础知识,大部分配的有实例,这些实例都是我自己一个个敲上去的,我基本都是先在jsfiddle上敲完,代码直接粘贴过来的,呕心沥血有木有...
弄这个的目的一是为了大家能够更好的掌握vue,因为看咱们群里的人数慢慢多了,其实最开始就想着弄一个这样的笔记,后来时间原因就搁置了.目前我个人觉得,如果不是构建大型应用,我觉得vue仍然是三大框架中最好用的,但是构建大型应用,肯定首选react,所以vue仍然是very,very重要的,必须无理由的熟练掌握;第二是这段时间有很多同学因为CNODE的原因问我一些问题,从很多人的问题来看,还是基础知识并不是那么牢固,所以也就想为大家补一课;
不懂的群里问,但是大家问问题可以,提倡的是大家先思考,再仔细检查代码,还是不会就谷歌,百度,如果都做完了再来问老湿,有时候大家问我问题,我不是不回答,是真没看到,因为我也有很多工作要做,不可能一天盯着,在这里也向很多同学道个歉,因为有时候我可能是一天盯着电脑,但不可能自己一天盯着手机,真的很抱歉...
最后祝愿大家都能前程似锦,一路繁花,好,开始正文了....

构造器

实例化vue时，需传入一个选项对象，它可以包括数据、模板、挂载元素、方法和生命周期钩子

属性与方法
每个vue实例都会代理其data对象里所有的属性
vue实例暴露了一些有用的实例属性与方法，这些属性与方法都有前缀$，以便与代理的data属性区分

实例生命周期
created钩子------在实例被创建后被调用
mounted----当编译好的HTML被挂载到对应的位置,这个操作完成后触发
updated----当data中的数据改变,并且虚拟DOM重新渲染完成后触发
destroyed
概要: 钩子的this 指向调用它的实例

生命周期图示
https://cn.vuejs.org/images/lifecycle.png

插值
文本
- 双大括号
- v-text
纯HTML
- v-html
属性
- v-bind（大双括号不能在属性中使用，因此需使用v-bind）
使用JavaScript表达式

指令

哪些指令?

v-bind
v-on
v-if

v-for（特殊）

                     v-if  






new Vue({
  el: "#app",
  data: {
    ok:'username'
  },
  methods: {
  toggle: function(todo){
      if(this.ok==='username'){
      this.ok = 'psd'
    }else{
      this.ok = 'username';
    }
  }
  }
})

                   v-for


  {{item}}



new Vue({
el: "#app",
data: {
items:['a','b','c']
},
methods: {
  toggle: function(todo){
      todo.done = !todo.done
  }
}
})

修饰符
- v-on
  - .stop 阻止单击事件冒泡
  - .prevent 提交事件不再重载页面
  - .capture 添加事件侦听器时使用时间捕获模式
  - .self 只当事件在该元素本身（而不是子元素）触发时触发回调
  - 太多了,不再总结.这些都不重要,大家有空自己搜一下吧~~~~哈哈
    
    过滤器

过滤器的目的是用于文本转换,转化成你想要的格式,还是给大家来个例子

                         filters
 
      {{message | changeChar}}
     
  

 new Vue({
  el: "#app",
  data: {
    message:'nihao'
  },
  methods: {
      changeFirstChar: function(todo){
          this.message = 'good evening'
      }
    },
    filters:{
      changeChar(value){
              if(!value){
          return '';
        }else{
          return value.charAt(0).toUpperCase()+value.substring(1)
        }
      }
    }
  })

缩写

v-bind缩写
- 原有：缩写：
v-on缩写
- 原有：缩写：
  
  计算属性
  
  计算属性（减少模板{{}}的复杂度）
基础例子1

计算属性的两种写法

              computed



{{fullName}}

new Vue({
el: "#app",
data: {
firstName:'Ji',
lastName:'RenGu'
},
computed:{
fullName(){
return this.firstName+'----'+this.lastName;
}
}
})

* 计算缓存vs方法(Methods)
    * 计算属性computed具有缓存，而methods无缓存
* Computed属性vs 侦听器(Watch属性)
    * watch方法--观察Vue实例上的数据变动,只要指定的数据改变就会执行预定的函数

                            watch

    {{msg}} 
 
    改变了吗? {{isChange}}
    


new Vue({
  el: "#app",
  data: {
        msg:'欲穷千里目',
      isChange:'No'
  },
    watch:{
    //只要msg改变,这个方法就会执行
    msg(val,oldVal){
        this.isChange = 'Yes'
    }
  },
  methods:{//不得不说ES6写起来真爽
    change(){
        this.msg = '更上一层楼'
    }
  }
})

computed方法


*   计算setter 和getter
    *   get和set,顾名思义,一个是获得,一个是设置,常规上来讲,计算属性中都是有get和set方法的,默认是只有getter方法,如果需要的话,自然,你也可以写一个setter方法.来个例子,诸位往下看:
        ```

        ```
                      get和set

        ```

        
        此时的onpiece: {{onepiece}} 

        此时的msg: {{msg}} 


        
        

new Vue({
el: "#app",
data: {
name:'Kobe',
msg:''
},
methods:{
setName(){
this.onepiece = 'JorDan'
}
},
computed:{
onepiece:{
get(){
return this.name +'Bryant';
},
set(newVal){
//当你给onepiece设置值的时候set就就会调用
this.msg = newVal+'is the greatest basketball player';
}
}
}
})

class与style绑定

绑定HTML class

对象语法
- 基本
- 在对象中传入多个class属性（其会与原有class共存）
- 直接传入对象
- 与计算属性一起使用（绑定返回对象的计算属性）
数组语法
- 简单例子
- 三元表达式
- 当有多个条件class时，可以在数组语法中使用对象语法
用在组件上
- 简单例子
- 绑定HTML class例子

     绑定class的几种方式

.classC{
color:red;
}
.classD{
font-weight:bold;
}
.classE{
font-size:20px;
}
.classF{
color:blue;
}
.classM{
display:block;
}
.classN{
display:none;
}

class属性绑定

-------------------绑定变量-------------------------

绑定变量

-------------------绑定对象-------------------------

绑定对象

-------------------绑定数组-------------------------

绑定数组

-------------------绑定三元运算符-------------------------

绑定变量


    new Vue({
      el: "#app",
      data: {
       a:true,
       b:false,
       styleObj:{
        classC:true,
        classD:true
       },
       m:true,
       arrClass:['classE','classF']
      },
      methods:{
        toggle(){
            this.m=!this.m;
        }
      }
    })

绑定内联样式

对象语法
- 内联式对象语法
- 样式对象式对象语法（更推荐）
数组语法
自动添加前缀
- v-bind:style 当需要特定的前缀时如transform，vue.js会自动添加
多重值
- 从vue2.3+后，可以为一个属性添加多个值的数组，常用于含有多个前缀的情况
  例子跟上边差不了多少,懒得写了.相信大家应该也都会,哈哈哈哈~~~

条件渲染

v-if（v-else）是真正的渲染

template元素与v-if
v-else（需要紧跟在v-if后边）
v-else-if（vue2.1.0新增）

用key管理可复用的元素---(如果这个例子看不懂的话.可以在群里问我!!!)

例子：用户名和邮箱登录界面如果有key就不会复用,大家可以把key去试一下,然后输入看一下效果!!!

  
    
    
    
  

  new Vue({
    el: "#app",
    data: {
     ok:'username'
    },
    methods: {
      toggle: function(todo){
          if(this.ok==='username'){
          this.ok = 'psd'
        }else{
          this.ok = 'username';
        }
      }
    }
  })

v-show（其只是简单的切换display属性）

v-show不支持template语法
v-show不支持v-else

v-if VS v-show
v-if
- 当条件不成立时不会渲染
- 切换开销较大，适合不太可能变化的场景
v-show
- 无论成不成立都会渲染
- 首次渲染开销较大，但切换开销小，因此适合经常变化的场景
  
  列表渲染
  
  v-for
基本用法
- 简单例子
- 带有index参数
- 使用of 替代 in
template v-for
- 简单例子
对象迭代 v-for
- 基础用法
- 带其他参数用法
整数迭代 v-for
- 例子

组件和v-for
包含所有类型的例子


    
    遍历数组:
    
      {{item}}
    
     
    遍历对象数组:
    
      {{index}}--我是{{item.name}},今年{{item.age}}岁
    
       
    遍历对象:
    
      
        key:{{key}} |
        value:{{value}}
      
    


new Vue({
    el: "#app",
    data: {
      isOK:'true',
          items:['香蕉','苹果','烤肉'],
      pers:[{
          name:'Kobe',
        age:'40'
      },
      {
          name:'James',
        age:'38'    
      }],
      obj:{
          1:'one',
        2:'two'
      }
    }
  })

key

作用
- 用v-for更新已渲染过的列表时，它默认采用的是“就地复用”的原则，也就是如果数据项顺序发生了改变，vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处的元素。如果想跟踪每个节点的身份，从而重用或重新排列现有元素，可使用key。（key还可用在v-if中，详见v-if中的邮箱名和用户名切换的例子）

好吧,可能大家看到这里是一头雾水,不知所以,忧心忡忡,到底key有什么卵用,刚才上边的例子不是没有加key吗?好吧,不扯那没用的,通过一个例子告诉大家key到底有啥用!!!

  
    KEY:  VALUE: 
    
    
   //此处你可以吧key去了,先勾选一条,在追加一条试一下,然后加上key,勾选一条追加一条再试一下,一目了然
    
    {{item.id}}---{{item.name}}

new Vue({
el: "#app",
data: {
  id:"",
  name:"",
  list:[
    {id:1, name:'李斯'},
    {id:2, name:'嬴政'},
    {id:3, name:'赵高'},
    {id:4, name:'韩非'},
    {id:5, name:'荀子'},
  ]
},
methods: {
    add: function(){
      this.list.unshift({id:this.id,name:this.name})
  }
}
})

因为加上key默认采取的就是就地复用策略,这个例子,如果不懂,可以在群里问我


### 数组更新检测

*   变异方法（会改变原有数组）
    *   push（）
    *   pop（）
    *   shift（）
    *   unshift（）
    *   splice（）
    *   sort（）
    *   reverse（）
*   重塑数组
    *   filter（）
    *   concat（）
    *   slice（）
*   注意事项
    利用索引直接设置一个项时，vue不能检测变动，如： vm.items[indexOfItem] = newValue
    那如果设置某一项的该怎么设置呢?

    ```
      * Vue.set(example1.items, indexOfItem, newValue)
      * example1.items.splice(indexOfItem, 1, newValue)

    ```

    ```

    
    
    
    
    
    
    {{item.id}}---{{item.name}}
    
    
    

var vmm = new Vue({
el: "#app",
data: {
id:"",
name:"",
list:[
{id:1, name:'李斯'},
{id:2, name:'嬴政'},
{id:3, name:'赵高'},
{id:4, name:'韩非'},
{id:5, name:'荀子'},
]
},
methods: {
setZF: function(){
Vue.set(this.list,1,{id:2,name:'张飞'})
},
setGY:function(){
this.list.splice(2,1,{id:3,name:'关羽'})
}
}
})

* 修改数组长度时，vue不能检测变动，如：vm.items.length = newLength
* 只能用example1.items.splice(newLength)

对与显示过滤/排序结果的两种方法

过滤数组--计算属性computed例子
过滤数组--方法methods例子

          计算属性应用于过滤



{{specialNum}}


new Vue({
el: "#app",
data: {
nums:[1,2,3,4,5,6,7,8,9]
},
computed:{
specialNum(){
return this.nums.filter((item,index)=>{
return item%3==0;
})
}
}
})



在v-for循环中直接嵌入方法
{{item}}



new Vue({
el: "#app",
data: {
numbers:[1,2,3,4,5,6,7,8,9]
},
methods:{
fil(nums){
return nums.filter((item,index)=>{
return item%3==0;
})
}
}
})

两个简单的事件处理器

先来一个简单小李子,v-on用来绑定事件


1



{{num}}


* * *

2




new Vue({
el: "#app",
methods: {
sayHello: function(){
alert('sayHello')
}
}
})
`### 内联处理器方法 * 访问原生DOM事件的例子,如果click事件不传参数,就默认把原生DOM传递进去`
 //没有传参数,就是原生的!!!
 


{{msg}}


new Vue({
el: "#app",
data: {
msg:''
},
methods: {
showBtnname: function(e){
this.msg = e.target.innerText;
}
}
})

未访问原生DOM事件的例子,如果传了参数.那么方法中接受的第一个参数就是该参数,在vue中所有的事件绑定都是这样的


----------------------------html---------------------------------

Todos:

  
    {{ todo.text }}
  
  
    {{ todo.text }}

vue

vue基础知识部分

扯淡前言

构造器

属性与方法

实例生命周期

生命周期图示

插值

指令

过滤器

缩写

计算属性

计算属性（减少模板{{}}的复杂度）

class与style绑定

绑定HTML class

class属性绑定

绑定内联样式

条件渲染

v-if（v-else）是真正的渲染

v-show（其只是简单的切换display属性）

v-if VS v-show

列表渲染

v-for

key

对与显示过滤/排序结果的两种方法

两个简单的事件处理器

Todos:

事件修饰符

按键修饰符

vue2.1.0新增 按键修饰符

表单控件绑定

基础用法

{{msg}}

修饰符

v-model与组件

组件

使用组件

我是新出炉的组件

我是新出炉的组件

Prop（子组件从父组件获得数据）

{{msg}}

{{childtext}}

{{childMsg}}

自定义事件（子组件将数据传回父组件）

hello, {{name}}

非父子组件通信

使用Slot分发内容

我是一个组件

动态组件

总结

你可能感兴趣的:(vue)

vue2.1.0新增按键修饰符