认识Vue
基本概念：
Vue是一个用于构建用户界面（基于数据构建出用户能够看懂的界面）的渐进式框架
Vue的两种使用方式
- Vue核心包开发
- Vue核心包&Vue插件工程化开发
优点：大大提升了开发效率
缺点：需要记忆
创建Vue实例
- 准备容器
- 引包–开发版本/生产版本，去官网找https://v2.cn.vuejs.org/v2/guide/installation.html
-
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
-
- 创建Vue实例
- 指定配置项
- el指定挂载点
- data提供数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 准备容器 -->
<div id="app">
<!-- 放置用于渲染的代码逻辑 -->
{{msg}}
</div>
<!-- 引包 -->
<!-- 去官网https://v2.cn.vuejs.org/v2/guide/installation.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 创建实例 -->
<script>
// 一旦引入VueJS核心包，在全局环境下，就有了Vue函数
const app=new Vue({
// 通过el配置选择器，指定管理哪个容器
el:'#app',
// 通过data提供渲染数据
data:{
msg:"hello world!"
}
})
</script>
</body>
</html>
插值表达式
{{}}
- 作用：利用表达式进行插值，渲染到页面中（表达式可以是被求值的代码，JS引擎会将其计算出一个结果）
- 语法：{{表达式}}
- 注意：
- 表达式中使用的数据必须已经被在data中声明
- 支持的是表达式，而不是语句
- 不能在标签属性中使用{{}}插值
- 插值表达式的使用
const app=new Vue({
// 通过el配置选择器，指定管理哪个容器
el:'#app',
// 通过data提供渲染数据
data:{
msg:"hello world!"
}
})
响应式特性
- 响应式：数据变化，视图自动更新，data中的数据内容更新后，相应的使用插值表达式的地方也会改变
- 访问修改data中的数据
- 访问数据：“实例.属性名”
- 修改数据："实例.属性名 "=“值”
Vue指令
带有v- 前缀的特殊标签
使用：
在data中使用标签时，不能直接显示，此时就可以用Vue指令
eg:
指令
v-show
- 作用：控制元素显示隐藏
- v-show=“表达式”
- 本质上通过style="display:none"隐藏
v-if
- 作用：控制元素显示隐藏（条件渲染）
- v-if = “表达式”
- 本质上根据判断条件创建或者移除元素
v-else、v-else-if
- 辅助v-if进行判断渲染
- 语法：v-else v-else-if=“表达式”
- 要紧挨着v-if使用
- 类似于js中的if else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
<p v-if="judge === true" >姓名：小明</p>
<p v-else="judge">小红</p>
等级：
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 70">良好</p>
<p v-else-if="score >= 60">及格</p>
<p v-else="score >= 90">不及格</p>
</div>
<script>
const p = new Vue({
el:"#app",
data:{
judge:true,
score:85
}
})
</script>
</body>
</html>
v-on
- 作用：注册时间 = 添加监听 + 提供处理逻辑
- 语法：
- ‘v-on：’可以简写为@
- v-on :事件名 =‘内联语句’
- eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
<Button v-on:click = "num--">-</Button>
<label>{{num}}</label>
<Button v-on:click = "num++">+</Button>
</div>
<script>
const p = new Vue({
el:"#app",
data:{
num:100
}
})
</script>
</body>
</html>
- v-on :事件名="methods中的函数名"
- eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
<Button @click = "dec">-</Button>
<label>{{num}}</label>
<Button @click = "inc">+</Button>
</div>
<script>
const p = new Vue({
el:"#app",
data:{
num:100
},
methods:{
// 通过变量名获取变量
inc(){
p.num++;
},
dec(){
p.num--;
}
}
})
</script>
</body>
</html>
- 调用传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<table id="price" border="1px">
<tr>
<th>商品</th>
<th>价格（元）</th>
<th>操作</th>
</tr>
<tr>
<td>薯片</td>
<td>{{sPrice}}</td>
<td><button @click="dec(sPrice)">+</button></td>
</tr>
<tr>
<td>饮料</td>
<td>{{yPrice}}</td>
<td><button @click="dec(yPrice)">+</button></td>
</tr>
<tr>
<td>包子</td>
<td>{{bPrice}}</td>
<td><button @click="dec(bPrice)">+</button></td>
</tr>
</table>
<div id="sum">
<p>余额：{{money}}</p>
</div>
<script>
const sum=new Vue({
el:"#sum",
data:{
money:100
}
})
const p = new Vue({
el:"#price",
data:{
sPrice:4,
yPrice:3,
bPrice:2,
},
methods:{
dec(price){
sum.money -= price;
}
}
})
</script>
</body>
</html>
v-bind
- 作用：动态设置html属性
- v-bind:属性名=“表达式”
- eg：动态引用图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src="msg" alt="" >
<!-- v-bind:src可以简写为:src -->
<img :src="msg" alt="">
</div>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"https://img2.baidu.com/it/u=2728121553,3700197055&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
}
})
</script>
</body>
</html>
v-for
- 作用：基于数据循环，多次渲染整个元素
- 语法：v-for=“(item,index) in 数组”
- eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="p" >
<p v-for="item in msg">{{item}}</p>
</div>
<script>
const p = new Vue({
el:"#p",
data:{
msg:["hello,world!","你好世界","世界你好"]
}
})
</script>
</body>
</html>
v-model
- 作用：给表单元素使用，双向绑定数据，可以快速获取或设置表单元素内容
- 数据变化-> 视图自动更新
- 视图变化->数据自动更新
- 简而言之，修改一处都变化
- 语法：v-model=‘model’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="model">
账户：<input type="text" v-model="username"><br/><br/>
密码：<input type="password" v-model="password"><br/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const p = new Vue({
el:"#model",
data:{
username:'',
password:''
}
})
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
