新开篇关于vue

参考链接:http://cn.vuejs.org/v2/guide/instance.html

 

 

了解vue组件的生命周期:

 

1.beforeCreate 即将创建

 

2.created 创建

 

3.beforeMount  即将挂载

 

4.mount。挂载

 

5.beforeUpdate 即将更新

 

6.updated 更新

 

7.beforeDestory 即将摧毁

 

8.destoryed 消灭

 

上述方法都能够在 el 方法同层内进行重写

 

 

构造器方法  new Vue()  

扩展方法 Vue.extend()

 

属性以及方法

属性: 属性的任何设置都会影响到原始数据

对象.$属性 就等于其属性  只不过是用来防止混淆的

对象.$方法 也是同样

 

 

 

 

关于vue的模板语法

插值: 使用{{}}方法插入值

html: v-html 进行标签修饰即可

属性绑定 v-bind:需要绑定的属性 = “被绑定属性”

 

 

关于vue过滤器部分

该部分可以在filters方法内进行写入,

也能够在computed内使用计算属性(计算属性能够在后期进行了解)进行过滤

 

关于vue计算属性

计算属性在标签中也是实用{{}}来进行调用,然后在computed方法内进行实现,以及return进行过滤。此处的computed方法专门用于存储方法

*计算方法能够实现的,methods也能够实现。然而他们的不同在于计算属性是基于其依赖缓存,即传入参数不变,方法不会掉用,而是使用缓存进行返回

$watch方法 ,在watch内声明的属性在发生变化之后能够实现其后实现的方法,即属性变化,方法即被掉用,参见watch.html

 

关于计算属性setter

类似于oc内的get set方法,能够在方法的set get内进行数据处理

同时,属性也要在computed内进行方法的重写

 

关于观察watchers

用于监视设定的属性,属性改变后即会触发相关方法进行处理。

 

关于html与css,class的绑定

class

对象语法绑定:使用v-bind方法进行class绑定,可以与对象进行绑定,包括复杂对象

数组语法绑定:类似于对象绑定,只不过对象变为数组

组件绑定:即上述两种方式在组件上的应用

 

css

使用v-bind:style 方式进行绑定css属性

对象语法绑定<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

数组语法绑定<div v-bind:style="styleObject"></div>

styleObject对象由data内进行声明

自动添加前缀

 

关于条件渲染v-if

普通v-if <h1 v-if="ok">Yes</h1> ok需要返回布尔值 

<template>中的v-if template标签酱整个需要条件 渲染的部分都包含起来进行判断,然后决定其内部的全部标签的渲染

v-else 使用后得到类似于if 的条件渲染效果

v-else-if 使用后得到类似于elseif条件渲染效果

key控制条件渲染的复用 :key值设置成同样或者未设置,组件将被复用,ke设置成不一样时,组件将被重新初始化,并且无保存

v-show于v-if:show方法大体与if相同,但是不支持template标签。并且if为惰性,未执行部分时不会进行编译,但show的话,所有情况都会编译保留,对于不同的情况只是作出简单的css切换

 

关于列表渲染v-for

基本用法:<li v-for="todo in todoList" ><div>{{todo.message}}</div></li>

template用法:该用法类似于template的if版本,能将多个标签进行列表渲染

对象迭代:同样能够对对象内的各个属性进行for,参数能够包含参键值,键名与索引

整数迭代:for n in 10

组件使用 : 暂时未能明白

另:数组更新检测办法:

变异方法会引起视图更新,非变异方法则不会引起视图的更新,(变异方法会引起原数据的变化,非变异方法则是对数据的副本进行操作),另外一种选择则是使用计算属性

 

 

关于事件处理器

监听事件  <button v-on:click="counter += 1">增加 1</button>

方法事件处理器:将处罚方法写在methods内

内联处理器方法:带有参数传值的方法事件处理器

事件修饰符:查看api

按键修饰符:查看api

按钮修饰符:查看api

 

 

关于表单控件绑定:v-model

基础用法

文本:直接使用{{}}方法

多行文本:将data属性设置为数组即可

复选框:v-model同值时,将data属性设置为数组就可以完成复选

单选按钮:input的type设置为radio,然后v-model相同就可以设置为单选按钮

选择列表

单选列表:data绑定bind到一个字符串类型

多选列表:data绑定bind到一个数组类型

动态选项:将data内的数组使用v-for方式在标签上列表渲染就可以得到,当然value也要进行数据绑定

绑定value:大致就是使用v-model 与value进行配合使用

复选框:进行复杂的数据绑定

单选按钮:同复选框

选择列表设置:即进行value的数据绑定,但是绑定的为对象

修饰符与组件:暂时未能明白

 

 

 示例代码部分

 

 

原文地址:https://www.cnblogs.com/thxios/p/6497978.html