Vue
Vue
1.什么是Vue?
Vue是一款渐进式前端框架基于MVVM模式,免除JS中DOM操作,简化书写和操作流程.
2.如何使用?
-
1.新建一个HTML文件,引入Vue.js文件.
<script src="js/vue.js"></script>
-
2.创建Vue对象,定义模型数据.
<!--2 创建vue对象，定义模型数据-->
<script>
new Vue({
el:"#app",//表示Vue接管的区域,只有在这个区域内才能使用表达式获取Vue中定义的模型数据
data() {
return {
message:"hello Vue!"
}
},
})
</script>
-
3.将模型数据绑定到view视图中.
-
<div id="app"><!-- 插值表达式,由Vue框架解析,获取模型数据的值展示到标签内容体中 --><p>{{message}}</p><input type="text" v-model="message"></div>
3.Vue指令
-
v-bind指令(给HTML标签绑定模型数据)
{{}}插值表达式,由Vue框架解析,将获取的模型数据的值展示到标签内容体中
v-bind:属性="模型数据"或者:属性="模型数据"
<body>
<script src="js/vue.js"></script>
<div id="app">
<!--
v-bind:给属性绑定模型数据，语法如下:
v-bind:属性名="模型数据"，v-bind可以省略不写，即(:属性名="模型数据")
-->
<a v-bind:href="url" >链接1</a>
<a :href="url" >链接2</a>
<!--
v-model:给表单项绑定模型数据，属于双向数据绑定。语法如下：
v-model="模型数据"
-->
<input type="text" v-model="url" >
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app", //vue接管的区域
data:{
url:"http:www.itheima.com"
}
})
</script>
-
v-on指令(绑定事件)
绑定的函数必须在Vue对象的methods属性中
v-on:事件名称="函数名()"或者@事件名称="函数名称"
<body>
<div id="app">
<!--
v-on：绑定事件，语法如下：
v-on:事件名称="函数名()"，还可以简写成 @事件名称="函数名()"
注意：绑定的函数必须定义到vue的methods属性中，否则找不到方法。
-->
<input type="button" value="点我一下" v-on:click="handle" >
<input type="button" value="点我一下" @click="handle">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app", //vue接管的区域
data:{
},
methods: {
handle:function(){
console.log("我被点了");
}
},
})
</script>
-
v-if(加载或不加载当前标签)和v-show(显示或隐藏当前标签)
v-if="条件表达式":条件为true就加载当前标签
v-else-if="条件表达式":条件为true就加载当前标签
v-else以上条件都不执行时立即执行
v-show="条件表达式"条件为true时显示当前标签,否则隐藏
<body>
<div id="app">
<!--
v-if="条件表达式"：条件表达式为true就加载当前标签
v-else-if="条件表达式"：条件表达式为true就加载当前标签
v-else：以上条件都不成立时执行v-else
-->
年龄<input type="text" v-model="age">经判定，为:
<span v-if="age<=35">年轻人(35及以下)</span>
<span v-else-if="age<=60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>
<br><br>
<!--
v-show="条件表达式"：条件表达式为true就显示此标签，否则隐藏标签，通过样式控制。
-->
年龄<input type="text" v-model="age">经判定，为:
<span v-show="age<=35" >年轻人(35及以下)</span>
<span v-show="35<age&&age<=60">中年人(35-60)</span>
<span v-show="age>60">老年人(60及以上)</span>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管的区域
data: {
age: 20
}
})
</script>
-
v-for(遍历容器或者对象)
-
v-for ="变量1 in 数组"或者(变量1,变量2) in 数组 (变量1为元素值,变量2为索引)
<body>
<div id="app">
<!--
v-for：遍历容器或者对象。语法如下：
v-for="变量1 in 数组"，或者(变量1,变量2) in 数组。 括号可以省略不写
变量1：表示元素值。
变量2：表示索引
-->
<!--需求：遍历addrs数组，展示索引和元素值到p标签中 -->
<p v-for="(addr, index) in addrs" >{{index}}{{addr}}</p>
<!--需求：遍历addrs数组，展示元素值到p标签中 -->
<p v-for=" addr in addrs" >{{addr}}</p>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data: {
addrs: ["北京", "上海", "武汉", "成都", "深圳"]
}
})
</script>
4.Vue生命周期
生命周期又称钩子函数,共有八个(创建前,创建后,搭载前,搭载后,更新前,更新后,销毁前,销毁后)
mointed():挂载完成,Vue初始化完成,HTML页面渲染成功.
作用:发送请求到服务端,加载数据
浙公网安备 33010602011771号