vue基础知识

引子

前端三大框架:

+Angular Google

Angular.js(1.x)

Augular(2.x)

+React (组件化) Facebook

+Vue.js  尤雨溪

架构模式: MVVM MVC

正文

1.引入 cdn or npm

2.创建全局对象

new Vue({

el: '#id',          获取所需区域

template: '#id',  绑定模板

data: {     保存数据

},

methods: {    保存方法/函数

},

filters: { 定义过滤器(如将所有的数字之前加上$)

}

computed: { 计算属性,

+内部有get获取,set设置

1.get获取是获取原始数据的

2.set是在自定义的方法修改时才会调用,要传参

注: 如果修改自定义的数据,才会触发set,过程为get-set-get,如果修改原始数据则只是会多次get;

+和methods的区别

1.computed中 获取的是结果,methods中 获取的是这个匿名函数

2.computed中有缓存,如果数据没有发生改变,就不进行计算;而methods则是通过调用它来事先计算

+如果直接写在{{}}显示数据的过程中去改数据,则太重了

}

watch{

+watch 监控数据是否发生变化

+watch 是异步的可以处理大量数据

+watch  中直接用原始数据命名,当数据发生改变时在匿名函数中传参

}

})

3.指令与引入

{{ }}  写入文本或是js表达式

{{值|过滤的方法}} 表示过滤,过滤的方法写在filters中

{{reserverMessage}} 在computed中加计算属性

v-html = ' '  在标签内写入指令,即可识别标签

v-bind:url='url' 简写为冒号    获取属性 动态修改

v-show = 'seen' 加style='display = none' 获取动态布尔值

v-if = 'seen' 直接删除标签 获取动态布尔值

v-if/v-else/v-else-if  条件渲染 

+如果条件满足就执行v-if中的,否则执行v-else中的

eg: 

   

        Username

       

   

   

      Email

     

   

v-on:事件名='函数名' 简写为@  添加事件

v-model: 双向数据绑定  data<====>视图

v-for: 列表循环 

+要生成哪个标签就把v-for写在哪个标签上,

+v-for 是一种遍历方法,可以遍历数组也可以遍历对象

+也可以写成v-for-of

+操作数组的方法

1.变异(操作原始数组)

pop,unshift,push,shift,slice(截取字符串),reverse,\

2.重塑(用新数组覆盖原始数组)

concat(拼接数组),filter(过滤),map

this.arr = this.arr.concat();

v-cloak:与[v-cloak]:{display: none}结合使用,v-cloak内部找到并改成display: block;

v-pre:  使内容以原始格式显示,所以应用场景就是,当内容有{{}}时也不被识别成vue的内容

自定义指令:

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：

name：指令名，不包括 v- 前缀。

value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

**key是作为一个对象的唯一标识

Vue 的生命周期

+一共八件事

直接写\

beforeCreate(){

},

created(){ // 请求数据

},

beforeMount() {},

mounted() {},

beforeUpdate() {},

updated() {},

beforDestory(){},

destory(){},

其他写法

destory: function() {}

事件传参

+在vue中要进行事件传参加小括号直接传即可

+如果是event的话写成 $event 的形式

修饰符

事件修饰符

.stop 阻止事件冒泡

.prevent 阻止默认事件

.capture 阻止事件捕获

.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的

.once 事件只执行一次 ******组件

+ 修饰符可以连写

+注意修饰符的顺序

按键修饰符

.enter    回车键

.tab tab键

.delete    删除和退格

.esc       

.space

.up

.down

.left

.right

+特别的,设置了部分常用的键

+自定义按键别名

自定义  filter drective 按键别名

+全局  filter

-  定义一个全局对象('名字',传参的匿名函数),注意一定要写在全局vue之前

Vue.filter('my-filter',function (value){

返回处理过后的值

charAt(下标)

})

+局部

- vue有属性filters

filters: {

函数名: function (value) {

返回处理过后的值

注意函数和方法的区别

}

}

自定义指令 directive 指令

+ 全局

- Vue.directive('命令名字',funtion(value){

inserted: function(el) {

可获取到该元素

el.focus()

}

})

+局部

new Vue({

el: '#box',

data:  {

},

directives: {

指令名: {

// inserted 自定义属性内置必填,意为插入

inserted: function(el){

el.focus();

// 元素聚焦

}

}

}

})