webstorm安装教程:https://www.weiyiqi.net/html/cyrj/379.html
2-3
Vue文件结构:template script css样式
指令:
vbind-->简略可以 写成“:”
v-on
@click
v-if
<div id="app">
{{msg}} //双括号表达
</div>
var app=new Vue({
el:'#app',
data:{ //数据表达方式
msg:'Hello Vue!'
},
watch{
msg:function(newval,oldval){
console.log('newval is:'+newval)
console.log('oldval is:'+oldval)
}
},
computed:{
msg1:function(){
return 'computed:'+this.msg //this就代表实例Vue这个对象
}
}
})
调试窗口F12(更多程序的扩展程序 可打开前端调试窗口
2-4 计算属性与侦听属性
CDN快速引入Vue的库
计算属性:computed
侦听器:watch
使用场景介绍,watch(监听一个变量/常量),computed(监听很多)
可能在computed中有重新的渲染
2-5 条件渲染、列表渲染、Class与Style绑定
条件渲染,当某情境、判断条件、然后把什么隐藏起来
v-if
v-else,v-else-if
v-show
v-for
<div id="app">
{{msg}} //双括号表达
</div>
var app=new Vue({
el:'#app',
data:{ //数据表达方式
msg:'Hello Vue!'
},
watch{
msg:function(newval,oldval){
console.log('newval is:'+newval)
console.log('oldval is:'+oldval)
}
},
computed:{
msg1:function(){
return 'computed:'+this.msg //this就代表实例Vue这个对象
}
}
})
列表渲染 html自己类似for循环生成出来
Class与Style绑定