vue的基本使用
今日内容回顾
vue插值语法
1.mvvm演示
#MVVM架构
-M: model 数据层 js
-V: view 视图层 html,css
-VM view modle层，vue加入的一层
#插值语法中可以放
-变量 对象取值 数组取值
-简单的js语法
-函数
-注:插值不能写在标签的属性上 只能写在标签的内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<!--此处导入的为本地的vue-->
</head>
<body>
<div id="app">
姓名：{{name}}
<br>
<input type="text" v-model="name">
<!--实现效果:在输入框输入的文本会被喧嚷到页面上-->
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {name: 'lqz',age: 19}})
//定义在data中的变量 可以直接从vm实例中获取
//可通过vm._data.name='这样可修改数据'
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}},{{hobby[1]}}</p>
<!--直接取hobby就是整个列表 可通过中括号来索引取值-->
<p>字典取值{{dict}}--->{{dict.name}}>>>{{dict['age']}}</p>
<!--字典的取值可以直接取出 也可以通过中阔号按键取值-->
<p>简单的运算:{{10+2+5*2}}</p>
<p>三目运算符>>>>{{10>90?'大于':'小于'}}</p>
<!--三目运算符的格式:条件?条件一:条件二 成立执行条件一-->
<p>{{tit}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'xiaochen',
age: 19,
hobby: ['篮球', '足球', '乒乓球'],
dict: {'name': 'cyf', 'age': 19},
tit: '<a href="http://www.baidu.com">点我看美女</a>'}})
//在这的字段名可以引起来 也可以直接写(不能写别的字段)
</script>
</script>
</html>
文本指令
#指令系统
-v-xx 写在标签上 任意标签都行
-v-xx='' >>> 原来插值语法中能写的 这个都可以写 不需要{{}}
#v-text(注意连接符是-不是_)指令系统所提供的 可以将内容渲染到标内部
<p v-text='data中对应字段的变量名'></p>
#v-html将字符串的内容渲染成标签 写在标签内部
<p v-html='data中对应字段的变量名'></p>
#v-show 等于布尔值 控制标签中是否显示 如果为False 只是style="display: none;"
#v-if 等于布尔值 控制标签是否显示 如果为False 在dom中删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>v-text</h3>
<p v-text="a_url"></p>
<h3>y-html</h3>
<p v-html="a_url"></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data:{
a_url:'<a href="http://www.4399.com">点这里</a>',
}})
</script>
</html>
属性指令
# 标签上的属性可以绑定变量 变量变化 属性的值跟着变化
-href
-src
-name
-class
-style
-height
-....
# 语法
v-bind:属性名="变量名"
# 可以简写成
:属性名="变量名"
事件指令
# 事件指令:点击事件 双击事件 滑动事件....
v-on:事件名='函数'
# 可以简写成
@事件名='函数'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="aaa">点这里</button>
<div>
<img :src="url" alt="" width="100px" height="100px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//默认图片地址
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
//图片地址列表
url_list: [ 'https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg','https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg','https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg','https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg','https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',]},
// methods必须是这个字段里面写
methods: {
'aaa': function () {
var _this = this
// setInterval 是定时器
setInterval(function () {
var i = Math.round(Math.random() * (_this.url_list.length - 1))
//利用随机数模块取出一个数字作为索引
_this.url = _this.url_list[i]
//通过随机出来的索引数字来获取列表中的地址
},1000)
}
},
})
</script>
</html>
# 针对es6的一些特殊写法
"""
var hobby = ['篮球', '足球']
var f = function (a, b) {
console.log('匿名函数')
console.log(a + b)
}
// var d={'name':"lqz",age:19,'hobby':hobby}
// var d={'name':"lqz",age:19,hobby:hobby}
// var d = {'name': "lqz", age: 19, hobby} // es6 的简写形式
// var d = {'name': "lqz", age: 19, f} // es6 的简写形式
var d = {'name': "lqz", age: 19, handleClick(){
console.log('xxxxx')
}} // es6 的简写形式
console.log(d)
d.handleClick()
"""
class和style
# 本身都是属性指令 但是他们比较特殊 应用较为广泛
# class： 推荐用数组
:class='变量'
变量可以是字符串 数组 对象
# style：推荐用对象
:style='变量'
变量可以是字符串 数组 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.font {
font-size: 60px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.font-color {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h1>单纯的使用类中的属性</h1>
<div class="font red">我是div</div>
<h1>class</h1>
<div :class="class_obj">我是div</div>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
class_str:'red',
class_list:['font'],
class_obj:{red:true,font:true}
//添加的时候 键为类的字段 值代表着是否使用
}
})
</script>
</html>
一些需要会的前端操作命令
条件渲染
# v-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else 放在标签上，上面条件都不成立，显示这个标签
"""存在条件满足多个标签的出现"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>通过分数来控制分数的显示</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80&&score<90">良好</div>
<div v-else-if="score>=60&&score<80">及格</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm =new Vue({
el:'#app',
data:{
score:99
}
})
</script>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/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">
<h1>v-if+v-for 显示购物车</h1>
<button @click="handleClick" class="btn btn-danger">点我显示</button>
</div>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>id</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>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: false,
good_list: [
{id: 1, name: '钢笔', price: '29'},
{id: 2, name: '铅笔', price: '29'},
{id: 3, name: '文具盒', price: '298'},
{id: 4, name: '彩笔', price: '298'},]},
methods: {
handleClick() {
this.show = !this.show
},}})
</script>
</html>
浙公网安备 33010602011771号