一、Vue.js安装

一、Vue.js安装
检查是否安装：vue --version，出现版本号表示安装成功；
若无版本号，输入命令：cnpm i vue-cli -g 后等待安装成功后可再次检查版本号；
二、Vue.js应用
1、在官方文档中直接复制CDN，或者点击安装；
2、生命周期:点击查看官方文档“Vue实例”,生命周期图中红色框表示可以编辑调用的函数；
3、Vue.js中通过data属性定义数据；通过选项属性methods对象定义方法；使用v-on指令监听DOM事件；
实例：
HTML内容：

<h2>v-for="(item,index) in list"v-bind:key="index">{{item}}的下标是{{index}}</h2>
//v-if根据数据值判断是否输出元素；
<buttonv-bind:disabled="isDisable"v-on:click="handleClick">点击一下就好了</button>
<h3>v-if='isDisable'>这个按钮不能被点击了</h3>
//v-model指令对表单元素进行双向数据绑定。
<input v-model="form.username"type="text">{{form.username}}
<input type="password"v-model="form.password"type="text">{{form.password}}<button type="button"@click="handleSubmit">提交</button>

JS内容：

<script type="text/javascript">
// for(var i = 0;i=0;i++){
// $("main").append('<h2>'+(i+1)+'</h2>');
// }
var app=newVue({
el:'#main',
data:{
msg:'hello Vue',
list:[],
isDisable:false,
form:{
username:'默认值',
password:'',
}
},
//Vue刚刚初始化
mounted(){
// 初始化内容
this.$nextTick(function(){
this.init();
})
},
// 自己定义的方法
methods:{
init(){
for(vari=0;i<10;i++){
this.list.push(i+1);
}
},
handleClick(){
this.isDisable=true;
},
handleSubmit() {
//提交到后端
var_this=this;
this.$http.get(api).then((res) => {
console.log(res.data);
})
}
},
});
</script>
4、vue axios 发送请求；
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

三、回调函数

image.png
回调可以用来进行封装；
四、使用Vue
在桌面新建项目:cd Desktop
创建一个名字为demo的项目：vue init webpack demo
用VScode打开在终端输入cmpn i会安装需要的依赖；