模版语法
<body>
<div id="app1">
<h1>模版语法</h1>
<p>渲染字符串,------姓名:{{ name }}</p>
<p>渲染字符串,------年龄:{{ age }}</p>
<p>渲染数组类型,------>:{{ list1 }}</p>
<p>渲染数组类型按照索引取值,------>:{{ list1[0] }}</p>
<p>渲染对象类型,------>:{{ obj }}</p>
<p>渲染对象类型中的姓名,------>:{{ obj.name }}</p>
<p>渲染对象类型中的年龄,------>:{{ obj["age"] }}</p>
<p>渲染标签类型字符串,------>:{{ link }}</p>
<p>三目运算符,------>:{{ 8 > 9 ? 1 : 0 }}</p>
<p>三目运算符,------>:{{ list1.length > 3 ? "正确" : "错误" }}</p>
<p>简单运算,------>{{ age + 100 }}</p>
<p>简单运算,------>{{ 100 + 100 }}</p>
<p>函数返回结果渲染,------>{{ add(1, 2) }}</p>
</div>
<script type="module" src="/src/main.js"></script>
</body>
<script>
new Vue({
el: "#app1",
data: {
name: "杨赋华",
age: 18,
list1: ["a", "b", "c"],
obj: {name: "杨赋华", age: "18"},
link: "<a href=\"https://mzt8.com/wp-content/uploads/2023/07/VOL_157_1.jpg\">每日妹子图</a>",
},
})
</script>
文本指令
<body>
<div id="app1">
<h1>文本指令 v-text v-html</h1>
<h2>text把字符串内容渲染到标签内部</h2>
<p v-text="name"></p>
<p v-text="age"></p>
<p v-text="list1"></p>
<p v-text="link"></p>
<h2>html把标签类型的字符串渲染成标签</h2>
<p v-html="link"></p>
<hr>
<h1>文本指令 v-show v-if---通过true或false来控制标签</h1>
<h2>v-show控制标签内部是否显示,通过display控制标签</h2>
<p v-show="isShow">我是v-show的P标签</p>
<h2>v-if控制标签内部是否显示,直接把该标签从dom中删除</h2>
<p v-if="isShowTwo">我是v-if的P标签</p>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
name: "杨赋华",
age: 18,
list1: ["a", "b", "c"],
obj: {name: "杨赋华", age: "18"},
link: "<a href=\"https://mzt8.com/wp-content/uploads/2023/07/VOL_157_1.jpg\">每日妹子图</a>",
isShow: true, // true显示该标签,false隐藏该标签
isShowTwo: true // true显示该标签,false删除该标签
},
})
</script>
小案例
// 通过点击按钮显示和不显示图片:代码
<body>
<div id="app2">
<p><button @click="Girls">点击按钮显示妹子</button></p>
<img src="img/测试图.jpg" alt="" v-if="girlsimg" height="400px" width="400px">
</div>
<script>
let vn = new Vue({
el: "#app2",
data: {
girlsimg: false
},
methods: {
Girls() {
this.girlsimg = !this.girlsimg
}
}
})
</script>
</body>
小总结
vue 的指令系统 ,放在标签,以v-开头的,每个指令都有特殊用途
v-text:把字符串内容渲染到标签内部
v-html:把字符串内容渲染到标签内部,但如果是标签字符串,会渲染成标签
v-show:控制标签显示与否:通过style的display是否等于none控制,在html中还存在
v-if:控制标签显示与否:通过dom操作做的,这个标签从dom中删除了
事件指令
用v-on绑定事件后,只要触发事件,就会执行函数
v-on:点击事件,双击事件,滑动事件 ='函数'
用的最多的就是click事件 ,单击事件
v-on:click=‘函数’---》放在标签上,点击标签,就会触发函数执行---》函数必须写在methods中,可以用es6语法的简写
methods: {
// handleClick: function () {
// alert('美女')
// }
handleClick() { // es6 语法
alert('美女')
},
}
v-on: 可以使用 @ 替换
代码
<body>
<div id="app1">
<h1>事件指令</h1>
<button v-on:click="cat">点我看美女</button>
<!-- <img src="img/测试图.jpg" alt="" >-->
<button v-on:click="cat1">点我看参数</button>
</div>
<script>
new Vue({
el: "#app1",
data: {},
methods: {
cat() {
alert("美女")
},
cat1(a, b) {
console.log(a, b)
}
}
})
</script>
</body>
<!--如果不传参数,默认第一个参数是,点击事件对象:PointerEvent-->
<!--如果只穿一个参数,点击事件对象就不传了,第一个参数是传入得知第二个参数是undefined-->
<!--如果传入两个参数,就会正常使用-->
<!--如果传入多个参数,还是只会用对应的-->
<!--如果一个传入正常参数,另一个传入绑定对象,第一个参数就是正常参数,第二个参数是绑定对象-->
属性指令
作用:
每个标签都有属性,动态替换属性的值,就要用到属性指令
用法;
v-bind:属性="指令"
简写:
:id = "变量"
:name = "变量"
代码
<body>
<div id="app1">
<h1>属性指令</h1>
<div>
<button @click="hander">点我看美女</button>
<hr>
<button @click="handle">点我放大美女</button>
<hr>
<img v-bind:src="img_url" alt="美女图" :height="height" :width="width">
</div>
</div>
</body>
<script>
new Vue({
el: "#app1",
data: {
img_url: "",
height: "100px",
width: "100px",
},
methods: {
hander() {
this.img_url = "img/测试图.jpg"
},
handle() {
this.height = "1800px"
this.width = "1000px"
}
}
})
</script>
点击切换图片
<body>
<div id="app1">
<h1>属性指令</h1>
<div>'/
'
'/
'/
<h1>点我切换图片</h1>
<button @click="handers">点我切换美女</button>
<hr>
<img :src="img_urls" alt="" :height="height" :width="width">
</div>
</div>
</body>
<script>
new Vue({
el: "#app1",
data: {
img_urls: "img/测试图.jpg",
img_list: ["img/测试图.jpg", "img/测试图1.jpg", "img/测试图2.jpg", "img/测试图3.jpg", "img/测试图4.jpg", "img/测试图5.jpg", "img/测试图6.jpg"]
},
methods: {
handers() {
this.img_urls = this.img_list[Math.floor(Math.random() * this.img_list.length)]
this.height = "500px"
this.width = "400px"
}
}
})
</script>
类属性
<style>
.red {
background-color: aqua;
}
.purple {
background-color: brown;
}
</style>
<body>
<div id="app1">
<button @click="henderClass">点我显示class</button>
<hr>
<div :class="isClass?'red':'purple' ">
<h1>My name is 陈冠希</h1>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: "#app1",
data: {
img_url: "",
height: "100px",
width: "100px",
heights: "100px",
widths: "100px",
img_urls: "img/侧视图.jpg",
img_list: ["img/测试图.jpg", "img/测试图1.jpg", "img/测试图2.jpg", "img/测试图3.jpg", "img/测试图4.jpg", "img/测试图5.jpg", "img/测试图6.jpg"],
isClass: true
},
henderClass() {
this.isClass = !this.isClass
}
}
})
</script>
style和class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.big {
font-size: 60px;
}
.back {
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="app">
<h1>class和style:能够绑定什么类型的变量:字符串,数组,对象</h1>
<h2>style绑定字符串,数组,对象</h2>
<div :style="style_obj">
<button @click="handleXi">点击变细</button>
<button @click="handleFont">点击字变小</button>
<p>我是div内的p</p>
</div>
<h2>class绑定字符串,数组,对象</h2>
<div :class="class_obj">
<button @click="handleClick1">点击去掉背景</button>
<button @click="handleClick2">点击子变大</button>
<button @click="handleClick3">点击子变小</button>
<p>我是div内的p</p>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// style是字符串类型
style_str: 'background: red;font-size: 60px;font-weight: bold',
// style是数组类型
style_list: [{'background': 'red'}, {fontSize: '60px'}, {fontWeight: 'bold'}],
// style:是对象类型(建议用对象)
style_obj: {'background': 'red', fontSize: '60px', 'font-weight': 'bold'},
// class 是字符串类型
class_str: 'big back',
// class 是数组类型--->推荐用它
class_list: ['big', 'back'],
// class 是对象类型
class_obj: {big: true, back: true}
},
methods: {
handleXi() {
this.style_str = 'background: red;font-size: 60px'
this.style_list.pop()
}, handleFont() {
this.style_obj.fontSize = '30px'
}, handleClick1() {
// this.class_str = 'big'
// this.class_list.pop()
this.class_list.shift()
}, handleClick2() {
this.class_list.push('big')
}, handleClick3() {
this.class_obj.big = false
}
}
})
</script>
</html>
条件渲染
v-if 、 v-else-if 、 v-else
<body>
<div id="app1">
<span v-if="score >= 90">优秀</span>
<span v-else-if="score >= 70 && score<=90">良好</span>
<span v-else-if="score >= 60 && score<=70">一般</span>
<span v-else>不及格</span>
</div>
</body>
<script>
new Vue({
el: "#app1",
data: {
score: 80
}
})
</script>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<style>
.big {
font-size: 60px;
}
.back {
background-color: greenyellow;
}
</style>
<title></title>
</head>
<body>
<div id="app1">
<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="deleteShow">点我删除购物车</button>
<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>
new Vue({
el: "#app1",
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},
]
},
deleteShow() {
this.good_list.pop()
}
}
})
</script>
</html>
v-for能循环的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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,显示在前端 ------->跨域问题
后端代码:
class Cat_All_Book(ViewSetMixin, APIView):
@action(methods=["GET"], detail=False)
def cat_book(self, request, *args, **kwargs):
book_obj = Book.objects.all().filter(is_delete=0)
book_list = []
for book in book_obj:
book_list.append({"book_id": book.pk, "book_name": book.book_name, "book_price": book.book_price})
response = Response(book_list, )
response["Access-Control-Allow-Origin"] = "*"
return response
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<button class="btn btn-success" @click="cat_book">点我显示购物车</button>
<button class="btn btn-danger">点我删除书籍</button>
<table class="table table-bordered">
<thead>
<tr>
<th>图书ID</th>
<th>图书名字</th>
<th>图书价格</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books_list">
<td>{{ book['book_id'] }}</td>
<td>{{ book["book_name"] }}</td>
<td>{{ book["book_price"] }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app1",
data: {
books_list: []
},
methods: {
cat_book() {
var _this = this;
$.ajax({
url: "http://127.0.0.1:8000/book/cat_book/",
methods: "get",
success: function (args) {
_this.books_list = args;
console.log(_this.books_list)
}
})
}
},
})
</script>
</html>
把uniapp,开发工具hbuilder下载,点击切换美女图片--->包成安装apk--->安装到自己手机上
标签:Vue,name,img,Day02,list,jpg,基础知识,book,标签
From: https://www.cnblogs.com/chao0308/p/17722006.html