-
vue基础入门
一、下载VUE
这里下载的是开发版本 https://cn.vuejs.org/v2/guide/installation.html- 1
- 2
二、VUE的基本用法
1.引包
- 1
2.初始化Vue
解释：
1.el是初始化vue框架要渲染的范围
2.data 定义vue中要渲染的变量
3.{{ 变量 }}：这种方式叫做"插值表达式",引用vue中定义的变量DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js">script> <title>title> head> <body> <div id="app"> <span>我叫{{ name }}，今年我{{ age }}岁了span> div> <script> new Vue({ el: "#app", data: { name: "zhangsan", age: 20 } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
3.指令
上边例子只插入了文本和文字，如果插入带标签的文本就不行了
语法：v-text:插入本文 v-html:插入html <标签 v-xxx>标签>- 1
- 2
- 3
- 4
DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js">script> <title>title> head> <body> <div id="app"> <div v-html="name">div> <div v-text="age">div> div> <script> const vm = new Vue({ el: "#app", data: { name: "zhangsan", age: 20 } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
{{}}和v-text的作用是一样的
4.条件渲染
v-if
v-else
v-else-if
v-showv-show和v-if都是根据布尔值来进行判断的
例子：v-if和v-else
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js"></script> <title></title> </head> <body> <div id="app"> <div v-html="name"></div> <div v-text="age"></div> <span v-if = "num">显示</span> <span v-else>隐藏</span> </div> <script> const vm = new Vue({ el: "#app", data: { name: "zhangsan", age: 20, num: Math.random() > 0.3 } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
例子2：v-show
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js"></script> <title></title> </head> <body> <div id="app"> <div v-html="name"></div> <div v-text="age"></div> <span v-show = "res">显示</span> </div> <script> const vm = new Vue({ el: "#app", data: { name: "zhangsan", age: 20, res: false } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
5.v-bind绑定
对于标签内的文字可以使用插值表达式。对于标签的属性来说就不能使用了。这时候需要使用绑定来设置标签的属性。
v-bind的简写也可以使用:来代替<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js"></script> <title></title> </head> <body> <div id="app"> <a v-bind:href=link.url :title=link.title>{{ link.font }}</a> </div> <script> const vm = new Vue({ el: "#app", data: { name: "zhangsan", age: 20, res: false, link: { font: '百度', url: 'https://www.baidu.com', title: '百度一下' } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
三、监听事件v-on
在VUE中绑定事件使用v-on.也就是鼠标的事件.v-on的简写是@
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js"></script> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } .box { height: 200px; width: 200px; background-color: red; } .box1 { height: 200px; width: 200px; background-color: green; } </style> </head> <body> <div id="app"> <div class="box" :class='{box1:isactive}'></div> <button @click='aaa'>切换</button> </div> </body> <script> const vm = new Vue({ el: "#app", data: { name: '切换', isactive: false }, methods: { aaa(){ this.isactive = !this.isactive; } } }); </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
四、列表渲染v-for
注意：v-for 是来循环数据的。而不是用来循环html的
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for = 'i in data'>{{i}}</li> <li v-for = '(i,index) in data'>{{index}}:{{i}}</li> </ul> </div> </body> <script> const vm = new Vue({ el: "#app", data: { data: { name1: 'zhangsan', name2: 'lisi', name3: 'wangwu' } } }); </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
五、双向数据绑定v-model
当我们修改v-model的值的时候，p标签中的内容也会随之修改. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/vue.js"></script> <title></title> </head> <body> <div id="app"> <input type="text" v-model = 'gender'> <p>{{gender}}</p> </div> </body> <script> const vm = new Vue({ el: "#app", data: { gender: 'boy' } }); </script> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
多选的例子：
<body> <div id="app"> <input type="checkbox" value="西瓜" v-model="data"/> <label for="a">西瓜</label> <input type="checkbox" value="桃子" v-model="data"/> <label for="b">桃子</label> <br /> <span>{{ data }}</span> </div> </body> <script> const vm = new Vue({ el: "#app", data: { gender: 'boy', data: [] } }); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
六、VUE computed字段
前边我们用{{变量}} 来引入变量值，但是我们需要修改字符串或者处理字符串后 在引入的话，如果直接在{{}}里直接修饰的话，后期不方便维护。所有VUE规定了一个computed字段专门来做修饰的
<body> <div id="app"> <p>{{ fullname }}</p> </div> </body> <script> const vm = new Vue({ el: "#app", data: { gender: 'boy', xing: 'zhang', ming: 'san' }, computed: { fullname: function(){ return this.xing + this.ming; } } });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
-
相关阅读:
【力扣刷题】无重复字符的最长子串
虹科方案|用Western Digital和ATTO技术优化SMR存储解决方案的负载
C++核心编程：P15-＞STL----常用容器(上)
Java.lang.Class类 getFields()方法有什么功能呢？
C# 异步编程中的任务取消机制
Ai项目十四：基于 LeNet5 的手写数字识别及训练
大家好问一下MySQL连接数据库失败是怎么回事？
python实现维特比算法
IPIDEA的使用方式
centos7安装docker 并创建mysql
- 原文地址：https://blog.csdn.net/smile_pbb/article/details/126133479
