【2019/1/2】Vue.js 基础内容

版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/85071105

书本：vue.js前端开发与快速入门

定义：用于开发Web界面的前端库，本身具有响应式编程和组件化的特征。

1，响应式编程即保持状态和视图的同步。

2，组件化理念和ReactJS异曲同工——一切都是组件，可以将任意封装好的代码注册成标签。Web组件化，创建可重用的定制元素，归根结底就是代码的复用。

vue-router和vue-resource支持路由和异步请求。

为什么选择Vue? 相比Angularjs和Reactjs，Vuejs一直以轻量级，易上手受到好评。

而且MVVM的开发模式，使得不需要再试图维护和数据统一上花费大量时间。

但是，VUE抛弃了对IE8的支持，在移动端支持Android4.2+和IOS7+。

基础特性

通过声明一个实例new Vue({…})标记当前页面的HTML结构，数据的展示以及相关事件的绑定。

var vm=new Vue({})，一个实例相当于MVVM模式中的viewmodel。

一、对象属性：

1，模板：el,template

2，数据：代理起data对象所有属性，而不会对传入的对象进行深拷贝

3，方法：methods对象定义方法，利用v-on指令监听DOM事件。支持自定义事件，初始化时传入events对象（vue.js2.0废除了），通过实例的$emits方法进行触发。

4，生命周期：内部运行机制：init - created - beforeCompile - compiled - attached - ready - beforeDestroy - destroyed

二、数据绑定

语法：1，文本插值，{{ name }}，为mustache语法，支持单次插值{{* name}}，再次更改VM实例属性值不会引起DOM变化，但是vue2.0废除了{{*}}，采用v-once代替，v-once = “name”  —— {{ name }}；

2，HTML属性，例如 <div id="id - {{ id }}"></div>但是vue2.0废除了这个写法，改用v-bind代替，

[code]<div v-bind:id="'id-'+ id"></div>或<div :id="'id-' + id"></div>

3，绑定表达式，放在mustache标签内的文本内容被称为绑定表达式，只能包含单个表达式，不支持js语句，不支持正则表达式。

4，过滤器，vue.js允许表达式后添加可选的过滤器，以管道符“|”指示。

例如，

[code]{{ name | uppercase}}
{{ name | filterA | filterB }}
{{ name | filterA arg1 arg2 }}//将name值作为第一个参数传入filterA，arg1，arg2作为第二，第三个参数

vue.js内置了10个过滤器，如下：

1. capitalize：首字符转为大写
2. uppercase：字符串转为大写
3. lowercase：字符串转为小写
4. currency参数为{String}[货币符号]，{Number}[小数位]，将数字转为货币符号，并会自动添加数字分节号。
5. pluralize参数为{String}single，[double,triple]，字符串复数化
6. json参数为[Number][indent]空格缩进数，与JSON.stringify()作用相同，将json对象数据输出成符合json格式的字符串。
7. debounce传入值必须是函数，参数可选，{Number}[wait]即延时时长，作用是当调用函数N毫秒后，才会执行该动作。
8. limitBy传入值必须是数组，参数为{Number}[limit]，{Number}[offset]。limit为显示个数，offset为开始显示数组下标。
9. filterBy传入值必须为数组，参数为{String | Function}targetStringorFunction，即需要匹配的字符串或者函数，in,(可选分隔符）；{String}[…searchKeys]为检索的属性区域。
10. orderBy传入值必须是数组，参数为{String|Array|Function},即指定排序策略。第二个为可选参数，{String}[Order]，即选择升序或者降序。order>=0为升序，order<0为降序。

但是，vue.js2.0已经去除了内置的过滤器。

5，指令

• 参数，v-bind可以在后面带一个参数用冒号隔开，src即为参数，此时

  [code]<img v-bind:src="avatar"/>
  等同于
  <img src="{{ avatar }}" />

 修饰符，以半角句号 . 开始，用于表示指令应该以特殊方式绑定。

[code]<button v-on:click.stop="doClick"></button>

在对应的DOM元素上绑定事件监听器，doClick为函数名，而stop即为修饰符，作用是停止冒泡。

三、计算属性：computed

setter方法

四、表单控件

v-model指令对表单元素进行双向数据绑定。

1，text

[code]<input type="text" v-model="message"/>
<span> {{ message }}</span>

2，radio

选中的radio元素值即为value值

3，CheckBox

单个勾选框和多个勾选框

单个勾选框，v-model即为布尔值。

多个勾选框，v-model使用相同的属性名称，且属性为数组

4，Select

单选时，即选中值，多选时需要绑定到同一个数组。

5，绑定value值，表单控件的值同样可以绑定在vue实例的动态属性上，用v-bind实现。

• CheckBox

五、class与style绑定

1，class绑定

2，内联样式绑定

六、模板渲染

前端渲染的优点在于：业务分离，后端只需要提供数据接口；计算量转移，减轻服务器压力。

后端渲染的优点在于：对于搜索引擎友好；首页加载时间短。

1，条件渲染

v-if，v-show,v-else,v-for四个指令。

例如：

 六、template标签用法

 

1. v-if、v-else作用是根据数据值判断是否输出该DOM元素，以及包含的子元素；
2. v-show根据条件显示元素，不同于1的点在于，无论绑定值是否为true，均会渲染并保持在DOM之中，绑定值的改变只会切换元素的css属性的display。
3. v-for 列表渲染：v-for = “item in items”。item为别名，items为data中的属性名。内置了$index变量，可以输出当前数组元素的索引。（index， item） in items。同时可以遍历对象。 

[code] <template v-if="yes">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</template>

用于同时渲染多个兄弟DOM元素

七、事件绑定和监听

v-on 监听DOM事件，绑定实例选项属性methods中的方法作为事件的处理器。

v-on后参数接受所有原生事件名称，例如click，mouseover，hover等

修饰符，v-on 主要修饰符如下，

• .stop等同于调用event.stopPropagation()
• .prevent等同于调用event.preventDefault()
• .capture使用capture模式添加事件监听器
• .self只当事件从监听元素本身触发才会触发回调。

按键修饰符，keyup.13,当输入回车时触发.（回车的keycode值为13） 

按键别名有：enter，tab,delete,esc,space,up,,down,left,right.

自定义别名：

[code]Vue.config.keyCodes.f1 = 12;

八，组件化开发，Vue.extend()