vue散碎知识点学习
2024-08-21 14:38:03
1. vue散碎知识点学习
1.1. 特点
- 数据渲染/数据同步
- 组件化/模块化
- 其他功能路由，ajax，数据流
1.2. Vue.js学习资源
- vuejs中文官网：
http://cn.vuejs.org - vuejs源码：
https://github.com/vuejs/vue - vuejs官方工具：
https://github.com/vuejs
1.3. Vue实例对象
var my = new Vue({
el: '#app',
template: '<div>{{}}</div>',
data:{
fruit: 'apple'
}
})
1.4. 绑定事件
//绑定键盘按下enter事件
v-on:keydown.enter=""
v-on缩写@
:class="{odd:index%2}" 判断odd什么时候需要显示出来
v-bind:缩写:
//修改数组
Vue.set(this.list, 1, {
name: 'pinaapple',
price: 256
})
this.$emit("xxx") 子组件提交事件，父组件可以监听
watch：{
}
用来监听数据变化
1.5. 父子组件
子组件调用父方法
父组件 @my-event="getMyEvent"绑定方法 监听事件
子组件 触发方法，传入参数
methods: {
emitMyEvent(){
this.$emit('my-event', this.hello)
}
}
父组件调用子方法
父组件
componentA number='12' @my-event="getMyEvent">
<p slot="header">header</p>//插槽
<p slot="footer">footer</p>
</componentA>
子组件
<div>{{number}}</div>
<slot name="header">no header</slot>
<slot name="footer">no footer</slot>
props: {
number:[Number,String]
}
动态绑定组件
<p :is="currentView"></p>
import ComA from './components/a'
components: {
ComA
},
data:{
currentView: 'com-a'
}
1.6. 缓存
<keep-alive></keep-alvie>包裹
1.7. 元素过度
- 相同元素key区分
- transition动画
1.8. 工具推荐
- MobaXterm是ssh,ftp工具，
https://mobaxterm.mobatek.net/ - FinalShell，可用于mac，
http://www.hostbuf.com
1.9. 路由
- 在路径加参数可以在路由到的组件拿到
main.js
routes: [
{
path: '/apple/:color',
component: Apple
},{
path: '/banana',
component: Banana
}
]
Apple.vue
methods: {
getParams(){
console.log(this.$route.params)
}
}
1.10. vue实例
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
<span v-once>这个将不会改变: {{ msg }}</span>
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
1.11. 计算属性vs侦听属性
不要滥用watch，有时候可以用computed代替
1.12. class与Style绑定
1.12.1. 对象语法
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。
1.12.2. 数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为：
<div class="active text-danger"></div>
可以用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
1.13. 条件渲染
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no
最新文章
- 零OCR基础6行代码实现C#验证码识别
- sql获取汉字的拼音首字母
- 2.openssl rsa/pkey
- 转 异常处理汇总 ~ 修正果带着你的Net飞奔吧！
- 转：设计模式-----桥接模式(Bridge Pattern)
- python邮件收发SAMPLE
- MySQL 的 read_buffer_size 参数是如何影响写缓冲和写性能的？
- Markdown 学习笔记: Basics
- 2-4. BCD解密(10)
- Django数据模型——通用字段选项
- R语言 一套内容 从入门 到放弃
- 环境变量误删path找回方法与mysql基础命令
- Eclipse 中 Debug 调试 java 代码一直报 Source not found
- Kibana5.x界面简要介绍（含x-pack插件）
- 实战dataguard主从切换
- java保存繁体字到数据库时就报错Incorrect string value: '\xF0\xA6\x8D\x8B\xE5\xA4...' for column 'name' at row 1
- docker：定制node.js的版本
- 2018/03/16 每日一个Linux命令 之 rm
- linux 获取时间后--自定义时间格式
- Mysql 千万级快速查询|分页方案
热门文章