2020-05-15

今日学习
vue
1.安装
下载，script
sdn,script
模块化,npm
2.vue实例对象
new Vue({
el:’#app’,
data:{},
methods:{},
生命周期钩子函数,
computed:{计算属性},
filters:{过滤器},
watch:{监听器},
components:{},
props:[]
})
vue实例对象可以直接访问data/methods/computed/中的属性
在方法生命周期钩子函数中，this指向vue实例对象
3.模板渲染
1.双大括号
{{message}}
{{isNow?’’:’’}}
{{message.split(’’).reverse().join(’’)}}
2.指令
列表渲染
v-for key
条件渲染
v-if=""
v-else
4.属性绑定
v-bind:key=“变量” 变量定义在data中
简写(:key=""变量)
style属性的绑定
:style=“style”
data:{
style:{
color:‘red’,
display:‘none’
}
}
5.事件绑定
v-on:click=“变量” 变量定义在methods中
简写 @click.prevent=“变量”
6.计算属性
7.过滤器
8.监听器
9.组建(自定义标签)
1)定义组建
Vue.component(‘my-alert’,{
vue实例构造函数的参数
template:’’,
data(){
return{

      }
  },
  props:['data']

})
2)使用组建