day05内容
compyted 计算属性
filters
watch 监听
components
props
vue
- 安装
下载,script
sdn,script
模块化,npm - vue实例对象
new Vue({
el:’#app’,
template:’’,
data:{},
methods:{},
生命周期构子函数,
computed:{},
filters:{},
watch:{},
components:{}
props:[]
})
vue实例对象可以直接访问data/methods/computed/中的属性
在方法,生命周期钩子函数this指向vue实例对象
3. 模板渲染
- 双大括号
{{message}}
{{isNow?"":""}} {{message.split('').reverse().join('')}}
- 指令
列表渲染
v-for key
条件渲染
v-if=""
v-else - 属性动态绑定
v-bind:key=“变量” 变量定义在data中
简写
:key=“变量”
style属性的绑定
:style=“style”
{
data:{
style:{
color:‘red’;
display:‘none’
}
}
}
- 事件绑定
v-on:click=“变量” 变量定义在methods中
简写
@click=“变量”
@click.prevent=""
- 计算属性
- 过滤器
- 监听
- 组件(自定义标签)
-
定义组件
Vue.component(‘my-alert’,{
vue实例构造函数的参数
template:’’,
data(){
return {}
},
props:[‘data’]
}) -
使用组件
理解:
组件定义实际上可以理解为是函数的定义,组件的调用也类似于函数的调用,函数使用参数进行传递,组件是使用属性进行传递
项目设计:
- 框架的应用:
vue 核心框架(数据驱动框架,采用mvvm模式)
element-ui 组件库
jquery 数据交互 - 需求
看点资讯-资讯管理模块
发布资讯
修改资讯
删除资讯
多条件符合查询资讯