1.基础使用
1. <script src="cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
可以使用cdn
也可以保存在本地,使用时,导入即可
小案例:点击自动切换图片
<!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="handlshow">点我换图片</button>
<img v-bind:src="url" alt="" @click="hanglow">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
url:'https://picx.zhimg.com/v2-40db00ef919cb6592655488f2d2fc87f_1440w.jpg',
//图片列表
url_list:[
'https://pic4.zhimg.com/80/v2-a369d0a1a7f6bb5cd9047ed8bb39cc1f_720w.webp',
'https://pic3.zhimg.com/80/v2-d8ce83d396bda6fca1cd2dc28d4627f2_720w.webp',
'https://pic3.zhimg.com/80/v2-373b826f8ff78f2a594f921f440cb5aa_720w.webp',
'https://pic4.zhimg.com/80/v2-a2098afc8689b516f5509eae96b89733_720w.webp',
'https://pic4.zhimg.com/80/v2-8619ab6a39dfe9b78a2a3c90a554f8c3_720w.webp',
'https://pic3.zhimg.com/80/v2-7301042500eb9683e4a812d1990732ea_720w.webp',
]
},
methods:{
//函数
handlshow(){
var _this=this //将最初的this赋值给_this 方便后面使用
this.timer=setInterval(function(){ //etInterval(function(){},1000) 定时器
t=Math.floor(Math.random()*_this.url_list.length)
// console.log(_this.url_list[t])
_this.url=_this.url_list[t]
}, 1000)
console.log(this.timer)
},
hanglow(){
console.log(this.timer)
clearInterval(this.timer); //结束定时器 this.timer定时器的名字
}
}
})
</script>
</body>
</html>
2.插值语法
<!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>
<p>对象:{{wife}}--->{{wife['name']}}---->{{wife.age}}</p>
<p>标签形式字符串:{{a}}--->说明不存在xss攻击</p>
<p>-----插值语法,还可以放,简单表达式和函数(后面了)-----</p>
<p>简单表达是:{{1 + 1}}</p>
<p>三目运算符【条件?符合条件执行这个:不符合条件】:{{10>2?'正确':'不正确'}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age: 19,
hobby: ['篮球', '足球', 'spa'], // js 就叫数组
wife: {name: '刘亦菲', age: 38}, // js 中叫对象
a: '<a href="http://www.baidu.com">点我看美女</a>' // 标签形式字符串
}
})
</script>
</html>
3.文本指令
# v-text:把变量渲染在标签内部
# v-html:把标签类型的字符串直接渲染成标签
# v-if: 控制标签显示与否,直接删除或加入标签
# v-show:控制标签显示与否,通过样式的display: none;控制显示与否
4.事件指令
# 用的最多的就是点击事件,给某个标签绑定一个点击事件,当点击一下,就执行某个函数
# 使用方式
v-on:事件名='函数名'
# 重点: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="handlshow">点我换图片</button>
<img v-bind:src="url" alt="">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
url:'https://picx.zhimg.com/v2-40db00ef919cb6592655488f2d2fc87f_1440w.jpg',
//图片列表
url_list: 'https://pic4.zhimg.com/80/v2-a369d0a1a7f6bb5cd9047ed8bb39cc1f_720w.webp',
},
methods:{
//函数
handlshow(){
this.url=this.url_list
},
}
})
</script>
</body>
</html>
5.属性指令
# 标签上 name id class src href ,height 属性
如果这样,name='xx' 就写死了,我们想动态的绑定变量,变量变化,属性的值也变化
# v-bind:属性名='变量'
# 简写成: :属性名='变量'
案例同事件指令
6.条件渲染-------v-if
案例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="score>90&&score<=100">优秀</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>
let vm = new Vue({
el: '#app',
data: {
score: 92
},
methods: {}
})
</script>
</html>
7.v-for---循环
v-for 都可以循环 -----# 数字,字符串,数组,对象
# 看到别人写v-for时,在标签上都会加一个 key 属性,目的是为了提高虚拟dom的替换效率
<el-carousel-item v-for="item in 4" :key="item">
# key 的值必须唯一,如果不唯一就报错###### 以后如果数据变了,页面没有发生变化#####
Vue.set(对象, key, value)
Vue.set(数组, 索引, 值)
案例:显示购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">购物车</h1>
<div class="pull-right">
<button class="btn btn-danger" @click="handleClick">加载购物车</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>id号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
good_list: []
},
methods: {
handleClick() {
this.good_list = [
{'id': 1, 'name': '小汽车', 'count': 2, 'price': 100000},
{'id': 2, 'name': '脸盆', 'count': 1, 'price': 23},
{'id': 3, 'name': '方便面', 'count': 3, 'price': 6},
{'id': 4, 'name': '钢笔', 'count': 4, 'price': 5},
]
}
}
})
</script>
</html>