一. Vue中基础知识
1. 指令-插值 : {{ }}
、v-html
插入文本:双花括号
语法:<any>{{ mes }}</ant>
作用:将数据绑定到视图
插入HTML: v-html
语法:<any v-html="rawHtml"></any>
作用:输出真正的html
2. 指令-循环指令 : v-for
语法1:
<any v-for="item in array"></any>
语法2:
<any v-for="(item,index) in array"></any>
作用:
在遍历array集合时,将临时变量保存在 item 、index 中,
创建多个any标签
3. 指令-选择指令 : v-if
、v-else
语法:<any v-if="表达式"></any>
<any v-else-if="表达式"></any>
<any v-else="表达式"></any>
作用:
根据表达式执行结果的真假,来决定是否将当前元素挂载到DOM树
4. 指令-事件绑定 : v-on
语法:
<any v-on:eventName="handleEvent"></any>
简写:
<any @:eventName="handleEvent"></any>
作用:
给指定的元素 将handleEvent的方法绑定给指定eventName事件
5. 指令-属性绑定 : v-bind
语法:
any v-bind:myProp="表达式"></any>
简写:
<any :myProp="表达式"></any>
作用:
将表达式执行的结果 绑定 到当前元素的myProp属性
动态绑定src:
<img v-bind:src="'img/'+myImg" alt="">
动态绑定style:
<p :style="{backgroundColor:myBGColor}">动态样式绑定</p>
动态绑定class:
<div :class="{ active: isActive }"></div>
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">
6. 指令-双向数据绑定 : v-model
方向1: 数据绑定到视图
方向2:将视图中(表单元素)用户操作的结果绑定到数据
基本语法:<表单元素 v-model="变量"></表单元素>
二. 组件化
1. 组件的创建
1.全局组件
Vue.component('my-com',{
template: '<div>A custom component!</div>'
})
2.局部组件
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child
}
})
3.直接在template属性中指定模板中内容
// 创建实例
new Vue({
// ...
components:{
'my-component':myComponent
}
})
// 定义模板对象
var myComponent={
template:`<span>{{mes}}<span>`,
data () {
return {
mes: "chenzhijie"
}
},
methods:{}
}
2. 组件的使用
- 作为普通的标签去使用
<my-com></my-com>
3. 注意事项
- 组件的id和使用遵循
a-b-c
命名方式 - 全局组件可以在
id
为#example
的范围内的任何组件直接调用 - 局部组件只能在父模板中直接调用
三. 自定义指令
创建和使用:
// 创建
Vue.directive('change',{
bind:function(el,bindings){
// 首次调用
},
insert:function(el){
// 被绑定元素插入父节点时调用
},
update:function(el,bindings){
// 只要有数据变化都会调用
},
unbind:function(){
// 解绑时调用
}
})
// 使用
<any v-change="count"></any>
四. 过滤器
1. 创建过滤器:
// 1. 全局过滤器(在创建Vue实例之前定义)
Vue.filter('myFilter',function(myInput){
// myInput是在调用过滤器时,管道前表达式执行的结果
// 针对myInput,按照业务需求做处理
// 返回
return '处理后的结果'
})
new Vue({
...
})
// 2. 局部过滤器 (在组件的选项中定义)
filters: {
myFilter: function(myInput){
return '处理后的结果'
}
}
2. 使用过滤器:
在双花括号
{{}}
中:
{{ message | myFilter}}
过滤器可以串联:
{{ message | filterA | filterB }}
接收参数:
{{ message | filterA('arg1', arg2) }}
在
v-bind
中 :
<div v-bind:id="rawId | myFilter"></div>
五. 常用属性
1. 计算属性 : computed
用于模板中,搞定复杂的业务逻辑,因为有依赖缓存
// 指定计算属性 computed : { myHandle : function () { return 数据 } } // 调用 <any>{{myHandle}}</any>
2. 侦听器 : watch
表单元素的双向数据绑定
// 监听 watch : { // 如果 myValue 发生改变,这个函数就会运行 myValue : function (newValue,oldValue) { ... } }
六. 生命周期
四个阶段 ( 8个钩子 )
- create :准备工作(数据的初始化…),
beforeCreate
/created
- mount :挂载前后针对元素进行操作,
beforeMount
/mounted
- update :数据发生变化,
beforeUpdate
/updated
- destroy :清理工作(关闭定时器、集合清空..),
beforeDestroy
/destroyed
七. 组件间通信
1. 父与子通信 (props , down):
1.发送
<son myName="chenzhijie"></son>
2.接收
到son组件:
// 简单语法 数组
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.message 来使用
template: '<span>{{ message }}</span>'
})
// 对象语法,提供校验
Vue.component('child', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
},
// 检测类型 + default (对象)
desc:{
type:Object,
default(){
return {
all:'全部',
positive:'满意',
negative:'不满意'
}
}
}
}
}
2. 子与父通信 (events , up):
1.绑定
<son @customEvent="handleEvent"></son>
methods:{
handleEvent:function(mes){
// mes 就是子组件传过来的100
}
}
2. 触发(子组件)
this.$emit('customEvent',100);
3. 在父组件中,得到子组件中的数据、方法 : ref
1. 指定ref属性
<son ref="mySon"></son>
2. 根据ref得到子组件实例
this.$refs.mySon
4. 得到父组件实例 :this.$parent
5. 兄弟组件通信 :
1 var bus = new Vue();
2.发送方
bus.$emit('eventName',123);
3.接收方
bus.$on('eventName',function(msg){})
八. 路由模块
1. SPA的基本概念和工作原理
SPA:single page application 单一页面应用程序,只有一个完整的页面;
它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。
比如 webApp
工作原理
- 解析地址栏
- 根据路由地址,找到要加载的页面
- 发起ajax请求
- 向指定的容器中插入加载来的页面
2. 基本用法
1.引入vue-router
2.使用<router-link>组件来导航
<router-link to="/a"></router-link>
<router-link to="/b"></router-link>
<router-link to="/c"></router-link>
3.指定路由出口,路由匹配到的组件在此渲染
<router-view></router-view>
4.定义路由组件
// 可以从其他文件import
const a = { template: '<div>a</div>' }
const b = { template: '<div>b</div>' }
const c = { template: '<div>c</div>' }
5.定义路由
const routes = [
{ path: '/a', component: a },
{ path: '/b', component: b },
{ path: '/c', component: c }
6.创建 router 实例,然后传 `routes` 配置
// 还可以传别的配置参数,
const router = new VueRouter({
linkActiveClass:'active',
routes // (缩写)相当于 routes: routes
})
4.创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});