1、使用vscode编辑器需要安装live server(热更新) 和 vetur(vue关键字高亮)插件,配置setting如下,对所写的代码进行格式化
{
"editor.formatOnType":true,
"editor.formatOnSave":true
}
2、el和data的使用
3、methods方法,使用es6的表达形式
methods:{
test1(time){
return `这是es6de${this.message}、${time}`
}
},
4、v-bind属性绑定
5、VueCli3.x小白入门-v-on事件绑定
6、VueCli3.x小白入门-事件修饰符
7、VueCli3.x小白入门-键盘事件
8、VueCli3.x小白入门-v-model
预期:随表单控件类型不同而不同。
限制:
- components
修饰符:
- lazy - 取代 input 监听 change 事件
- number - 输入字符串转为有效的数字
- trim - 输入首尾空格过滤
9、VueCli3.x小白入门-ref的使用,类似dom
methods:{
test1(){
this.age = this.$refs.name.value;
}
},
10、VueCli3.x小白入门-watch的使用
比较消耗资源,减少使用,如a属性值发生变化,addToA()方法和addToB()方法都会调用
11、VueCli3.x小白入门-computed,只有在发生变化时才会调用
推荐使用,如检索、css样式绑定
如属性a发生变化,只会调用addToA方法
12、VueCli3.x小白入门-动态绑定css
vue cdn 基础
动态绑定样式,两种方式
改变颜色
hello
var app = new Vue({
el:'#vue-app',
data:{
changeC:true,
message:'ddddddd'
},
methods:{
test1(){
this.age = this.$refs.name.value;
}
},
computed:{
changeCC(){
return {change_color:this.changeC,change_length:true}
}
},
});
13、VueCli3.x小白入门-if和show指令
14、VueCli3.x小白入门-v-for指令
- {{index}}:{{user.id}},{{user.name}}
{{val}}-{{key}}
var app = new Vue({
el:'#vue-app',
data:{
users:[
{id:1,name:'name1'},
{id:2,name:'vfnvjf'},
{id:3,name:'mkmd'},
{id:4,name:'swsw'},
{id:5,name:'vfnjv'},
],
oneUser:{key:122,name:"ncjdncd",sex:'true'}
},
methods:{
},
computed:{
},