【.5.31】四、个人前端基础（Vue.js） - 秋火烧云
【2020.5.31】四、个人前端基础（Vue.js）
Vue.js的部分基础知识
一、创建vue实例
var vm = new Vue({
el:"#app",
data:{
//数据
arr:[1,2,4]
},
methods:{
//方法
},
components:{
//模版
},
create:{
// 生命周期函数
// 最早能获取到数据的
}
})
二、Vue的指令
1.数据绑定指令
1.1 v-text : 绑定数据可以解决闪烁问题
<span v-text="msg1"></sapn>
1.2 v-html : 绑定数据，可以解决闪烁也可以编译页面结构代码
<span v-html="msg2"></sapn>
2. 监听事件 v-on\@
1. v-on:click = "change"
2.事件修饰符
阻止冒泡事件 : .stop @click.stop = "change"
阻止默认事件 : .prevent 阻止表单跳转
3. v-model 双向数据绑定
v-model 双向数据绑定===》可以绑定，input，select、component
数据的处理：v-model.number <input v-model.number="pw">
v-model.name <input v-model.name="un">
4. v-for 循环
循环：items当前项，index当前项，key当前键（指定了key后，只能渲染列表中改变的的那一项）
<li v-for="(itmes index) in arr">{{items.name}}+{{items.ega}}+{{index}}</li>
5. v-if
显示隐藏，如果隐藏的话，页面的结构都不存在， 切换消耗高
v-if=“布尔值”
三、Vue 的部分api
1. ref 被用来给元素或子组件注册引用信息，引用信息会注册在父组件$refs上
2. computed : 计算属性 当data中的数据发生变化时，就会触发这里面的计算
3. methods : 事件处理器 可以直接通过VM实例访问这里面的方法，或者在指令表达式里直接使用
4. watch : 监听数据的变化，当发生变化时，里面设置的对应函数会调用，可以监听组件切换并做出对应的函数处理
watch:{
a:function(n,o){
//n是新值，o 是旧值
要执行的函数
}
}
四、生命周期\钩子函数 （简概）
1.初始化
beforcreate 创建实例时 不能访问数据和方法
created 创建实例完成 最早能访问数据的和方法
boferMount 模版在内存中已经编辑好了，未渲染到页面中
mounted 模版已经渲染到页面中
2. 更新
beforUpdate 数据更新之前
update 数据更新完成，重新渲染完成后
3.组件使用
activated 组件在激活时
deactivated 组件被停用时
4.实例销毁
beforDestroy 实例销毁之前
desroyed 实例销毁后
发表于
2020-06-01 00:14
秋火烧云
阅读(94)
评论(0)
编辑
收藏
举报
以上是 【.5.31】四、个人前端基础（Vue.js） - 秋火烧云 的全部内容， 来源链接： utcz.com/z/376477.html
