vue基础知识
是一套用于构建用户界面的渐进式框架。vue被设计为可以自底向上逐层应用。
el:挂载点
设置完成之后,el内部,id内部的两个大括号 同名,就会被替换。
el是用来设置vue实例挂载(管理)的元素
vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用id选择器
可以使用其他的双标签,但不能但标签,且HTML和body双标签不行。建议使用div标签,因为div标签没有上面样式。
Vue中用到的数据定义在data中
data中可以写复杂类型数据时,遵守js的语法即可
MVVM模式的实现者
(Model-View-ViewModel)是一种软件架构设计模式。
model层:数据层
view层:视图层
viewmodel层:双向绑定层
vue.js就是一个MVVM的实现者,他的核心就是实现了DOM监听与数据绑定
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>石毅</h3>
<!--view层,变成了一个模板-->
<div id="app">
{{message}}
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({ //有了vue对象,通过元素去绑定,对象都是键值对的形式
el:"#app", //第一步绑定一个标签
//modet层:数据 这里也就是data
data:{
message:"hello vue!" //第二步:放一个数据
//第三步:把数据放上去拿,就是上面id下面那个位置
}
});
<!--步骤:1.导入vue-->
<!--2.new一个vue对象-->
<!--3.绑定一个元素,放数据-->
<!--4.从模板里面取出来-->
</script>
</body>
</html>
我们还有使用v-bind来绑定元素特性!
{{}}与v-bind:= 差不多 是v-text的简写
v-bind等被叫为指令。指令带有前缀v-,以表示他们是Vue提供的特殊特性。
判断-循环
if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="message==='A'">A</h1>
<h1 v-else-if="message==='B'">B</h1>
<h1 v-else-if="message==='C'">C</h1>
<h1 v-else-if="message==='D'">D</h1>
<h1 v-else>E</h1>
<!--三个等号是全等于-->
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message: 'A'
}
});
</script>
</body>
</html>
for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items"> //for 里面的下标,index
{{item.demo}}-----------{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app", //#绑定
data: {
items: [
{demo: 'java'},
{demo: '前端'},
{demo: '后端'}
]
}
});
</script>
</body>
</html>
事件
事件肯定有方法:因为点击按钮会产生一个事件,这个事件有一个函数(方法),这个函数 会去做一些事情。
on
<button>点击我</button>
这是生成一个可以点击的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 输入的文本:<input type="text" v-model="message"> {{message}}-->
<!-- 输入的文本:<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
{{message}}>-->
<!-- 性别:
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<p>选中了谁:{{message}}</p> -->
<!--input type="radio" 是单选框 checked是默认选中-->
下拉框:
<select v-model="message">
<option disabled="">---请选择---</option> <!--预留选项-->
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<!-- <span> {{message}} </span>-->
{{message}}
</div>
<!--<input>这是生成输入框,v-model是双向绑定,是上左跟下绑定,下跟上右绑定 起来-->
<!--v-model指令可以在表单<input>(框)、<textarea>(可确定大小的框)、<