文档章节

Vue.js笔记,从入门到精通

甄佰匠人
 甄佰匠人
发布于 2016/10/18 17:33
字数 1666
阅读 203
收藏 3

Vue.js笔记,从入门到精通

这是我总结的笔记,对今天的学习总结了一半,笔记后面再补上,因为之前会angular,所以学起来很简单。

Vue.js 是一种mvvm模式,与angular的区别是完全没有controller的概念。

Vue实例

        构造器:每个应用都是通过构造函数Vue创建一个根实例,实例化时,需要传入一个选项对象,可以包         含数据、模板、挂载元素、方法、生命周期钩子等。可以扩展Vue构造器,用预定义选项创建可复用的         组件构造器,所有Vue.js组件都是被扩展的Vue实例:
        var myComponent = Vue.extend({
            //扩展选项
        });
        //所有的‘myComponent’实例都将以预定义扩展选项被创建
        var myComponentInstance = new myComponent();

        属性与方法:每个实例都会代理 data 对象里所有的属性,注意只有这些被代理的属性是响应的。如果           在实例创建之后添加新的属性到实例上,它不会触发视图更新。除了这些数据属性,Vue 实例暴露了一         些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的数据属性区分。

        实例生命周期:Vue实例在创建时有一系列初始化步骤,在此过程中,将调用一些生命周期钩子,给自         定义逻辑提供运行机会。例如 created 钩子在实例创建后调用,也有其他的钩子,在实例生命周期的不         同阶段调用,compiled、ready、destroyed。钩子的 this 指向调用它的Vue实例,组件的自定义逻辑分         割在这些钩子中。


数据绑定语法
Vue.js的模板是基于DOM实现的,所有的Vue.js模板都是可解析的有效的HTML,通过一些特殊的特性做了增强,Vue模板因而从根本上不同于基于字符串的模板。

        插值
                文本:数据绑定最基础形式是文本插值,使用“Mustache”语法(双大括号)
                <span>{{ msg }}</span>
                Mustache 标签会被相应数据对象 msg 属性的值替换,随属性变化而更新。处理单次插值,数据                   变化不再更新。
                <span>{{ *msg }}</span>

                原始的HTML:双Mustache标签将数据解析为纯文本而不是HTML,输出真HTML字符串,需要用                 三Mustache标签。
                <div>{{{ raw_html }}}</div>
                内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断,应当使用 partials。
                注意在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。记住,只对可信内容                 使用 HTML 插值,永不用于用户提交的内容。

                HTML特性:Mustache标签也可以用在HTML特性内,注意在Vue.js指令和特殊特性内不能用插值。                 如果用错Mustache标签Vue.js会给出警告。
                <div id="item-{{ id }}"></div>

        绑定表达式
        放在Mustache标签内的文本称为绑定表达式。在Vue.js中,一段绑定表达式由一个简单的JavaScript表         达式和可选的一个或多个过滤器构成。

                JavaScript表达式:目前为止,我们的模板只绑定到简单的属性键。不过实际上Vue.js在数据绑定                 内支持全功能的JavaScript表达式。
                {{ number + 1 }}
                {{ ok ? 'YES' : 'NO' }}
                {{ message.split('').reverse().join('') }}
                这些表达式在所属的Vue实例的作用域内计算,每个绑定只能包含单个表达式。

                过滤器:Vue.js允许在表达式后添加可选的“过滤器(Filter)”,以“管道符”指示。
                {{ message | caplitalize }}
                这个过滤器只是一个JavaScript函数,返回大写化的值。Vue.js提供数个内置过滤器,可以开发自                 己的过滤器。
                管道语法不是JavaScript语法,不能在表达式内使用过滤器,只能添加到表达式的后面。过滤器可                 以串联。
                {{ message | filter1 | filter2 }}
                {{ message | filterA 'arg1' age2 }}

        指令
        是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式,因此JavaScript表达式及过滤器规则在这里         也适用。指令职责是当其他表达式的值改变时吧某些特殊的行为应用到DOM上。

        <p v-if="greeting">Hello!</p>
        这里 v-if 指令根据表达式 greeting 值的真假删除/插入 <p> 元素。

                参数:有些指令可以在名称后面带一个“参数”(Argument),中间放一个冒号隔开。例如,v-bind                   指令用于响应地更新HTML特性。
                <a v-bind:href="url"></a>
                这里 href 是参数,它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到                  可以用特性插值 href="{{url}}" 获得同样的结果:这样没错,并且实际上在内部特性插值会转为 v-                  bind 绑定。
                v-on 指令,用于监听DOM事件:
                <a v-on:click="doSomething"></a>

                修饰符:修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀,用于表示指令应当以特殊方式绑                      定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式。
                <a v-bind:href.literal="/a/b/c"></a>
                当然,这似乎没有意义,因为我们只需要使用 href="/a/b/c" 而不必使用一个指令。这个例子只是                    为了演示语法。

                缩写:v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代                    码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你                    会感觉一直这么写实在是啰嗦。而且在构建单页应用(SPA )时,Vue.js 会管理所有的模板,此                  时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写。
                v-bind缩写
                <!-- 完整语法 -->
                <a v-bind:href="url"></a>
                <!-- 缩写 -->
                <a :href="url"></a>

                v-on缩写
                <!-- 完整语法 -->
                <a v-on:click="doSomething"></a>
                <!-- 缩写 -->
                <a @click="doSomething"></a>

计算属性

模板中绑定表达式非常便利,实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性

        计算属性

        computed: {

            a: function(){

            },

            b: function(){

            }

        }

        计算属性默认getter,需要时可以提供一个setter。

© 著作权归作者所有

甄佰匠人
粉丝 3
博文 154
码字总数 86632
作品 0
浦东
程序员
私信 提问
关于前端工程化开发的框架资料汇总

1.2015前端框架何去何从(http://www.cnblogs.com/sskyy/p/4264371.html) 2.迷你MVVM框架 avalonjs 入门教程(http://www.cnblogs.com/rubylouvre/p/3181291.html) 3.全面理解虚拟DOM,实现虚拟......

IT追寻者
2016/10/29
63
0
好程序员web前端分享Vue学习笔记(一)

好程序员web前端分享Vue学习笔记(一)Vue框架是JS的封装框架,使用了MVVM模式,即model—view—viewmodel模式, 简而言之,就是数据与视图的绑定。 我准备开始学习一些最基础的Vue使用,以此...

好程序员IT
05/09
25
0
Vue.js 2.0 手把手入门笔记

1 介绍 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 2 ...

AsGiant
06/18
0
0
Vue.js进阶教程第一步:vue2.0前端-何韬-专题视频课程

Vue.js进阶教程第一步:vue2.0前端—22327人已学习 课程介绍 Vue.js2.0进阶教程第一部分,Vue.js框架基础入门视频课程主要学习Vue.js的基础语法结构,api使用方式,vue.js组件的驱动方式,如...

pkutao
2017/01/04
0
0
Vue入门指南-06 Vue中的动画(快速上手vue)

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中...

番茄炒蛋少放糖
03/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
58分钟前
121
7
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部