vue基础语法-笔记

sunsk.top

已于 2023-09-12 11:18:49 修改

阅读量60

点赞数

分类专栏： vue基础-笔记文章标签： vue

于 2020-11-29 22:05:28 首次发布

本文链接：https://blog.csdn.net/sunsktop/article/details/110355083

版权

vue基础-笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础语法：

<body>
	<div id="app">{{ message }}</div>
</body>

var app = new Vue({//创建vue实例对象
        el: "#app",//设置el属性  //el 挂载点
        data: {//设置data属性   //data数据对象
            message: "Hello Vue",
      	}
    })

一.Vue生命周期

生命周期:从Vue实例创建、运行、到销毁期间，伴随着各种事件，这些事件，统称为生命周期
生命周期钩子:生命周期事件的别名
生命周期钩子=生命周期函数=生命周期事件

二.Vue生命周期函数分类:

1.初始化阶段生命周期函数:这个阶段的钩子函数只在初始化时执行一次 beforeCreate(创建前):实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性
created(创建后):实例已经在内存中创建OK，此时，data和methods 已经创建OK，此时还没有开始编译模板
beforeMount(载入前):此时已经完成了模板的编译，但是还没有挂载到页面中
mounted(载入后):此时，已经将编译好的模板，挂载到了页面指定的容器中显示
2更新阶段生命周期函数:这个阶段的钩子函数会在每次发生更新时被调用 beforeUpdate(更新前)∶状态更新之前执行此函数，此时
data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated(更新后)︰实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
3.销毁阶段生命周期函数:这个阶段的钩子函数只在死亡时被调用一次 beforeDestroy(销毁前):实例销毁之前调用―在这一步，实例仍然完全可用 destroyed(销毁后): Vue
实例销毁后调用调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁器中显示
2更新阶段生命周期函数:这个阶段的钩子函数会在每次发生更新时被调用

三、常用内置指令

v-text :更新元素的textContent
v-html:更新元素的innerHTML，可以包含并解析HTML代码段
v-show :通过控制display 样式来控制显示/隐藏
v-if/v-else :通过控制标签有无来控制显示/隐藏
v-if :如果为true,当前标签才会输出到页面
v-else :如果为false,当前标签才会输出到页面
v-bind:强制绑定解析表达式,可以省略v-bind简写为∶
v-on:绑定事件监听,一般简写为@
v-for:遍历数组/对象v-model能实现表单元素和Model中数据的双向绑定(注意:v-model只能运用在表单元素中)
ref :指定唯—标识, vue对象通过$refs 属性访问这个元素对象
v-clock :防止闪现, 与css 配合:[v-cloak] { display: none }

四、组件间的通信方式有哪些?用于哪些场景?

1) props接收父组件传入的参数 
2) vue的自定义事件，用于子组件向父组件传递参数 
3）消息订阅与发布(如: pubsub 库)，可用于兄弟组件间的数据传递 
4) slot插槽，可向子组件传递标签 
5) vuex状态管理，任意组件间通信

五、vue-router是什么?它有哪些组件?

用Vue写路由的一个插件 router-link相当于超链接，
to属性相当于超链接的href属性，最终会被解析为超链接
router-view用于加载路由对应的组件，显示模板内容

六、比较v-if/v-else与v-show:

V-if:如果为true,当前标签才会输出到页面
V-else:如果为false,当前标签才会输出到页面
V-show:通过display样式来控制显示或隐藏
注：如果切换频繁使用v-show

七、箭头函数的this的特点?

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this;如果没有，则是window

八、小知识点

includes(str):判断是否包含指定的字符串
startsWith(str):判断是否以指定字符串开头
endsWith(str):判断是否以指定字符串结尾
const关键字用于定义一个常量
vue初始化变量数据写在data里

琐碎：
1、关于箭头函数参数的说法：

1.没有参数时用()占位
2.只有一个参数时可以省略()，直接用参数占位
3.大于一个参数时不能省略()
4.多个参数用,号隔开

2、箭头函数的函数体加0和不加的区别

1.函数体只有一句时可以不用加0
2.函数体如果有多个语句,则需要用0包裹
3.加时若有需要返回的内容，需要手动return返回

3、vue生命周期在创建前/后的说法

1.在beforeCreated阶段，vue实例的挂载元素$el为undefined，还未初始化.
2.在beforeCreated阶段，数据对象data为undefined，还未初始化。
3.在created阶段，vue实例的数据对象data就有了。

4、vue生命周期在更新前/后的说法

1.当data变化时，会触发beforeUpdate方法
2.当data变化时，会触发updated方法

5、vue生命周期在销毁前/后的说法

1.在执行destroy方法后，对data的改变不会再触发周期函数
2.此时vue实例已经解除了事件监听以及和dom的绑定
3.此时DOM结构依然存在

sunsk.top

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础语法-笔记

基础语法：<body> <div id="app">{{ message }}</div></body>var app = new Vue({//创建vue实例对象 el: "#app",//设置el属性 //el 挂载点 data: {//设置data属性 //data数据对象 message: "Hello Vue", } })v-text:v-html：
复制链接

扫一扫