Vue简介
Vue是市场三大主流框架之一.和Angular, React都是基于JavaScript开源框架.Vue框架是一种js渐进式框架, 相对于React(gitup),偏向于做pc端.
Vue的优点: 轻量级,中文API, 支持双向绑定, MVVM设计模式,组件开发,单页面应用.
渐进式: 可以根据开发进行调整Vue框架控制项目的具体位置: 可以是一个标签,一个页面,也可是整个项目.
Vue简单使用
下载链接: https://cn.vuejs.org/v2/guide/installation.html. 下图下载入口. 开发版本完整版, 生成版本压缩版.都可以使用.
使用时导入本地即可使用
<script src="js/vue.js">script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
挂载点
挂载点控制页面及项目的范围
<body> <h1>{{Vue_h1}}h1> <h2>{{Vue_h2}}h2> body> <script src="js/vue.js">script> <script> new Vue({ el: 'h1' }) script>
将h1标签挂载, 页面只显示h2标签文本如下图所示; h1标签被Vue控制,所以没有显示. .
ps: body标签和html标签不可以做挂载点. 挂载点一般使用id属性
Vue实例
1, el:实例:
<script> new Vue({ el: 'h1' // 可以是标签名, 类名, 属性名 }) script>
2, data:数据
数据类型有: 字符串, 整形, 数组, 字典, 布尔值.
let a = 0;
let app1 = new Vue({
el: '#app1',
data: {
Vue_h1: '这是h1标签',
Vue_h2: '这是h2标签',
a, // a表示: a: a
}
})
ps:
实例成员data为vue提供数据环境, 数据采用字典{}键值对的形式. (字典中的键是字符串,两侧引号省略不写)
再插入的文本值中用{{变量名}}, 直接书写数据度key可以访问数据.
外部访问内部: 1, 挂载点内部的标签实例后,可以访问内部成员 (app1.$data.Vue_h1)
2, 也可以通过app这个变量来访问: app.Vue_h1
在vue实例内部的方法使用this.vue_h1一样.
3, 过滤器
过滤器对{ }}内数据操作. 语法{{值1...| 函数名(参数)}}, 将值当作参数传入
<body> <div id="app"> <p>{{msg}}p> <p>{{num + 1}}p> <p>{{num + 1 | f1}}p> <p>{{10, 20 | f2(10, 100)}}p> <p>{{10, 20, 30, 40, 50 | f2(10, 100)}}p> div> body> <script src="js/vue.js">script> <script> new Vue({ el: '#app', data: { msg: '过滤器', num: 3, }, // 过滤器函数 f1, f2 过滤器函数 {{值1...| 函数名(参数:值)}} filters: { f1: function (num) { return num*2 }, f2: function (a, b, c, d) { return a+b+c+d } } }) script>
4, 文本指令
插入表达式, 例: v-text指令, 渲染普通文本, 也可以使用v-html指令渲染文本, 可以渲染变量, 常量.
<body> <div id="app"> <p>{{info}}p> <p v-text="info">p> <p v-text="123">p> <p v-text="true">p> <p v-text="'abc' + info">p> <p v-text="[1, 2, 3]">p> <p v-html="sign">p> <h1>h1> div> body> <script src="js/vue.js">script> <script> new Vue({ el: '#app', data: { info: '文本渲染', // 普通文本渲染 sign: 'h1html文本渲染
' // html:文本渲染 } }) script>
5, 事件指令
语法: v-on:事件名="函数名(参数)", 简写形式: @事件名="函数名(事件名)".
使用methods实例成员提供, 事件函数实现.
事件传参：函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
<style>
body {
user-select: none;
}
.low-num {
cursor: pointer;
}
.low-num {
color: red;
}
style>
head>
<body>
<div id="app">
<p class="low-num" v-on:click="lowNum">
<span>点击减一:span>
<span>{{num}}span>
p>
<p @mouseover="overAction()">悬浮p>
<p @mouseover="overAction(10)">悬浮1p>
<p @mouseover="overAction(10, 20)">悬浮2p>
<p @mouseover="overAction(10, 20, $event)">悬浮3p>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
num: 100,
},
methods: {
lowNum: function () {
this.num --
},
dblAction(ev){
console.log(ev)
},
overAction(a, b, c) {
console.log(a, b, c)
}
}
})
script>
html>
6, 属性指令
1) 语法：v-bind:属性名="变量"
2) v-bind:属性名="变量" 简写 :属性名="变量"
3) 单值属性绑定： :title="变量" | :id="变量" | :自定义属性="变量"
4) style属性绑定： :style="字典变量" | ：style="{css属性1:变量1, ..., css属性n:变量n}"
5) class属性绑定： :class="变量" | :class="[变量1, ..., 变量n]" | :calss="{类名:布尔变量}"
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
<style>
[index] {
color: orange;
}
.cc {
background-color: yellowgreen;
color: greenyellow;
border-radius: 50%;
}
.cc1 {
background-color: yellowgreen;
}
.cc2 {
color: greenyellow;
}
.cc3 {
border-radius: 50%;
}
.tt {
background-color: gold;
color: orange;
}
style>
head>
<body>
<div id="app">
<p id="p1" class="p1" style="" title="" index="">属性指令1p>
<p id="p2" v-bind:class="p1" style="" title="" index="">属性指令1p>
<p :style="myStyle">样式绑定1p>
<p class="cc">class样式p>
<p :class="myc1">class1样式绑定p>
<p :class="[myc2, myc3, myc4]">class2样式绑定p>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
p1: 'q1aaaaa',
myStyle: {
backgroundColor: 'pink',
color: 'deeppink',
'border-radius': '50%',
},
myc1: 'cc', // 使用类名赋值
myc2: 'cc1',
myc3: 'cc2',
myc4: 'cc3',
}
})
script>
html>
动态修改案例
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.center {
text-align: center;
line-height: 200px;
}
.rcenter {
text-align: right;
line-height: 200px;
}
.right {
text-align: right;
}
.top {
line-height: 21px;
}
.bottom {
line-height: calc(400px - 21px);
}
style>
head>
<body>
<div id="app">
<div class="box" :class="[c1, {right:r, top:t, bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{ msg }}div>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
methods: {
a1(){
this.msg = '被悬浮';
// 正中
this.c1 = 'center';
this.r = 0;
this.t = 0;
this.b = 0;
},
a2(){
this.msg = '被按下';
// 右上
this.r = 1;
this.t = 1;
this.b = 0;
},
a3(){
this.msg = '被抬起';
// 右中
this.c1 = 'rcenter';
this.r = 0;
this.t = 0;
this.b = 0;
},
a4(){
this.msg = '被移开';
// 右下
this.r = 1;
this.t = 0;
this.b = 1;
},
},
data: {
msg: '',
c1: '',
r:0,
t:0,
b:0,
}
})
script>
html>
表单指令
1) 语法：v-model="控制vaule值的变量"
2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量)
3) v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量)
4) 单独复选框作为确认框时，v-model绑定的变量为布尔类型变量
5) 多复选框，v-model绑定的变量值是一个列表(数组)，存放复选框选项值(谁被选中就存放了谁)
6) 单选框，v-model绑定的变量值是某一个选项的值(值是哪个选项的值，那个选项就被选中)
```html DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>title> <style> .p1 { width: 500px; height: 21px; background-color: orange; } style> head> <body> <div id="app"> <form action=""> <input class="inp1" type="text" :value="info"> <input class="inp2" type="text" :value="info"> <p class="p1">{{ info }}p> <hr> <input class="inp1" type="text" v-model="info"> <input class="inp2" type="text" v-model="info"> <p class="p1">{{ info }}p> <hr> 是否同意：<input type="checkbox" name="agree" v-model="isAgree"> <p>{{ isAgree }}p> 性取向： 男 <input type="radio" name="sex" value="male" v-model="mysex"> 女 <input type="radio" name="sex" value="female" v-model="mysex"> 哇塞 <input type="radio" name="sex" value="others" v-model="mysex"> <p>{{ mysex }}p> 兴趣爱好： 男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies"> 女 <input type="checkbox" name="hobbies" value="female" v-model="myhobbies"> 哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies"> <p>{{ myhobbies }}p> <hr> <input type="submit"> form> div> body> <script src="js/vue.js">script> <script> new Vue({ el: '#app', data: { info: '123', isAgree: 0, // isAgree: 'no', mysex: 'others', myhobbies: ['male', 'female'] } }) script> html> ```
7, 条件指令
v-if, v-else-if, v-else,是Vue条件指令.和v-show效果相似,但是v-show是以display:none 方式渲染.
v-if="变量"
v-else-if="变量"
v-else
一组分支，上成立分支会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示
-->
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
head>
<body>
<div id="app">
<div v-if ='r1'>if条件div>
<div v-show ='r2'>show条件div>
<div v-if ='r1'>if条件div>
<div v-else-if ='r2'>else-if条件div>
<div v-else>else条件div>
<ul>
<li @click="action('a')">ali>
<li @click="action('b')">bli>
<li @click="action('c')">cli>
ul>
<ul>
<li v-if="flag == 'a'">aaali>
<li v-else-if="flag == 'b'">bbbli>
<li v-else>cccli>
<li v-show="flag == 'a'">aaali>
<li v-show="flag == 'b'">bbbli>
<li v-show="flag == 'c'">cccli>
ul>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
r1: false,
r2: false,
tag: 2,
flag: ''
},
methods: {
action: function (s) {
this.flag = s
}
}
})
script>
html>
8, 指令***
v-once指令：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改)
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
head>
<body>
<div id="app">
<b><input type="text" v-model="msg">b>
<b><input type="text" v-model="msg" v-once>b> // 这个v-model的值会固定, 重新给它输入新值,会改变
<p>{{msg}}p>
<p v-once>{{msg}}p>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
msg: '初始值!',
}
})
script>
html>
v-for循环指令:和python中for循环相似.
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
head>
<body>
<div id="app">
<p>{{ nums[2] }}p>
<ul>
<li v-for="num in nums">{{ num }}li>
ul>
<ul>
<li v-for="(num, index) in nums">{{ num }} {{ index }}li>
ul>
<ul>
<li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}li>
ul>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
nums: [1, 2, 3, 4, 5, 6, 7, 8, 9],
people: {
'name': 'oooo',
'age': 18,
'gender': 'xxx'
}
}
})
script>
html>
指令：
文本：{{}} v-text v-html v-once
属性：v-bind:href | :href :class='c1' :class='[c1, c2]' :style='s1'
（s1={color: "red"}）
事件：v-on:click | @click @click="action" @click="action(msg)" @click="action($event)"
表单：v-model
条件：v-show v-if v-else-if v-else
循环：v-for="(value, index) in list" v-for="(value, key, index) in dict"
成员:
el：挂载点
data：数据
methods：方法
computed：计算 -- 监听方法内所有的变量，返回值给绑定的变量，该变量无需在data中声明
watch：监听 -- 监听绑定的变量，绑定的变量必须在data中声明
9, 组件
组件: 有HTML,模板, 有css样式, 有js逻辑的集合体
根组件的模板就使用挂载点, 子组件必须自己定义template(局部组件, 全局子组件). 虚拟DOM会替换原有标签, 但只会用虚拟DOM第一个标签.
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
head>
<body>
<div id="app">
<p>{{msg}}p>
<p>{{msg}}p>
<p>{{msg}}p>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
msg: '组件',
msg1: '组件体'
},
// 虚拟DOM 替换#app标签内的标签.
template: `
<div>
{{msg1}}
</div>
`
})
script>
html>
1, 局部组件
首先要定义局部组件, 其次要在根组件中注册. 使用注册后标签,就可以调用局部组件. 这里的标签区分大小写, 需要使用-命名标签.
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
<style>
.box {
margin-left: 20px;
box-shadow: 0 3px 5px 0 #666;
width: 240px;
height: 300px;
text-align: center;
float: left;
padding: 20px 0;
}
.box img {
width: 200px;
}
style>
head>
<body>
<div id="app">
<mxc>mxc>
<mxc>mxc>
<mxc>mxc>
<local-tag>local-tag>
div>
body>
<script src="js/vue.js">script>
<script>
// 创建一个局部组件
let localTag = {
template: `
<div class="box">
<img src="img/222.png" alt=""> // 图片链接
<h3>她是一个人</h3>
<p>下载链接:www.55****</p>
</div>
`
};
new Vue({
el: '#app',
data: {
},
components: {
mxc: localTag,
localTag,
}
})
script>
html>
2, 全局组件
全局组件不需要注册, 但需要组件名和组件体
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
<style>
.box {
margin-left: 20px;
box-shadow: 0 3px 5px 0 #666;
width: 240px;
height: 300px;
text-align: center;
float: left;
padding: 20px 0;
}
.box img {
width: 200px;
}
style>
head>
<body>
<div id="app">
<global-tag>global-tag>
<global-tag>global-tag>
<global-tag>global-tag>
div>
body>
<script src="js/vue.js">script>
<script>
// 创建全局组件
Vue.component('global-tag', {
template: `
<div class="box">
<img src="img/222.png" alt="">
<h3>她是一个人</h3>
<p>下载链接:www.55****</p>
</div>
`
});
new Vue({
el: '#app',
data: {
},
})
script>
html>