Vue基础学习笔记01

Vue官方文档：https://cn.vuejs.org/v2/guide/

文档里什么都有！

同步博客地址：http://isk2y.coding.me/2018/11/18/learn-Vue-01/

准备开始

因为是基础学习，所以本例子都写在一个HTML中了。后面改变形式。

• 引入目录下的vue.min.js文件。
• 创建一个div id为app。
• 在script中创建一个变量为Vue对象，el是element的缩写，选择器写法选中刚才的div。接下来如要使用vue都要写在div内才有效。然后我们就开始了！！

模板语法

插值

文本

最直接数据绑定形式，使用双大括号形式{{}}。

        
{{msg}}
    
     
    

data中包含了我们声明使用的数据。

• p标签中的内容会显示为msg的值，而且是实时变化，也就是说msg变量改变 p标签内容相应变化
• v-once可以一次性插值，后面就撒手不管了（修改也不会变）

{{msg}}

原始html

如果直接用{{}}，在data中变量写原生HTML标签不会生效的。

使用v-html="msg"

rawhtml

表达式

直接在{{}}中使用JavaScript简单表达式，比如

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

指令

判断v-if

在标签中使用v-if，如下例子如果num为4就不显示出来了

        
{{msg}}
    
     
    

循环v-for

通常for用来列表渲染，还有v-for比v-if优先级更高

遍历数组

        

            
{{item}}
        
       
    
     
    

遍历对象

        

            
{{item}}
        
    
     
    

遍历对象数组

        

            
{{item.name}}-{{item.version}}
        
    
     
    

for遍历

多参数

index,value

可以提供两个参数 key键值和value

        

            
{{key}} : {{value}}
        
        
    
     
    

结果为：

• name : Vue
• version : 2.9

index,key,value

还可以三个参数，index为索引，key为键值，value为值

        

            
{{index}} : {{key}} : {{value}}
        
        
    
     
    

结果为：

• 0 : name : Vue
• 1 : version : 2.9

数组更新检测

如果data中被遍历的数组发生了更新，使用正确的函数才会触发视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

push

注意：由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

遍历范围

        

            
{{ i }}
        
    
     
    

结果为：

• 1
• 2
• 3
• 4
• 5
• 6

绑定v-bind

利用v-bind语法可以绑定元素的属性。如下v-bind:href缩写为:href

vuebind.jpg

事件v-on

这里要把函数写入methods内，这样才会调用成功。这个是固定的。

可以绑定JavaScript的原生事件，以click为例

        
{{num}}
        
    
     
    

绑定

计算属性

模板内可以使用表达式，但是放入太多会让模板难以维护。把复杂逻辑放入计算属性内，只要数据一有更新变化，计算属性内的响应函数也会立即发生变化。

基础例子

要把计算属性写在compted中，然后必须必须必须return，默认是getter属性，可以自定setter属性

        
{{reverseMsg}}
        
    
     
    

计算属性

计算属性缓存VS方法

上面的例子用方法也能达到同样的效果

        
{{reversedMessage()}}
    
     
    

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

setter

        
{{reverseMsg}}
        
    
     
    

compted2.jpg

发现我设置的是this.msg，然后模板中的就自动又调用reverseMsg计算属性逆转了字符串。