码迷,mamicode.com
首页 > 其他好文 > 详细

Vue:基本用法。

时间:2019-02-20 17:13:36      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:play   any   组件   过滤   第三方   用户   双向数据绑定   最大的   native   

一、起步

1.下载核心库vue.js
bower info vue #查看版本号
npm init --yes #下载vue.js
cnpm install vue --save
版本 v2.5.17 目前最新版本()

vue2.0比1.0相比最大的变化就是引入Virtual DOM(虚拟DOM),页面更新效率高,速度更快

2.hello world(对比 angular)
2.1angular实现
js:
    let app=angular.module("myApp",[])
    app.controller("MyController",["$scope",function($scope){
        $scope.msg=" hello world ";
    }])

html:
    <html ng-app="myApp">
        <div ng-controller="myController>
            {{msg}}
        </div>
    </html>
2.2Vue实现

js:
    new Vue({
        el:"#itany",//指定光联的选择器
        data{//存储数据
            msg:"hello world",
            name:"小零"
        }
    })

html:
    <div id="itany">{{msg}}</div>
    3.安装vue-devtools插件,便于在Chrome中调试vue直接将vue-devtools解压缩,

三、常用指令

1.什么是指令?
用来扩展HTML标签的功能
angular中常用指令:
ng-model
ng-repeat
ng-show/hide
ng-if

2.vue中常用的指令
1、v-model
双向数据绑定,一帮用于表单元素

2、v-for (val,key)
对数组或对象进行循环操作,使用v-for,不是v-repeat
注:在vue 1.0中提供了隐式变量,如$index.$key
在vue 2.0中去除了隐式变量,已被废除。

3、v-on
用来绑定事件,用法v-on:事件名="函数"

4、v-show/v-if
用来显示或隐藏元素,v-show是通过display来实现,v-if是每次删除后重新创建,与angular中的类似

四、练习:用户管理

五、事件
1、事件

1.1、事件简写
v-on:click=""
简写方式 @click=""

1.2 事件对象$event(e.target.innerHtml)

1.3 事件冒泡

原生的方法:e.stopPropagation()
vue方法:@click.stop


1.4 事件默认行为

阻止事件的默认行为:

原生的方法:e.preventDefault()
vue方法:@click.prevent

1.5 键盘事件

@keydown @keypress @keyup

(e.keyCode:按键序号)

简写:

回车: @keydown.13 或 @keydown.enter
上: @keydown.38 或者 @keydown.up

默认没有 @keydown.a/ @keydown.b

1.6 事件的修饰符
.stop - 调用 event.stopPropagation().
.prevent -调用 event.preventDefault().
.{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 支触发一次回调事件

2、属性:

2.1 属性绑定和属性的简写

v-bind 用于属性绑定:v-bind:属性名=""

简写方式::属性名=""

2.2class和style属性

绑定class属性和style属性时比较复杂

:class (:class={aa:true,cc:flag})
aa与cc为样式名,
true:则运用此样式名的样式,
flag:变量,为动态设置是否需要此样式名,flag在data中的值为true/false

:style()

六、模板

1、简介
Vue.js 基于HTML的模板语法,可以将DOM绑定到Vue实例中的数据,
模板也就是{{}},用来进行数据绑定,显示在页面中
也称之为Mustache语法

2、数据绑定的方式
a.双向数据绑定
v-model
b.单向数据绑定
方式1:
使用两大括号{{}},肯能会出现闪烁的情况

处理:
用v-cloak 与css ([v-cloak]:display:none;)并用

方法2:
使用v-text/v-html 不会出现闪烁问题

v-html:可识别字符串中的标签

3、其他指令

v-once 只绑定一次
v-pre 不编译,直接显示原样

七、过滤器

1、简介

用来过滤模型数据,在显示之前对数据处理和筛选

语法:{{data | filter1(参数) | filter2(参数)}}

2、关于内置过滤器
vue 1.0 中内置许多过滤器,如:

currency,uppercase,lowercase、limitBy、orderBy、filterBy

vue 2.0中已经删除了所有内置过滤器,全部被废除

如何解决:

a.使用第三方工具 loadash、date-fns日期格式化、accounting.js货币格式化等
b.自定义过滤器

3.自定义全局过滤器

使用全局方法 Vue.filter

Vue:基本用法。

标签:play   any   组件   过滤   第三方   用户   双向数据绑定   最大的   native   

原文地址:https://www.cnblogs.com/yuezhen/p/10407675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!