前言
学习目的:开发及扩展个人博客前端页面
使用工具: vscode
安装运行时实时更新插件: live serve
vue基本概念
vue简介
- 它是一个JavaScript框架
- 简化了Dom操作
- 响应式数据驱动
和react基本类似(不过react更加注重函数式编程,vue偏向渐进式)
vue的优点
除了以上提到的几点外,来看看vue官方给出的优点:
比较个性化属于vue的双向数据绑定,和react的状态和属性这两个概念类似(个人见解,如有误区还请指出)
引入vue
开发环境(包含了有帮助的命令行警告):
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
生产环境(优化了尺寸和速度):
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
hello vue
作为入门的第一个程序,让我们来向vue问好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个vue页面</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello vue!"
}
})
</script>
</body>
</html>
vue挂载点
挂载点:el
通过挂载点传入对应的消息
作用范围:vue会管理el选项命中的元素及其内部的后代元素
选择器:
#app:id选择器(推荐使用)
.app:类选择器
dev: 标签选择器
不可使用的dom元素:html,body
vue常用标签
v-text
设置标签的文本值
v-html
作用:设置元素的innerHTML,内容中有html结构会被解析为标签
v_text指定无论内容是什么,只会解析为文本
所以,解析文本使用v_text,需要解析html结构使用v-html
效果:
v-on
事件绑定,为元素绑定事件
效果:
案例:计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个vue页面</title>
</head>
<body>
<div id="app">
<button v-on:click="jian">-</button>
<span>{{shu}}</span>
<button @click="jia">+</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
shu:1,
},
methods: {
jian:function(){
if(this.shu<=0){
alert("别点了,最低了")
}else{
this.shu=this.shu-1;
}
},
jia:function(){
if(this.shu>=10){
alert("别点了,最高了")
}else{
this.shu=this.shu+1;
}
}
},
})
</script>
</body>
</html>
效果:
v-show
根据表达式的真假,切换元素的显示和隐藏
v-if
根据表达式的真假,切换元素的显示和隐藏(直接操纵dom)
v-bind
设置元素的属性(比如src,title,class)
v-for
根据数组生成列表结构
v-on
传递自定义参数,事件修饰符
v-model
获取和设置表单元素的值(双向数据绑定)
router-view
route-view是vueRouter的组件,主要是更新路由,可以不用跳转到一个新的页面,不会更新初始化函数mounted和created,只更新标签下所渲染的组件。可以不用引入组件。
<router-link to="/">
<img v-if="logo" :src="logo" class="sidebar-logo">
<h1 class="sidebar-title">{{ title }} </h1>
</router-link>