vue-学习笔记-基础1

1、每个vue.js应用都是通过构造函数Vue创建的一个Vue的根实例 启动的

    var vm = new Vue({

　    　//选项

    })

2、实例化Vue时，需要传入一个选项对象，它可以包含数据、模版、挂在元素、方法生命周期钩子等选项

3、每个Vue实例都会代理其data对象里所有的属性。只有这些被代理的属性是响应的，如果在实例创建之后添加新的属性(test)到实例上，它不会触发试图更新。

var data = {a:1,b:2};
var vm = new Vue({
		el:"#box",
　　　　data:data
　　});
data.test = 'aaa';
console.log(vm.test); //undefined
console.log(vm.a === data.a);  //true
vm.a = 11;
data.b = 22;
console.log(data.a); //11
console.log(vm.b); //22
console.log(vm.$data === data); //true

4、指令（是带有v-前缀的特殊属性，作用是当其表达式的值改变时相应地将某些行为应用到DOM上）

　　v-text    更新元素的文本内容，即元素中除去标签后剩下的所有文本内容，如果只是部分更新，可以改成将需要更新的部分用{{}}括起来

　　v-html   更新元素的innerHTML，即元素中所有包括其子元素标签和文本内容

　　v-show  根据表达式的真假值，切换元素是否显示或隐藏

　　v-if        根据表达式的真假值，切换元素即它的数据绑定或组件被重建或销毁    

　　v-else    搭配v-if、v-else-if

　　v-for      基于源数据多次渲染元素或模板块   源数据是数组 item,index  ; 对象  value,key,index

　　v-on       缩写 @，绑定事件监听器。用于普通元素上时，只能监听 原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件 

　　v-bind     动态绑定一个或多个特性，或一个组件prop到表达式

　　　　　　　在绑定class或style特性时，支持其他类型的值，如数组或对象

　　　　　　　没有参数时，可以绑定到一个包含键值对的对象

　　v-model   在表单控件或组件上创建双向绑定

　　v-pre       不需要表达式。跳过这个元素和子元素的编译过程，可以用来显示原始{{}}标签。跳过大量没有指令的节点会加快编译。

　　v-cloak    不需要表达式。和CSS规则如 [v-cloak]{display:none}一起用，这个指令以隐藏未编译的{{}}标签知道实例准备完

　　　　　　　　[v-cloak]{display:none;}

　　　　　　　　<div v-cloak>{{message}}</div>  //直到编译结束，{{message}}不会直接显示在页面上

　　v-once      不需要表达式。只渲染元素和组件一次，随后的重新渲染，元素、组件及其所有的子节点将被视为静态内容被跳过

5、参数

一些指令能接受一个“参数”，在指令后以冒号指明

6、修饰符

以半角句号.指明的特殊后缀，用于指出一个指令以特殊的方式绑定

7、过滤器

过滤器可以用在 mustache插值 和 v-bind表达式。添加在js表达式的尾部，由管道符标识。过滤器可以串联，如果是函数，可以接受参数

设计的目的主要是用于文本转换，在其他指令中实现更复杂的数据变换，应使用计算属性

{{message | capitalize}}

<div v-bind:id="rawId | formatId">