文章目录
- vue常用属性
- 生命周期
- 模版语法
- 自定义组件
- 全局注册
- 单文件组件
- 路由
本文全部参考Vue2
简介：Vue是一个数据响应式，MVVM模型的JS框架
官网：https://v2.cn.vuejs.org/v2/guide/
API：https://v2.cn.vuejs.org/v2/api/#methods
引用：
或者
示例：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
vue常用属性
| 属性名 | 参数范围 | 限制 | 注意点 | |
|---|---|---|---|---|
| el | 绑定Vue实例挂载的DOM元素 | String|Element | 只在用 new 创建实例时生效 | 实例挂载之后，元素可以用 vm.$el 访问 |
| data | 数据 | Object|Function | 自定义组件实例时只接受Function参数，正常Vue实例一般都是不含状态行为的Object | 实例创建之后，可以通过 vm.$data 访问原始数据对象 |
| methods | 函数 | { [key: string]: Function } | methods中不要使用箭头函数，this将不会指向Vue实例 | 可以直接通过 VM 实例访问这些方法 |
| computed | 计算属性 | { [key: string]: Function |{ get: Function, set: Function } } | 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。计算属性默认只有 getter | |
| watch | 监听回调 | { [key: string]: string|Function|Object|Array} | 值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property |
生命周期
ps:生命周期函数参数只能是Function,具体几个钩子函数参考官方手册，用时查
模版语法
#文本
{{message}}
{{message.split('')}} //支持JS表达式
v-once 无值 //表示该值只渲染一次
v-html 值为String
v-bind:[attribute] 缩写 :[attribute] //支持属性值中使用JS表达式
v-if 值为String //控制是否移除该元素
v-show 值为String //控制是否展示，DOM元素一直在
v-on:[Event] 缩写 @[event] //绑定事件 支持属性值中使用JS表达式
v-for 值为String "item in items" "(value,name) in object" //可以遍历数组或者对象里属性
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
v-model,v-for,v-bind组合使用
Selected: {{ selected }}
注意：v-on:[event] 事件处理支持事件修饰符
键盘修饰符
系统修饰符
自定义组件
ps：Vue自定义组件只能在Vue实例里面使用
组件中常用属性
| 属性名 | 作用 | 参数范围 | 限制 | 注意 |
|---|---|---|---|---|
| data | Object|Function | |||
| props | 设定自定义组件元素属性 | Array | Object | 可以指定该元素属性限制条件 | |
| template | 模板，会替换原有的DOM元素 | String | 板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。template值字符串里可以使用Vue的数据绑定{{param}} | |
| 组件属性，可以局部注册 | Object |
全局注册
// 简单语法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法，提供验证
Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
单文件组件
.vue后缀文件，基本就是Vue文件里 template,script,style 一个网页需要的元素放在一个文件里，不同的设计思路
{{ greeting }} World!
路由
引入：https://unpkg.com/vue-router@3/dist/vue-router.js
使用官方vue-router，使用Vue-router3系列版本适配Vue2
一句话介绍客户端路由：输入不同的url，页面渲染不同的内容。
在Vue中，就是不同的url可以渲染不同的Vue组件
具体细节参考官方链接：https://v3.router.vuejs.org/zh/
一般掌握常规路由用法基本的项目完全够用
