第一天-VUE指令
回顾
第一阶段
html+html5 语义化标签（header,footer）
css+css3
动画：过渡（transition），动画(animate), flex布局 , less
JS
第二阶段
Java Script
数据类型
变量
运算
数学运算
比较运算
逻辑运算
流程控制
if
switch
for
while
do while
函数
DOM （document object model）
BOM （browser object model）
第三阶段
node基础
fs模块
path路径处理模块
http模块
express框架
ejs模板引擎
mysql数据库
第四阶段
VUE(3)
-
vue-router: 路由模块
-
element-ui: 基于vue框架的一个PC端的组件库
-
iview: 基于vue框架的一个PC端的组件库
-
vant: 基于vue框架的一个移动端的组件库
-
axios: 基于ES6中promise封装的一个http类库
-
vuex: 基于vue的一个状态管理工具
-
小优商城移动端
-
小优商城后端管理系统(PC端)
React(2)
-
react-router-dom: 路由模块
-
ant-design: 基于react框架的PC端组件库
-
redux: react的状态管理工具
-
社区团购项目
Vue框架介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
渐进式，自底向上逐层应用，
视图层 （M(model)V(view)C(controler)）
MVVM(视图模型)
M
V
VM 视图模型层, 连接数据层和视图的一个中间纽带, 可以将视图层的更新同步到数据层, 也可以将数据层的更新同步到视图层
双向绑定，数据劫持
单页
单页面应用
var string = "<a =href='+"baidu.com"+'>"
vue的缺点
首屏加载过慢
-
因为vue页面的渲染是在客户端浏览器上完成的
vue不兼容IE8以下的低版本浏览器
-
vue底层使用到了一个API, 但是IE8以下的浏览器不支持该API
不利于SEO(搜索引擎优化), 搜索引擎几乎不会抓取vue的网页
-
vue开发的项目是单页面应用(SPA: single page application), 索引搜索引擎第一时间抓取到的网页是一个没有实质内容的网页, 所以搜索引擎会放弃抓取
开始VUE
官网 介绍 — Vue.js
<!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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- vue 的基本结构需要有一个可以标识的外部容器，只有在这个容器的范围内，vue数据可以被渲染 -->
<div id="app">
{{ messages }}<br /> <!-- 这里使用双大括号来调用数据,调用的数据来源于vue对象的data属性 -->
{{ hhh }}
</div>
<script>
var vue = new Vue({
el: "#app", // 申明vue起作用的范围
data: {
messages: "hello world",
hhh: "嘿嘿嘿"
} //可以被使用的变量
})
</script>
</body>
</html>
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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ messages }}</p>
<p>{{ project }}</p>
<p>{{ person }}</p>
<p>{{ messages.toUpperCase() }}</p> <!-- 在插值表达式当中，可以调用对象的方法 -->
<p>{{ messages[1] }}</p>
<p>{{ project[1] }}</p> <!-- 在插值表达式当中，可以调用索引 -->
<p>{{ person.name }}</p> <!-- 在插值表达式当中，可以使用对象的键调用对象的值 -->
<p>{{ person.age > 18?"成年人":"未成年" }}</p> <!-- 在插值表达式当中，可以使用三目表达式 -->
<p>{{ person.age > 18 }}</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
messages: "hello world",
project: ["HTML","Java","PHP"],
person: {
name: "张三",
age: 19
}
}
})
</script>
</body>
</html>
VUE指令
插值表达式可以完美的将js当中的数据渲染到标签的内容部分，但是对标签的属性没有办法，实际工作当中，有很多需求需要我们修改html标签的属性，所以vue提出指令概念。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。
指令的使用方式是共性的
直接在标签的内部使用
<body>
<div id="app">
<p v-text="attr.toUpperCase()"></p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
attr: "sty"
}
})
</script>
</body>
v-text
将文本内容绑定到html的内容部分，类似插值表达式，但是和v-html有区分，这里对内容进行了转义。具备一定的反前端注入能力。类似js innerText
<body>
<div id="app">
<p v-text="attr"></p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
attr: "<h1>hello world</h1>"
}
})
</script>
</body>
v-html
将文本内容绑定到html的内容部分，类似插值表达式，但是和v-html有区分，这里对内容进行了转义。类似js innerHTML
<body>
<div id="app">
<p v-html="attr"></p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
attr: "<h1>hello world</h1>"
}
})
</script>
</body>
v-model
双向绑定，通常用于表单数据绑定。
<body>
<div id="app">
<input v-model="message"> <!-- 发生修改 VM -->
<p>{{ message }}</p><!-- M -> V -->
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "hello world 1"
}
})
</script>
</body>
v-once
绑定数据之后，只渲染一次，之后只有页面从新刷新再次渲染。
<body>
<div id="app">
<div v-once>{{ message }}</div>
<input v-model="message">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "<h1>hello world 1</h1>"
}
})
</script>
</body>
v-bind
动态绑定属性
<div id="app">
<!-- <h1 v-bind:class="attr" v-bind:id="attr">hello world</h1> 多个属性绑定 -->
<!-- <h1 :class="attr" :id="attr">hello world</h1> 绑定的简写 -->
<!-- <h1 :class="age>18?'pink':'red'">hello world</h1> 可以使用三目表达式和字符串，但是字符串需要加引号，注意引号的嵌套 -->
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 19,
r: "red",
p: "pink"
}
})
</script>
v-on
<body>
<div id="app">
{{ message }}
<span v-on:click='say_hello'>按我呀~~~</span>
<span @click='say_hello'>按我呀~~~</span>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "hello world",
},
methods: {
// say_hello: function(){
// alert("hello world")
// }
say_hello(){
alert("hello world")
}
}
})
</script>
</body>
(1) vue当中要绑定的方法，必须写到vue的methods方法当中
(2) vue采用v-on进行事件绑定，格式
v-on:事件条件='事件函数名称'
(3)v-on可以简写，格式
@事件条件='事件函数名称'
v-if
通过条件判断，来决定是否创建dom对象，注意:创建和销毁dom对象都有很大的资源消耗。
<body>
<div id="app">
<h1 v-if="isShow">看不到我吧</h1>
<h1 v-if="age >= 18">哟，成年了</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 18,
isShow: 0,
}
})
</script>
</body>
v-else-if
<!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>Document</title>
<script src="./vue.js"></script>
<style>
.red{
color: red;
}
.border{
border: 1px black solid;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1 v-if="isShow">看不到我吧</h1> -->
<!-- <h1 v-if="age >= 34">哟，可以挣钱了</h1> -->
<h1 v-else-if="age >= 22">哟，可以结婚了</h1>
<h1 v-else-if="age >= 18">哟，成年了</h1>
<h1 v-else>少年</h1>
<h1 v-if="age >= 22">哟，可以结婚了</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 17,
isShow: 0,
}
})
</script>
</body>
</html>
v-else
<!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>Document</title>
<script src="./vue.js"></script>
<style>
.red{
color: red;
}
.border{
border: 1px black solid;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1 v-if="isShow">看不到我吧</h1> -->
<!-- <h1 v-if="age >= 34">哟，可以挣钱了</h1> -->
<h1 v-else-if="age >= 22">哟，可以结婚了</h1>
<h1 v-else-if="age >= 18">哟，成年了</h1>
<h1 v-else>少年</h1>
<h1 v-if="age >= 22">哟，可以结婚了</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 17,
isShow: 0,
}
})
</script>
</body>
</html>
(1) v-if后面可以加布尔值也加一个判断的表达式
(2) v-else-if 和 v-else必须配合v-if，在v-if后面出现
(3) 在写判断的时候，要把范围大的写到后面
(4) 请认真的区分一个判断，多个分支和多个判断的区别
v-show
和v-if一样，可以控制元素是否显示，但是不会删除dom元素，而是使用display进行隐藏，所以效率高于v-if
<!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>Document</title>
<script src="./vue.js"></script>
<style>
.red{
color: red;
}
.border{
border: 1px black solid;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<div id="app">
<h1 v-if="isShow">看不到我吧--if版本</h1>
<h1 v-show="isShow">看不到我吧--show版本</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
isShow: 0,
}
})
</script>
</body>
</html>
v-for
<body>
<div id="app">
<ul>
<li v-for="item in foods">
{{ item }}
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
foods: [
"猪肉炖粉条",
"咸菜",
"梅菜扣肉",
"澳洲龙虾",
"佛跳墙",
"小当家干脆面",
"阳澄湖大闸蟹",
"石头炒泥巴"
]
}
})
</script>
</body>
v-for案例
<!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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in foods">
<img :src="item.picture"/>
<p>
{{ item.name?item.name:"店铺走丢了" }}
<img v-for="i in item.level" src="./level.png">
</p>
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
foods: [
{
picture: "http://p0.meituan.net/biztone/1647448_1629513656647.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "珍滋味海鲜粥火锅(工体店)",
level: 5,
},
{
picture: "http://p1.meituan.net/biztone/179215392_1623048677800.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "高兴火锅(五道口店)",
level: 3,
},
{
picture: "https://img.meituan.net/msmerchant/054b5de0ba0b50c18a620cc37482129a45739.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "海底捞火锅(复星国际中心店)",
level: 4,
},
{
picture: "http://p0.meituan.net/biztone/625982373_1633682848208.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "芈重山老火锅(五道口店)",
level: 3,
},
{
picture: "https://img.meituan.net/msmerchant/6810ddb6e1fbe7a7debef04affdc7b38188705.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "巴奴毛肚火锅(丽泽龙湖店)",
level: 6,
}
]
}
})
</script>
</body>
</html>
扫一扫
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
