一、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>
1
②在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>
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
