什么是Vue？
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网：https://v2.cn.vuejs.org/
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模块。基于框架进行开发，更加快捷，更加高效。
Vue快速入门
- 新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script> - 在JS代码区域，创建Vue核心对象，定义数据模型
点击查看代码
<script>
new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
- 编写视图
点击查看代码
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
插值表达式
- 形式：{{表达式}}。
- 内容可以是：
- 变量
- 三元运算符
- 函数调用
- 算数运算
Vue常用指令
-
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for...
-
常用指令：
-
v-bind
<a v-bind:href="url">传智教育</a>
<a :href="url">传智教育</a> -
v-model
<input type="text" v-model="url">
点击查看代码
<script>
new Vue({
el:"#app",
data: {
url: "https://www.itcast.cn"
}
})
</script>
-
通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
-
v-on 为HTML标签绑定事件
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
点击查看代码
<script>
new Vue({
el: "#app",
data: {
//...
},
methods: {
handle:function(){
alert("我被点击了");
}
},
})
</script>
- v-if
点击查看代码
年龄{{age}}，经判定为：
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
- v-show
点击查看代码
年龄{{age}},经判定为：
<span v-show="age <= 35">年轻人</span>
- v-for
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} :{{addr}}</div>
点击查看代码
data: {
addrs: ['北京','上海','广州','深圳','成都','杭州']
},
案例
Vue生命周期
- 生命周期：指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子方法）。
点击查看代码
<script>
new Vue({
el: "#app",
data: {
},
mounted() {
console.log("Vue挂载完毕，发送请求获取数据");
},
methods: {
},
})
</script>
- mounted: 挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）