模版语法、列表渲染、文本指令、事件指令、属性指令、vue中的style和class、条件渲染、v-for能循环的
vue 基础
1 模版语法
2 文本指令
2.1 模版语法 v-text
2.2 文本指令 v-html
2.3 文本指令 v-show
2.4 文本指令 v-if
2.5 v-show把图片的显示隐藏
3 事件指令
ES6对象语法演变
3.1 v-on 不传参/a>
3.2 v-on 传参和 v-on:简写成@
4 属性指令
4.1 属性指令之 v-bind: 简写成 :
4.2 用属性指令切换图片
4.3 属性指令之 class 属性
5 style和class
5.1 style 字符串类型
5.2 style 数组类型
5.3 style 对象类型
5.4 class是字符串类型
5.5 class是数组类型
5.6 class是对象类型
6 条件渲染
7列表渲染
7.2 v-for能循环的
1 模版语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>模板语法h1>
<p>渲染字符串-姓名：{{ name }}p>
<p>渲染字符串-年龄：{{ age }}p>
<p>渲染-数组：{{ list1 }}p>
<p>渲染-数组-按位置取值：{{ list1[1] }}p>
<p>渲染-对象：{{ obj1 }}p>
<p>渲染-对象-按key取值：{{ obj1.name }}p>
<p>渲染-对象-按key取值：{{ obj1['age'] }}p>
<p>渲染-标签-字符串(是因为它默认处理了xss攻击)：{{ link1 }}p>
<p>三目运算符(10>9)：{{10>9 ? true:false}}p>
<p>三目运算符(对象的长度大于2吗)：{{list1.length > 2 ? '大于2': '不大于2'}}p>
<p>简单表达式(99 + 1=)：{{ 99 + 1 }}p>
div>
body>
html>
<script>
new Vue({
el: '#app',
data: {
name: 'lin',
age: 18,
list1: [1, 2, 3, 4], // 数组
obj1: {name: 'today', age: 20}, // 对象
link1: '百度一下',
}
})
// 定义变量
let list1 = [1, 2, 3, 4]
let res = list1.length < 2 ? '大于2': '不大于2'
console.log(res)
script>
2 文本指令
# vue 的指令系统 ，放在标签,以v-开头的，每个指令都有特殊用途
v-text:把字符串内容渲染到标签内部
v-html:把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签
v-show:控制标签显示与否:通过style的display是否等于none控制，在html中还存在
v-if:控制标签显示与否:通过dom操作做的，这个标签从dom中删除了
2.1 文本指令 v-text
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>文本指令 v-text v-htmlh1>
<h2>文本指令之 v-text，把字符串内容渲染到标签内部h2>
<p>{{name}}p>
<p v-text="name">p>
<p v-text="link1">p>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
name: 'lin',
link1: '百度一下',
isShow: true,
ifShow: true,
}
});
script>
2.2 文本指令 v-html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>文本指令 v-htmlh1>
<h2>文本指令之 v-html，把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签 h2>
<h3>把标签字符串渲染成标签使用h3>
<p v-html="link1">p>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
name: 'lin',
link1: '百度一下',
}
});
script>
2.3 文本指令 v-show
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>文本指令 v-showh1>
<h2>v-show 控制的是标签 显示与否:通过style的display是否等于none控制，在html中还存在h2>
<div>
<p v-show="isShow">我是p标签p>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow: true,
ifShow: true,
}
});
script>
2.4 文本指令 v-if
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h2>v-if 控制的是标签 显示与否:通过dom操作，这个标签从dom中删除了h2>
<div>
<span v-if="ifShow">我是span标签span>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
ifShow: true,
}
});
script>
2.5 v-show把图片的显示隐藏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>文本指令 v-showh1>
<h2>用v-show 展示图片或隐蔽h1>
<div>
<button @click="handleShow">点我看风景button>
<br>
<img src="./img/1.webp" alt="" width="300" height="300" v-show="showPhoto">
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
showPhoto: false
},
methods: {
handleShow(){
this.showPhoto = !this.showPhoto
}
}
});
script>
3 事件指令
# 用v-on绑定事件后，只要触发事件，就会执行函数
v-on:点击事件，双击事件，滑动事件 ='函数'
# 用的最多的就是click事件 ，单击事件
# v-on:click=‘函数’---》放在标签上，点击标签，就会触发函数执行---》函数必须写在methods中，可以用es6语法的简写
methods: {
// handleClick: function () {
// alert('美女')
// },
handleClick() { // es6 语法
alert('美女')
},
}
# v-on: 可以使用 @ 替换
ES6对象语法演变
// ES6 对象写法
var userinfo = {"username": "lin", "password": "123"}
// 可写成下面这种：
var userinfo = {username: "lin", password: "123"}
var username = "lin"
var password = "123"
// var userinfo = {username: username, password:password}
// 可写成下面这种：
// 放个变量到对象中，会把变量名作为key,值作为value
var userinfo = {username, password}
console.log(userinfo['username'])
console.log(userinfo.username)
var userinfo = {
username: "lin",
password: "123",
printName: function () {
console.log(this.username)
}
}
// 调用函数
userinfo.printName()
// 演变
var printName = function () {
console.log(this.username)
}
var userinfo = {
username: "lin",
password: "123",
printName() {
console.log(this.username)
}
}
3.1 v-on 不传参
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>事件指令h1>
<button v-on:click="handleClick">点我,看风景button>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick(){
alert('hello')
}
}
});
script>
3.2 v-on 传参和 v-on:简写成@
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>事件指令h1>
<button v-on:click="handleClick">点我,看风景button>
<br>
<button v-on:click="handleClick1">点我，传参数, 如果不传，默认第一个参数是：点击事件对象：PointerEventbutton>
<br>
<button v-on:click="handleClick1(1)">点我，传一个参数,只要穿了参数，点击事件对象就不传了button>
<br>
<button v-on:click="handleClick1(1, 2)">点我，传两个参数,正常使用button>
<br>
<button v-on:click="handleClick1(1, 2, 3)">点我，传多个参数,只用前两个button>
<br>
<button v-on:click="handleClick1(1, $event)">点我，传第一个参数,第二个是点击事件button>
<hr>
<h1>把 v-on: 简写 @ h1>
<button @click="handleClick">点我,看风景button>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {},
methods: {
}
});
script>
4 属性指令
# 每个标签都会有属性，动态替换属性的值，就要用到属性指令
# v-bind:属性='变量' ---》针对所有标签的所有属性 id name
# 简写成 :属性='变量'
:id='变量'
:name='变量'
# 切换图片案例--》点击就修改src属性
4.1 属性指令之 v-bind: 简写成 :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>属性指令h1>
<div>
<button @click="handleClick">点我，有风景button><br>
<button @click="handleClick1">点我，变大风景button><br>
<p>属性简写，就是把 v-bind: 简写成 : p>
<img :src="img_url" :width="width" :height="height">
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
img_url: '',
width: 300,
height: 300,
},
methods: {
handleClick(){
this.img_url = './img/2.webp'
},
handleClick1(){
this.width = '500px';
this.height = '500px';
}
}
});
script>
4.2 用属性指令切换图片
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>属性指令h1>
<div>
<button @click="handleClick">点我，有风景button><br>
<button @click="handleClick1">点我，变大风景button><br>
<p>属性简写，就是把 v-bind: 简写成 : p>
<img :src="img_url" :width="width" :height="height">
div>
<hr>
<h1>点击按钮，切换图片h1>
<button @click="handleChange">点我换风景button><br>
<img :src="img_url2" width="400px" height="400px">
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
img_url: '',
width: 300,
height: 300,
img_url2: './img/2.webp',
img_list: ['./img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg', './img/5.webp', './img/6.webp']
},
methods: {
handleClick(){
this.img_url = './img/2.webp'
},
handleClick1(){
this.width = '500px';
this.height = '500px';
},
handleChange(){
this.img_url2 = this.img_list[Math.floor(Math.random() * this.img_list.length)]
}
}
});
script>
4.3 属性指令之 class 属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.purple {
color: rgba(104, 104, 255, 0.7);
}
style>
head>
<body>
<div id="app">
<h2>class属性h2>
<button @click="handleChangeClass">点我变样式button>
<div :class="isActive ? 'red': 'purple'">
<h1>我是一个divh1>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
handleChangeClass(){
this.isActive = !this.isActive
},
}
});
script>
5 style和class
5.1 style是字符串类型
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>style和class:能够绑定什么类型的变量：字符串，数组，对象h1>
<div :style="style_str">
<button @click="handleSmall">点击变细button>
<p>我是div中的p标签p>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
// style是字符串类型
style_str: 'background: red; font-size: 60px; font-weight: bold',
},
methods: {
handleSmall(){
this.style_str = 'background: red; font-size: 60px;'
}
}
});
script>
5.2 style是数组类型
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>style和class:能够绑定什么类型的变量：字符串，数组，对象h1>
<div :style="style_list">
<button @click="handleSmall">点击变细button>
<p>我是div中的p标签p>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
// style是数组类型
style_list: [{background: 'red'},{'font-size': '60px'},{'font-weight': 'bold'}]
},
methods: {
handleSmall(){
this.style_list.pop()
}
}
});
script>
5.3 style是对象类型(推荐使用)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>style和class:能够绑定什么类型的变量：字符串，数组，对象h1>
<div :style="style_obj">
<button @click="handleSmall">点击变细button>
<button @click="handleFontSmall">点击字体变小button>
<p>我是div中的p标签p>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
// style:是对象类型(建议用对象，对象好控制)
style_obj:{background: 'red', fontSize: '60px', fontWeight: 'bold'},
},
methods: {
handleFontSmall(){
this.style_obj.fontSize = '30px'
}
}
});
script>
5.4 class是字符串类型
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
<style>
.big{
font-size: 60px;
}
.back{
background-color: greenyellow;
}
style>
head>
<body>
<div id="app">
<h1>style和class:能够绑定什么类型的变量：字符串，数组，对象h1>
<h2>class绑定字符串、数组、对象h2>
<div :class="class_str">
<button @click="handleRemoveBackgroud">点击去掉背景button>
<p>我是div中的p标签p>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
// class是字符串类型
class_str: 'big back'
},
methods: {
handleRemoveBackgroud(){
this.class_str='big'
}
}
});
script>
5.5 class是数组类型(推荐使用)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
<style>
.big{
font-size: 60px;
}
.back{
background-color: greenyellow;
}
style>
head>
<body>
<div id="app">
<h1>style和class:能够绑定什么类型的变量：字符串，数组，对象h1>
<h2>class绑定字符串、数组、对象h2>
<div :class="class_list">
<button @click="handleRemoveBackgroud">点击去掉背景button>
<button @click="handleBigFont">点击字体变大button>-->
<p>我是div中的p标签p>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
// class是数组类型
class_list: ['big', 'back'],
},
methods: {
handleRemoveBackgroud(){
this.class_list.pop()
},
handleBigFont(){
this.class_list.push('big')
},
}
});
script>
5.6 class是对象类型
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
<style>
.big{
font-size: 60px;
}
.back{
background-color: greenyellow;
}
style>
head>
<body>
<div id="app">
<h1>style和class:能够绑定什么类型的变量：字符串，数组，对象h1>
<h2>class绑定字符串、数组、对象h2>
<div :class="class_obj">
<button @click="handleSmallFont">点击字体变小button>
<p>我是div中的p标签p>
div>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
// class是对象类型
class_obj:{big: true, back: true}
},
methods: {
handleSmallFont(){
this.class_obj.big = false
}
}
});
script>
6 条件渲染
条件关键字：
v-if
v-else-if
v-else
代码案例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h1>条件渲染h1>
<span v-if="score >= 90">优秀span>
<span v-else-if="score >= 80 && score < 90">良好span>
<span v-else-if="score >= 60 && score < 80">及格span>
<span v-else>不及格span>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data: {
score: 82
},
});
script>
7 列表渲染
# 列表渲染 v-for 显示多行
# 购物车案例+bootstrap
列表渲染案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<button class="btn btn-danger" @click="handleShow">点我显示购物车button>
<button class="btn btn-danger" @click="handleDelete">删除最后一条button>
div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号th>
<th>商品名字th>
<th>商品价格th>
<th>商品数量th>
tr>
thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}th>
<td>{{item.name}}td>
<td>{{item.price}}td>
<td>{{item.count}}td>
tr>
tbody>
table>
div>
div>
div>
div>
div>
body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: []
},
methods: {
handleShow() {
this.good_list = [
{id: 1, name: '钢笔', price: 9.9, count: 4},
{id: 2, name: '足球', price: 99, count: 4},
{id: 3, name: '篮球', price: 44, count: 32},
{id: 4, name: '电脑', price: 1299, count: 48},
{id: 5, name: '鼠标', price: 23, count: 4},
{id: 6, name: '脸盆', price: 8, count: 4},
]
},
handleDelete() {
this.good_list.pop()
}
}
})
script>
html>
7.2 v-for能循环的
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>循环数组--》见过了h1>
<p v-for="(value,index) in girls">第 {{index + 1}}个女神是：{{value}}p>
<h1>循环对象h1>
<p v-for="(value,key) in userinfo">key值是：{{key}}，value值是：{{value}}p>
<h1>循环字符串h1>
<p v-for="(value,index) in s">第 {{index}}个字母是：{{value}}p>
<h1>循环数字h1>
<p v-for="i in 10">{{i}}p>
div>
div>
div>
div>
div>
body>
<script>
var vm = new Vue({
el: '#app',
data: {
girls: ['刘亦菲', '迪丽热巴', '高圆圆'],
userinfo: {name: 'lqz', age: 19, hobby: '篮球'},
s: 'hello world'
},
methods: {}
})
script>
html>
作业
# 把今天讲的所有内容，都敲一遍
-------
# 获取所有图书接口，vue+bootstrap+jquery的ajax，显示在前端
-跨域问题
# 把uniapp，开发工具hbuilder下载，点击切换美女图片---》打包成安装apk---》安装到自己手机上