Vue框架
Posted huaixin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue框架相关的知识，希望对你有一定的参考价值。
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> ```
以上是关于Vue框架的主要内容，如果未能解决你的问题，请参考以下文章