Vue简介
Vue是市场三大主流框架之一.和Angular, React都是基于JavaScript开源框架.Vue框架是一种js渐进式框架, 相对于React(gitup),偏向于做pc端.
Vue的优点: 轻量级,中文API, 支持双向绑定, MVVM设计模式,组件开发,单页面应用.
渐进式: 可以根据开发进行调整Vue框架控制项目的具体位置: 可以是一个标签,一个页面,也可是整个项目.
Vue简单使用
下载链接: https://cn.vuejs.org/v2/guide/installation.html. 下图下载入口. 开发版本完整版, 生成版本压缩版.都可以使用.
使用时导入本地即可使用
<!--本地vue文件导入. 下载的VUE文件路径--> <script src="js/vue.js"></script> <!--cdn下Vue文件导入, 这种方式必须在联网状态--> <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: '<h1>h1html文本渲染</h1>' // html:文本渲染 } }) </script>
5, 事件指令
语法: v-on:事件名="函数名(参数)", 简写形式: @事件名="函数名(事件名)".
使用methods实例成员提供, 事件函数实现.
事件传参：函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue</title> <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 v-on:dblclick="dblAction">双击</p>--> <!--@mouseover 鼠标悬浮事件--> <p @mouseover="overAction()">悬浮</p> <p @mouseover="overAction(10)">悬浮1</p> <p @mouseover="overAction(10, 20)">悬浮2</p> <p @mouseover="overAction(10, 20, $event)">悬浮3</p> </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>Vue</title> <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="">属性指令1</p> <!-- 单值绑定--> <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令1</p> <!-- style属性绑定--> <p :style="myStyle">样式绑定1</p> <!-- class--> <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=""> <!--1) 对表单标签value进行绑定操作变量，不能时时检测绑定的变量--> <input class="inp1" type="text" :value="info"> <input class="inp2" type="text" :value="info"> <p class="p1">{{ info }}</p> <hr> <!--2) 表单标签的值有 v-model="变量" 来绑定控制，操作的还是value，但是拥有时时变量值的检测 --> <input class="inp1" type="text" v-model="info"> <input class="inp2" type="text" v-model="info"> <p class="p1">{{ info }}</p> <hr> <!-- 2) v-model操作单独复选框 - 确认框 --> 是否同意：<input type="checkbox" name="agree" v-model="isAgree"> <!--是否同意：<input type="checkbox" name="agree" true-value="yes" false-value="no" v-model="isAgree">--> <p>{{ isAgree }}</p> <!-- 3) 单选框--> 性取向： 男 <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> <!-- 4) 复选框--> 兴趣爱好： 男 <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>Vue</title> </head> <body> <div id="app"> <!-- if与show--> <div v-if ='r1'>if条件</div> <div v-show ='r2'>show条件</div> <!-- if, else-if else使用--> <div v-if ='r1'>if条件</div> <div v-else-if ='r2'>else-if条件</div> <div v-else>else条件</div> <!-- 条件语句的其他用法--> <ul> <li @click="action('a')">a</li> <li @click="action('b')">b</li> <li @click="action('c')">c</li> </ul> <ul> <li v-if="flag == 'a'">aaa</li> <li v-else-if="flag == 'b'">bbb</li> <li v-else>ccc</li> <li v-show="flag == 'a'">aaa</li> <li v-show="flag == 'b'">bbb</li> <li v-show="flag == 'c'">ccc</li> </ul> </div> </body> <script src="js/vue.js"></script> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/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>Vue</title> </head> <body> <div id="app"> <!-- v-once指令--> <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>Vue</title> </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>Vue</title> </head> <body> <div id="app"> <!--div.box>h1{标题}+(p.p${文本内容}*2)--> <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>Vue</title> <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"> <!--div.box>h1{标题}+(p.p${文本内容}*2)--> <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>Vue</title> <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"> <!--div.box>h1{标题}+(p.p${文本内容}*2)--> <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>