Vue基础学习笔记01

作者: 二歪求知iSk2y | 来源:发表于2018-11-18 20:28 被阅读0次

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

文档里什么都有！

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

准备开始

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基础</title>
</head>
<body>
    <div id="app">
        
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            
        })
    </script>
</body>
</html>

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

模板语法

插值

文本

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

<div id="app">
        <p>{{msg}}</p>
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                msg:'简单插值'
            }
        })
    </script>

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

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

<p v-once>{{msg}}</p>

原始html

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

使用v-html="msg"

<div id="app">
        <p v-html="msg"></p>
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                msg:'<h1>简单插值</h1>'
            }
        })
    </script>

rawhtml

表达式

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

{{ number + 1 }}

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

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

指令

判断v-if

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

<div id="app">
        <p v-if="num > 4">{{msg}}</p>
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                msg:'iSk2y learn Vue',
                num: 5
            }
        })
    </script>

循环v-for

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

遍历数组

<div id="app">
        <ul>
            <li v-for="item in numList">{{item}}</li>
        </ul>       
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                numList:[1,2,3,4]
            }
        })
    </script>

遍历对象

<div id="app">
        <ul>
            <li v-for='item in obj'>{{item}}</li>
        </ul>
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                obj : {
                    name:'Vue',
                    version:'2.9'
                },
            }
        })
    </script>

遍历对象数组

<div id="app">
        <ul>
            <li v-for='item in objList'>{{item.name}}-{{item.version}}</li>
        </ul>
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                objList:[
                    {name:'Python',version:3},
                    {name:'PHP',version:7},
                    {name:'Vue',version:2.9},
                    {name:'Django',version:2.1}
                ]
            }
        })
    </script>

for遍历

多参数

index,value

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

<div id="app">
        <ul>
            <li v-for='(value,key) in obj'>{{key}} : {{value}}</li>
        </ul>
        
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                
                obj : {
                    name:'Vue',
                    version:'2.9'
                },
            }
        })
    </script>

结果为：

name : Vue

version : 2.9

index,key,value

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

<div id="app">
        <ul>
            <li v-for='(value,key,index) in obj'>{{index}} : {{key}} : {{value}}</li>
        </ul>
        
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                
                obj : {
                    name:'Vue',
                    version:'2.9'
                },
            }
        })
    </script>

结果为：

0 : name : Vue

1 : version : 2.9

数组更新检测

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

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

push

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

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

遍历范围

<div id="app">
        <ul>
            <li v-for='i in 6'>{{ i }}</li>
        </ul>
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
        })
    </script>

结果为：

1

2

3

4

5

6

绑定v-bind

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

<div id="app">
        <img v-bind:src="imgSrc">
        
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                imgSrc: 'https://cn.vuejs.org/images/logo.png'
            }
        })
    </script>

vuebind.jpg

事件v-on

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

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

<div id="app">
        <p v-on:click='add'>{{num}}</p>
        
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                num: 66,
            },
            methods:{
                add(){
                    this.num++;
                    console.log('click p '+this.num);
                }
            }
        })
    </script>

绑定

计算属性

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

基础例子

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

<div id="app">
        <p>{{reverseMsg}}</p>
        
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                msg: 'I will be better',
            },
            computed:{
                reverseMsg(){
                    return this.msg.split('').reverse().join('');
                }
            }
        })
    </script>

计算属性

计算属性缓存VS方法

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

<div id="app">
        <p>{{reversedMessage()}}</p>
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                msg: 'I will be better',
            },
            methods: {
                  reversedMessage: function () {
                    return this.msg.split('').reverse().join('')
                  }
                },
        })
    </script>

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

setter

<div id="app">
        <p>{{reverseMsg}}</p>
        
    </div>
    <script src="vue.min.js"></script> 
    <script>
        var App = new Vue({
            el:"#app",
            data:{
                msg: 'I will be better',
            },
            computed:{
                reverseMsg:{
                    get(){
                        return this.msg.split('').reverse().join('');
                    },
                    set(){
                        this.msg = '我就不设置你给的值'
                    }
                    
                }
            }
        })
    </script>

compted2.jpg

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

网友评论

本文标题：Vue基础学习笔记01

本文链接：https://www.haomeiwen.com/subject/xetnfqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Vue基础学习笔记01

准备开始

模板语法

插值

文本

原始html

表达式

指令

判断v-if

循环v-for

遍历数组

遍历对象

遍历对象数组

多参数

index,value

index,key,value

数组更新检测

遍历范围

绑定v-bind

事件v-on

计算属性

基础例子

计算属性缓存VS方法

setter

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读