Vue基础学习笔记01

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 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如: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计算属性逆转了字符串。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容