一、Vue是什么
Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。
先了解一下什么是插值表达式:
形式: { {表达式} }
内容可以为:
- 变量 { {message} }
- 三元表达式 { {message ? “有值”:”无值”} }
- 函数调用 { { message.toUpperCase() } }
- 算数运行 { {10 + 20} }
二、常用指令
指令:HTML 标签上带有 v- 前缀 的特殊属性,不同指令具有不同含义。
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置href,css样式等,可以简化为 : |
v-model | 在表单元素上创健双向数据绑定 |
v-on | 为HTML标签绑定事件,可简化为@ |
v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind、v-model
<body>
<div id="app">
<!-- v-bind: -->
<a v-bind:href="url">点击一下</a>
<!-- : -->
<a :href="url">点击一下</a>
<!-- v-model -->
<input v-model="url">
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
});
</script>
v-on
<body>
<div id="app">
<!-- v-on: -->
<input type="button" value="按钮" v-on:click="handle()">
<!-- @ -->
<input type="button" value="按钮" @click="handle()">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data(){
return{
url: "https://www.itcast.cn"
}
},
methods: {
handle: function(){
alert('我被点击了...');
}
},
})
</script>
v-if
<body>
<div id="app">
<input type="text" v-model="age">
<!-- v-if -->
<div v-if="age <= 35">年轻人</div>
<!-- v-else-if -->
<div v-else-if="age > 35 && age <= 60">中年人</div>
<!-- v-else -->
<div v-else>老年人</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
age: 50
} ,
methods: {
},
})
</script>
v-show
<input type="text" v-model="age">
<!-- v-show -->
<div v-show="age <= 35">年轻人</div>
<!--
v-show 不展示的原理是给对应的标签添加 display css属性,并将该属性值设置为 none,这样就达到了隐藏的效果。而 v-if 指令是条件不满足时根本就不会渲染。
-->
v-for
格式:
<标签 v-for="变量名 in 集合模型数据">
{{变量名}}
</标签>
三、书写步骤
①新建HTML页面,引入Vue.js文件
<script src="./js/vue.js"></script>
②在JS代码区域,创建Vue核心对象,定义数据模型
<script>
new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
</script>
③在body里编写视图
<div id="app">
<!-- v-model -->
<input type="text" v-model="message">
{{ message }}
</div>
四、生命周期
定义:指一个对象从创建到销毁的整个过程。
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
<!--钩子方法的方法名,与生命周期的状态是对应的,如mounted钩子方法的编写形式为:-->
<script>
new Vue({
el: "#app",
data: {
},
mounted() {
console.log("Vue挂载完毕,发送异步请求");
},
methods: {
},
})
</script>