标签：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
标签：play any 组件 过滤 第三方 用户 双向数据绑定 最大的 native
原文地址：https://www.cnblogs.com/yuezhen/p/10407675.html
