vue
2019-09-25 13:47:18 0 举报AI智能生成
vue基础
作者其他创作
大纲/内容
MVVM思想
MVVM
M 数据模型 Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
V 模板、视图层 View 代表UI 组件，它负责将数据模型转化成UI 展现出来
VM 实现双向数据绑定 ViewModel 是一个同步View 和 Model的对象
MVVM的优点
低耦合。视图可以独立于Model变化和修改，一个ViewModel可以绑定道不同的View上。当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发。设计专注于页面设计，开发专注于业务逻辑和数据的开发。
可测试。界面难测试，现在测试可以针对于ViewModel来写。
常见指令
v-text
更新元素的textContent
<span v-text="msg"></span>
<span>{{msg}}</span>
<span v-text="msg"></span>
<span>{{msg}}</span>
v-html
更新元素的innerHTML。
v-if
根据表达式的值的真假条件渲染元素。在切换时元素吉他的数据绑定/组件被销毁并重建。如果是元素是，将提出他的内容作为条件快。
v-show
根据表达式的真假值，切换元素的display css属性。
v-else
前一兄弟元素必须有v-if
v-for
基于源数据多次渲染元素或模板化。
<div v-for="(item,index) in list" :key="index">{{item}}</div>
v-on
绑定事件监听器。
v-bind
动态绑定一个或多个特性
v-model
在表单控件或者组件上创建双向绑定
v-pre
跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
<span v-pre>{{msg}}</span> 即使data里面定义了msg这里仍然是显示的{{msg}}
<span v-pre>{{msg}}</span> 即使data里面定义了msg这里仍然是显示的{{msg}}
v-cloak
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
[v-clock]{
display:none
}
<p v-clock>{{content}}</p>
display:none
}
<p v-clock>{{content}}</p>
使用 v-cloak 指令是解决屏幕闪动的好方法
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被是为静态内容并跳过。这可以用于优化更新性能。
生命周期
生命周期(文字)
beforeCreate
实例初始化之后，数据观测（data observer）和（event/watcher）时间配置之前被调用
created
实例已经创建完成之后被调用。实例已经完成以下的配置：数据观测（data observer）、属性和方法的运算。watch/event事件回调。挂载阶段还没开始，$el属性目前不可见
beforeMount
在挂载开始前被调用。
mounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生虚拟DOM重新渲染和打补丁之前。
update
当这个钩子被调用时，组件DOM已经更新，所以现在可以执行依赖于DOM的操作。
beforeDestroy
实例销毁前调用
destroyed
实例销毁后调用
activated
keep-alive组件激活时调用
deactivated
keep-alive组件停用时调用
生命周期图片
组件间通信
父子组件传参
父传子
父组件使用v-bind绑定到父组件： :msg="123"
子组件使用props接收： props:['msg']
将数据在子组件里面显示出来： {{msg}}
将子组件注册到父组件中
子传父
让子组件使用this.$emit('事件')向外传递一个事件，让父组件改变数据
在父组件监听这个事件: @listen='事件'
在父组件里面定义这个方法
非父子组件传参
vuex
路由vue-router
声明式导航
<router-link to="/index">
编程式导航
//字符串
this.$router.push('/index')
this.$router.push('/index')
//对象
this.$router.push({path:'helloworld'})
this.$router.push({path:'helloworld'})
带参数
params(刷新页面后传的值读不了)
this.$router.push({name:'helloworld',params:{id:1}})
query(拼接在地址后面)
this.$router.push({path:'helloworld',query:{id:1}})
vue数据请求
ajax
fetch
get
post
axios
get
post
0 条评论
下一页
