修饰符
- @click.stop 阻止事件冒泡
- @click.once 执行一次
- @click.prevent 阻止默认行为
- 一系列按键修饰符
计算属性
计算属性：就是Vue实例中一个有计算data数据功能的属性
应用场景：一条数据在不同的位置想展示不同的结果
<div id="demo">
{
{
xiaoming}}
</div>
<div id="demo">
{
{
xiaohong}}
</div>
<script>
new Vue({
el:"#demo",
data:{
text:"abcdefghijklmn"
},
computed:{
xiaoming(){
//必须return处理工作
return this.text.toUpperCase.substr(1,3),
}
xiaohong(){
return this.text.toUpperCase
}
}
}),
</script>
计算属性与方法的区别 (computed 与 methods)
同样都是对数据进行处理并且在视图页面中能展示处理之后的数据
计算属性与方法有什么区别？
当数据没有改变的时候无论计算属性被调用了多少次 他都会只执行一次原因是因为 他在第一次 ,执行的时候会把结果保存在缓存中 但数据没有改变的时候 每次都是从缓存中读取
方法 只要被调用就会执行
计算属性与方法有什么区别用一句话来解释 就是计算**属性有缓存 方法没有 所以计算属性对性能的消耗更低
**
生命周期
生命周期：Vue从创建到销毁的过程
生命周期的钩子函数：Vue从创建到销毁的过程中被自动调用的函数
八个钩子函数(很重要)
- beforeCreate（创建实例）
- created（创建完成）
- beforeMount（开始创建模板）
- mounted（创建完成）
- beforeUpdate（开始更新）
- updated（更新完成）
- beforeDestroy（开始销毁）
- destroyed（销毁完成）
全局过滤器与局部过滤器
- 局部过滤器只能在当前的实例的el范围内进行使用
- 全局过滤器 能在所有的实例中的el范围内都使用
语法
<div id="demodiv">{
{text|xiaohong}}</div>
<div id="demodivb">{
{text|xiaohong}}</div>
// 全局,写在实例之前
Vue.filter("过滤器的名字",(val)=>{
return 逻辑
})
// 局部，写在实例内部，与data等同级
filters:{
xiaohong(val){
return
}
}
特别注意:全局时filter没有s,局部时filters含有s
组件
组件的本质是自定义标签
实例：
<script src="node_modules/vue/dist/vue.js"></script>
<div id="demodiv">
<mycom></mycom>
</div>
<script>
// 全局组件 组件的本质是自定义标签
Vue.component("mycom",{
template:"<h1>我是一个组件1</h1>"
})
new Vue({
el:"#demodiv",
data:{
},
})
</script>
遇到的问题
- 不能驼峰式定义标签(因为html标签都是小写)
- 模板里有多个标签时只显示一个
以上两种问题的解决方式待查