myVueNode
一 Vue特性
1.数据绑定
2.组件化
<div id="myVue">{{message}}</div>
var myVue = new Vue({
el: "#myVue",
data: {
message: "hello"
}
})
Vue.js 的使用都是通过构造函数 Vue({option}) 创建一个 Vue 的实例：
var vm = new Vue({})。一个 Vue 实例相当于一个 MVVM 模式中的
2.1.1 vue模板
el:类型为字符串，DOM元素或函数。作用是为实例提供挂载元素。
template:类型为字符串,默认会将temlpate元素替换挂载元素并合并挂载元素和模板根节点的属性（如果属性具有唯一性，类似 id，则以模板根节点为准）。如果 replace 为 false，模板 template 的值将插入挂载元素内。通过 template 插入模板的时候，
挂载元素的内容都将被互联，除非使用 slot 进行并发
div class="tpl">my name is lbb</div>
<script id="tpl" type="x-template">
<div class="tpl">my name is lbb</div>
</script>
<script type="text/javascript">
var myVue = new Vue({
el: "#myVue",
template: "#tpl",
})
</script>
2.1.2 vue数据
Vue.js 实例中可以通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定
并使用。需要注意的是，如果传入 data 的是一个对象，Vue 实例会代理起data 对象里的所有属性，而不会对传入的对象进行深拷贝。另外，我们也可以引用 Vue 实例 vm 中的 $data 来获取声明的数据
<div id="myVue">{{text}}</div>
<script type="text/javascript">
var dataArr = {
"text": "1"
}
var vm = new Vue({
el: "#myVue",
data: dataArr
})
vm.$data === dataArr;//true
vm.a === dataArr.a;//true
//设置属性也会影响到原始数据
vm.a = 2;
data.a;// 2
//反之亦然
data.a = 5;
vm.a;// 5
</script>
需要注意的是，只有初始化时传入的对象才是响应式的
2.1.3 方法
我们可以通过选项属性methods对象来定义方法，并且使用v-on指令来监听DOM事件
另外，Vue.js 实例也支持自定义事件，可以在初始化时传入 events 对象，通过实例的
$emit 方法进行触发。这套通信机制常用在组件间相互通信的情况中，例如子组件冒泡触发父组件事件方法，或者父组件广播某个事件，子组件对其进行监听等
<button v-on:click="alert">alert</button>
<script type="text/javascript">
var vm = new Vue({
el:"#mu",
data: {
a:1
},
methods:{
alert: function(){
alert(this.a);
}
},
events: {
'event.alert': function(){
alert("event.alert"+this.a)
}
}
})
vm.$emit('event.alert');
</script>
2.1.4生命周期钩子
Vue.js 实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑
2.2.1 数据绑定语法
1.文本插值
Vue.js 2.0 去除了 {{*}} 这种写法，采用 v-once 代替。以上模板需要改写为 <span v-once=”name”>{{name}}</span>
<div id="myVm">
<div>{{a}}</div>
<div>{{*b}}</div>
</div>
<script>
var vm = new Vue({
el: "#myVm",
data:{
a:"5",
b:"5"
}
})
vm.a = 6;
vm.b = 6;
</script>
2.HTML属性
Mustache 标签也同样适用于 HTML 属性中
<div id="id-{{id}}"></div> // <div id="id-1"></div>
Vue.js 2.0 中废弃了这种写法，用 v-bind 指令代替，<div v-bind:id="'id-' + id"/></div> 代替，或简写为 <div :id="'id-' + id"></div>
<div id="myVm">
<div id="id-{{id}}">old</div>
<div v-bind:id="'id-'+id">new</div>
<div :id="'id-'+id">new-sp</div>
</div>
<script>
var vm = new Vue({
el: "#myVm",
data:{
id:"lbb"
}
})
</script>
3.绑定表达式
每个绑定中只能包含单个表达式，并不支持 JavaScript 语句，否则 Vue.js 就会抛出warning 异常。并且绑定表达式里不支持正则表达式，如果需要进行复杂的转换，可以使用过滤器或者计算属性来进行处理
<body id="mu">
<div>{{arr+1}}</div>
<div>{{arr == 0?"a":"b"}}</div>
<div>{{name.split("").join("|")}}</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#mu",
data:{
arr:"aa",
name:"ABCD"
}
})
</script>
4.过滤器
Vue.js 允许在表达式后添加可选的过滤器，以管道符“|”指示
Vue.js 将 name 的值传入给 uppercase 这个内置的过滤器中（本质是一个函数），返回字符串的大写值。同时也允许多个过滤器链式使用 也允许传入多个参数
<body id="mu">
<div v-for="c in count">{{c | pluralize 'item'}} {{c | pluralize 'aa' 'bb' 'cc'}}</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#mu",
data:{
count:[1,2,3,4],
}
})
</script>
Vue.js 内置了 10 个过滤器，下面简单介绍它们的功能和用法。
① capitalize ：字符串首字符转化成大写
② uppercase ：字符串转化成大写
③ lowercase ：字符串转化成小写
④ currency 参数为{String}[货币符号] ,{Number} [小数位]，将数字转化成货币符号，
并且会自动添加数字分节号
{{ amount | currency ' ￥' 2 }} // -> 若 amount 值为 10000，则输出￥10,000.00
⑤ pluralize 参数为 {String} single, [double, triple]，字符串复数化。如果接收的是一个参数，那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数，则会被当成数组
处理，字符串会添加对应数组下标的值。如果字符串的个数多于参数个数，多出部分会都添加最后一个参数的值。
<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pluralize 'st''nd' 'rd' 'th' }}</p>
⑥ json 参数为 {Number}[indent] 空格缩进数，与 JSON.stringify() 作用相同，将 json对象数据输出成符合 json 格式的字符串。
⑦ debounce 传入值必须是函数，参数可选，为 {Number}[wait]，即延时时长。作用是当调用函数 n 毫秒后，才会执行该动作，若在这 n 毫秒内又调用此动作则将重新计算执行时间。
<input v-on:keyup ="onKeyup | debounce 500"> // input元素上监听了keyup事件，并且延迟 500ms 触发
⑧ limitBy 传入值必须是数组，参数为 {Number}limit，{Number}[offset], limit 为显示个数，offset 为开始显示数组下标。
<div v-for="item in items | limitBy 10"></div> // items 为数组，且只显示数组中的前十个元素
⑨ filterBy 传入值必须是数组，参数为 {String | Function} targetStringOrFunction，即需要匹配的字符串或函数（通过函数返回值为 true 或 false 来判断匹配结果）；“in” （可选
分隔符）；{String}[…searchKeys]，为检索的属性区域。
<p v-for="name in names | filterBy '1.0'">{{name}}</p> // 检索 items 数组中值包含 1.0 的元素
<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json}}</p>// 检索 items 数组中元素属性 name 值为 1.0 的元素输出。检索区域也可以为数组，即 in [name,version]，在多个属性中进行检索
<p v-for="item in items | filterBy customFilter">{{ item | json}}</p> //使用自定义的过滤函数，函数可以在选项 methods 中定义
methods : {
customFilter : function(item) {
if(item.name) return true // 检索所有元素中包含 name 属性的元素
}
}
⑩ orderBy 传入值必须是数组，参数为 {String|Array|Function}sortKeys，即指定排序策略。这里可以使用单个键名，也可以传入包含多个排序键名的数组。也可以像 Array.Sort()
那样传入自己的排序策略函数。第二个参数为可选参数 {String}[order]，即选择升序或降序，order>=0 为升序，order<0 为降序。下面以三种不同的参数例子来说明具体的用法：
单个键名：<p v-for="item in items | orderBy 'name' -1">{{item.name}}</p>// items 数组中以键名 name 进行降序排列
多个键名：<p v-for="item in items | orderBy [name,version] ">{{item.name}}</p> //使用 items 里的两个键名进行排序
自定义排序函数 : <p v-for="item in items | orderBy customOrder">{{item.name}}</p>
methods: {
customOrder: function (a, b) {
return parseFloat(a.version) > parseFloat(b.version) // 对比 item 中version 的值的大小进行排序
}
}
需要注意的是，Vue.js 2.0 中已经去除了内置的过滤器，
5.指令
Vue.js 也提供指令（Directives）这一概念，可以理解为当表达式的值发生改变时，会有些特殊行为作用到绑定的 DOM 上
① 参数
指令 v-bind 可以在后面带一个参数，用冒号（:）隔开，src 即为参数。此时 img 标签中的 src 会与 vm 实例中的 avatar 绑定
<img v-bind:src="avatar" /> ==》 <img src="{{avatar}}" />
② 修饰符
修饰符（Modifiers）是以半角句号 . 开始的特殊后缀，用于表示指令应该以特殊方式绑定。
<button v-on:click.stop="doClick"></button>v-on 的作用是在对应的 DOM 元素上绑定事件监听器，doClick 为函数名，而 stop 即为修饰符，作用是停止冒泡，相当于调用了 e. stopPropagation()。
2.1.2 计算属性
在项目开发中，我们展示的数据往往需要经过一些处理。除了在模板中绑定表达式或者
利用过滤器外，Vue.js 还提供了计算属性这种方法，避免在模板中加入过重的业务逻辑，保证
模板的结构清晰和可维护性。
<body id="mu">
<div>{{firstName}}</div>
<div>{{secondName}}</div>
<div>{{fullName}}</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#mu",
data:{
firstName:"L",
secondName:"BB"
},
computed : {
fullName : function(){
return this.firstName+ " " +this.secondName
}
}
})
</script>
Setter
如果说上面那个例子并没有体现出来计算属性的优势的话，那计算属性的 Setter 方法，则在更新属性时给我们带来了便利
浙公网安备 33010602011771号