VUE的使用，学会这些就足够了！！！（一）
文章目录
- Vue.js 是什么?
- 一、vue实例
- 二、vue常用指令
- 三、生命周期函数|钩子函数
- 四、vue组件
- 五、vue的路由设置
- 六、axios的使用
- 总结
Vue.js 是什么?
vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
一、vue实例
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
1、在文件中引入vue.js，下面两种方式选择其中一种
<script type="text/javascript" src="../vue.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、建立简单的vue实例对象
<div id="app">
//调用vue中的数据
<h1>{{message}}</h1>
//下面的两种书写方式结果相同
<button v-on:click="click()">click</button>
<button @click="click()">click01</button>
</div>
<script>
var ve= new Vue({
el:'#app',
data:{
message:'hello',
},
methods:{
click:function(){
alert("你好，世界");
}
}
});
</script>
二、vue常用指令
1、v-on：绑定事件监听器，事件的类型由参数决定
例如：v-on：事件名称
或者@事件名称
2、v-if/v-else-if/v-else判断指令：根据表达式的值，进行渲染
例如：
<div id="app">
//isshow为true时，标签内的内容显示到页面
<h1 v-if="isshow">{{isshow}}ok</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello',
isshow:true,
},
methods:{
click:function(){
alert("你好，世界");
}
}
});
</script>
3、v-model：数据绑定指令（一般为表单输入绑定）
//v-model 指令在表单、