VUE入门
简介:
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
之前基于DOM----->(1)获取DOM元素 (2)操作DOM元素
Vue官网: https://cn.vuejs.org
Vue.js的优点
-
体积小
压缩后33K
-
更高的运行效率
基于虚拟dom,一种可以与预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM
-
双向数据绑定
让开发者不用再去操作DOM对象,将更多精力投放到业务逻辑上;
-
生态丰富、学习成本低
市场上有用大量成熟,稳定的vue.js的ui框架、常用组件,即用实现快速开发
使用场景广泛:譬如 web端,移动端,跨平台应用开发
一、vue第一个程序hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<!--①引入vue的库-->
<script src="./js/vue.js"></script>
</head>
<body>
<!--②创建一个双标签并为该标签定义一个id-->
<div id="add">
<!--显示数据-->
{
{message}}
</div>
</body>
<!--创建自己的js代码-->
<script>
/*创建一个Vue对象*/
const app = new Vue({
el: "#add",
data:{
//数据
message:"今天是周一......"
}
})
</script>
</html>
二、el挂载点
挂载点:(1)作用范围:该标签内或者子标签内
挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器,因为 id具有唯一性
挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签,但是必须双标签。不能在 body和html标签上,建议挂载到div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<!--①引入vue的库-->
<script src="./js/vue.js"></script>
</head>
<body>
<!--②创建一个双标签并为该标签定义一个id-->
{
{message}}
<div id="add">
{
{message}}
</div>
<!--测试class选择器-->
<!--<div class="add">
{
{message}}
</div>-->
</body>
<!--创建自己的js代码-->
<script>
/*创建一个Vue对象*/
const app = new Vue({
/*el挂载点*/
el: "#add",
data: {
//挂载点:(1)作用范围:该标签内或者子标签内
//挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器,因为id具有唯一性
//挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签,但是必须双标签。不能在body和html标签上,建议挂载到div标签
message: "明天是周二......"
}
})
</script>
</html>
三、data数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>hello</title>
<!--引入vue库-->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
{
{message}}</br>
<span>{
{message}}</span></br>
{
{person}}</br>
{
{person.name}}-------->{
{person.age}}<br>
<ul>
<li>{
{list[0].school}}</li>
<li>{
{list[1].school}}</li>
<li>{
{list[2].school}}</li>
</ul>
</div>
</body>
<script>
const app= new Vue({
el:"#add",
//数据标志
data:{
//基本数据类型和字符串
message:"今天老白来了....",
//对象
person:{
name:"张三",
age:3
},
//集合
list:[
{
school:"五道口"},
{
school:"南开"},
{
school:"北大"}
]
}
})
</script>
</html>
四、Vue指令
v-text v-html v-on基础
v-show v-if v-bind
v-for v-on补充 v-model
- 通过Vue实现常见的王爷效果
- 学习Vue指令,一案例巩固知识点
- Vue指令指的是以v-开头的一组特殊语法
4.1 v-text 设置标签的文本值(textContent)
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{ {}}可以替换指定内容
- 内部支持写表达式
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>hello</title>
<!--引入vue库-->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
<span v-text="message+',天气不好影响心情!'">冬冬</span><br>
<span>{
{message+"嘿呀"}}</span>
</div>
</body>
<script>
const app= new Vue({
el:"#add",
//数据标志
data:{
message:"一周的阴天和雨天..."
}
})
</script>
</html>
4.2v-html:设置标签的innerHTML
内容中有html结构会被解析为标签
特点:
- v-html 指令的作用是设置标签的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>hello</title>
<!--引入vue库-->
<script src="./js/vue.js"></script>
</head>