关于vue1.0

vue 1.0引入vue.js

简介vue

1.首先，了解vue的生命周期

周期	解释
init	组件刚刚被创建，但是Data、method等属性还没有被计算
create	组件创建已经完成，在加载数据中加载
beforeCompile	模板编译之前加载
compiled	编译完成后加载
ready	组件准备加载的时候加载
attached	在vm.$el从Dom时调用
datched	在vm.$el从Dom删除时调用
beforeDestory	组件销毁之前
destory	组件销毁之后

什么是VUE

vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。
Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。

vue 1.0的语法

var vm = new Vue({　
　　el: "选择器",  挂载到页面的那个元素里，即确定vue的作用范围  外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作
　　a: '',  //自定义属性 外部可通过vm.$options访问
　　data: { }, //实例属性都在这里面，外部通过实例名,即vm.$data调用
　　computed: { }, //计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性
　　method: { }, //实例方法都在这里
　　watch: { }, //对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在 外部通过$.watch调用
　　//注意：以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问
　　//在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入：　　　
　　created: function(){ 实例已经创建 }
　　beforeCompile: function(){ 模块编译之前 }
　　compiled: function(){ 模块编译之后；即模板占位符被是内容替换}
　　ready: function(){ 模板插入到文档中了；相当于window.onload }//Vue2.0已改为mounted
　　注意： 以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用 实例名.$destory() 才执行
　　beforeDestroy: function(){ 对象销毁之前 }
　　destroyed: function(){ 对象销毁之后 }
});

Vue对象解析：

1，对象属性

data、el、options、watch、computed

2，对象方法

生命周期之钩子函数

3，对象实例访问和调用属性和方法

A:实例属性调用： $options、$options、el、 $data、$data、watch 　　这里着重说下$watch，它的一般语法为：*

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 });     --浅度监听

如果监听的属性是基本数据类型，上面用法是没有问题的，但如果监听的属性是对象，则对象内部的数据有变化，上面写法是监听不到的，需要进行一个参数进行深度监听，具体语法如下:

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 },{deep: true});　　--深度监听

B:实例方法调用： $mount()、$mount()、log()、$destroy()

4，自带过滤器&自定义过滤器

A：vue自带的过滤器有：
　　　capitalize(首字母大写)、uppercase、currency、json( 相当于JSON.Stringify() )、debounce(后跟秒数，配合事件，延迟执行)
　　　　limitBy(参数1, 参数2) 常用语v-for数组，限制输出数量和从哪输出；参数1代表输出几个，参数2代表从第几个输出
　　　　filterBy(参数) 过滤数据，过滤含有参数的数据，配合input输入框，通过输入变量过滤，打到热搜索的效果
　　　　orderBy(参数) 对数据排序，参数为1时为正序，为-1时则倒序，其他什么参数呢？所以1和-1基本是常用情况
　　B：自定义过滤器语法 （对于时间戳的处理是比较常用的自定义过滤器）

Vue.filter(“过滤器名称”,function(参数…){
　　　　… //业务处理
　　　　return …;
　　});

5，自带指令和自定义指令

指令是对HTML语法的扩展，必须以v-开头，一般我们口中的指令实际是指属性指令，使用该属性指令的元素讲具有对应的属性功能，下面的C则是指元素指令，与属性指令有所区别

　　A：自带指令：v-if、v-show、v-else、v-module、v-text、v-html、v-bind、v-on、v-el、v-cloak...

这里着重说下v-text和v-cloak：在模板中我们调用实例属性数据时通常这样{{ 实例属性 }}，这样在网速比较慢的情况下，页面出现闪烁的时候会把花括号和里面的原始内容显示出来，这样用户体验不好，处理这种情况有2种方式：

1, 在较大段落元素上使用v-clock指令，并设置该元素的css: display:none

2, 使用v-text/v-html代替花括号即可，Vue2.0也支持这样做，且花括号方式可能被取消

B：自定义指令语法：

Vue.directive(“指令名称”,function(…){
　　　　this.el.style.background = 'red'; //这里的this代表new出来的实例，this.el代表原生的dom元素
　　});
模板中使用v-指令名称进行使用，或v-指令名称=“参数”，可以在调用指令是进行传参

定义指令名称时不加v-，模板使用时加v-

C: 自定义元素指令 （据说用处不大，可忽略跳过，它所想要达到的效果，组件已超越）

Vue.elementDirective(“自定义元素名称”,{

bind: function() {};

});
它不支持B情况语法，但B情况语法却默认也是bind

6，自定义键盘信息

Vue.directive('on'),keyCodes.ctrl = 17; //17是ctrl的键码 等号前的ctrl是定义ctrl的别名，可以随便取，实际绑定的就是键盘上的ctrl键
模板调用@keydown.ctrl ="自定义方法"