VUE之实例成员
一:基础简介
(1)前段框架简介
(1)angular:
(1)由Facebook开发 适用于大型项目
(2)react:
(1)由GitHub公司开发
(3)Vue:
(1)由中国人尤雨溪开发 吸取了angular与react的优点
(2)Vue框架的优点
(1)轻量级:该框架大小比较小
(2)中文API:由于是中国人开发 操作文档全是中文 对中国人比较友好
(3)数据驱动:DOM元素让DOM文档随着数据的变化而变化
(4)双向绑定:数据层与视图层的同步 当写入数据的时候 视图层跟着发生变化
(5)MVVM的设计模式:将前段与后端分离出来
(6)组件化开发:HTML + CSS + JS协同开发
(7)单页面的应用:为手机节约内存等
(3)渐进式框架:
(1)其可以控制一个标签 一个页面 甚至一个项目
(4)Vue的导入方式
<script src="statict/vue.js"></script> // 本地直接导入
<script src="https://cn.vuejs.org/js/vue.min.js"></script> // cdn 导入
二:实例成员 --- 挂载点
(1)作用:
(1)与HTML页面进行关联
(2)html与body不能作为挂载点
(3)一个vue挂载点之匹配一个结果 因此一般VUE挂载点都使用id
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <div id="wrap"> {{ }} <hr> <div class="main"> </div> <hr> <div class="main"> {{ }} </div> </div> </body> <script> <!-- 生成一个vue对象--> new Vue({ // el: '.main' // 与main进行挂载 最下面的main不会被挂载 el:'#wrap' // 与wrap进行挂载 所有的被挂载点都会消失 }) </script>
(2)JS对象(字典)小特性
<script> let age = 18; let user_info = { user:'SR', // 当字典内部的key都是字符串的时候 key中引号可以省略不写 age // 当key中的值为变量的时候 且值与key同名 则值可以不写 age:age }; // age: 18 // user: "SR" console.log(user_info) </script>
三:实例成员 --- 数据
(1)在vue实例中通过data添加数据
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <!--插值式获取值--> <p>{{age}}</p> <p>{{name}}</p> <p>{{address}}</p> </div> </body> <script> new Vue({ el:'#app', data:{ // 通过data为挂载点添加数据 age:18, name:'SR', address:'China', } }) </script>
(2)通过插值式获取值
<!--插值式获取值--> <p>{{age}}</p> <p>{{name}}</p> <p>{{address}}</p>
(3)变量接收vue生成的对象 通过变量名访问内部属性(内部属性都是以$开头)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> let app = new Vue({ // 变量接收 实例化产生的对象 el:'#app', data:{ // 通过data为挂载点添加数据 age:18, name:'SR', address:'China', } }) </script> <script> console.log(app); // 获取一个对象 内部对应的方法属性 console.log(app.$data.name); // SR console.log(app.$data.age) // 18 </script>
(4)直接通过变量名访问内部的属性
<script> console.log(app); // 获取一个对象 内部对应的方法属性 console.log(app.name); // SR console.log(app.age) // 18 </script>
四:实例成员 --- 过滤器
(1)作用:过滤器本身就是用来处理函数的 其可以将插值式中的数据作为参数传给函数进行处理 得到的函数返回结果就是函数处理后的结果
(2)使用方式:
{{ ...变量 | 过滤器(...变量) }}
(3)过滤器在实例中由filters提供
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <!-- 插值表达式中 可以做些简单的运算--> <p>{{num + 100}}</p> <!-- 字符串方法属性--> <p>{{msg.split('')[0]}}</p> <!-- 调用过滤器f1--> <p>{{num|f1}}</p> <!-- 该函数传多个参数--> <p>{{ 10, 20, 30, 40 | f2 }}</p> <!-- 给函数括号内传递两个产生--> <p>{{ 10, 20 | f2(50, 80) }}</p> <!-- 传递参数不够 返回Nan--> <p>{{ 120 | f2 }}</p> <!-- 函数内部传参过多 网页报错--> <p>{{ 10, 20, 30, 40,60 | f2 }}</p> </div> </body> <script> let app = new Vue({ el: '#app', data: { num: 100, msg: '消息提示框' }, filters: { f1: function (num) { return num * 2 }, f2: function (a, b, c, d) { return a + b + c + d } } }) </script>
五:实例成员 --- 文本指令
(1)使用方式:
v-text 渲染普通文本
v-html 渲染html页面
(2)文本指令 可以渲染常量 可以渲染变量
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <p>{{name}}</p> <!-- 渲染变量--> <p v-text="name">{{name}}</p> <!-- 渲染常量--> <p v-text = '123'></p> <p v-text = 'true'></p> <!-- 有特殊符号的加上特殊符号即可--> <p v-text = '"hello world"'></p> <p v-text = '"李木子 " + name' ></p> <p v-text = "[1,2,3,4]"></p> <!-- 加上html--> <p v-html><b>hello world</b></p> </div> </body> <script> let app = new Vue({ el: '#app', data: { name: 'SR', age: 18 } }) </script>
(3)反引号特点:
(1)反引号可以写多行
(2)反引号可以填充变量
<script> let s1 = `第一行 第二行 结束行`; console.log(s1); let name = 'SR'; let age = 18; let s2 = ` name: ${name} age: ${age} `; console.log(s2); </script>
六:实例成员 --- 事件指令
(1)语法:
v-on:事件名="函数名(参数们)
(2)简写
@事件名="函数名(参数们)
(3)使用方式
用methods实例成员提供 事件函数 的实现
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> body { /*页面文本不允许选择*/ user-select: none; } .low-num { cursor: pointer; } .low-num:hover { color: red; } </style> </head> <body> <div id="app"> <!-- 事件指令:v-on:事件名="事件函数名" --> <p class="low-num" v-on:click="lowNum"> <span>点击减一:</span> <span>{{ num }}</span> </p> <p v-on:dblclick="dblAction">双击</p> <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数" --> <!-- 不传参--> <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> let app = new Vue({ el: '#app', data: { num: 100 }, methods: { lowNum: function () { this.num -= 1 // 每次点击 num变量减一 }, dblAction(ev) { console.log(ev) // 事件对象 }, overAction(a, b, c) { console.log(a, b, c) } } }) </script>
PS:
(1)@事件="方法" --- > 传递事件参数
(2)@事件 = "方法()" --- > 不传递任何参数
(3)@事件 = "方法(参数)" ---> 自定义参数
(4)@事件 = "方法(参数,$event)" --- > 自定义参数 + 事件对象
七:实例成员 --- 属性指令
(1)语法:
v-bind:属性名="变量"
(2)简写
:属性名="变量"
(3)单值属性绑定
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <p class="p1" id="p1" index="">属性变量1</p> <!-- 单属性 调用变量p1--> <p v-bind:class="p1" index="">属性变量2</p> <!-- 简写方式 :属性名='变量'--> <p :class="p1" index="">自定义属性 + 变量名简写/p> </div> </body> <script> let app = new Vue({ el:'#app', data:{ p1:'q1', } }) </script>
(4)style多值属性绑定
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <!-- 其调用myStyle这个变量 myStyle调用对应的值--> <p :style="myStyle">style样式属性一</p> <!-- 前面的key对应的值 值从变量中获取--> <p :style="{backgroundColor: c1, color: c2,textAlign:c3}">style样式属性二</p> </div> </body> <script> let app = new Vue({ el: '#app', data: { p1: 'q1', myStyle: { backgroundColor: 'red', textAlign: 'center' }, c1: 'yellow', c2: 'red', c3: 'center' }, }) </script>
(5)class多值属性绑定
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .c1 { background-color: antiquewhite; } .c2 { font-size: 100px; } .c3 { text-align: center; } </style> </head> <body> <div id="app"> <p :class="myc1">class单属性</p> <!-- 调用变量myc1 myc2 myc3 所对应的值 其值调用上述css--> <p :class="[myc1,myc2,myc3]">class多属性</p> </div> </body> <script> let app = new Vue({ el: '#app', data:{ myc1:'c1', myc2:'c2', myc3:'c3', } }) </script>
(6)class属性绑定布尔值
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .ttt { background-color: gold; color: orange; } </style> </head> <body> <div id="app"> <!--xxx是类名,是否起作用有布尔类型变量yyy值决定 --> <p :class="{xxx:yyy}">样式绑定</p> <!--案例:点击切换类名是否起作用--> <!-- 此时ttt所对应的布尔值为真 被调用--> <p @click="clickAction" :class="{ttt:yyy}">点击切换样式 </p> </div> </body> <script> let app = new Vue({ el: '#app', data:{ yyy:true }, methods:{ clickAction(){ this.yyy = !this.yyy; } } }) </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
八:实例成员 --- form提交表单
(1)基础语法:
v-model="控制vaule值的变量"
(2):value="变量" 直接绑定数据不会时时更新(修改表单标签值,值不会时时映射给绑定的变量)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .p1 { width: 500px; height: 21px; background-color: orange; } </style> </head> <body> <div id="app"> <form> <!-- 此时不会有数据同步--> <p>输入值:<input type="text" :value="num"></p> <p>输入值:<input type="text" :value="num"></p> <p class="p1">{{ num }}</p> <hr> <!-- 此时数据会同步 input框内输入什么 下面变量对应什么--> <p>输入值:<input type="text" v-model="num"></p> <p>输入值:<input type="text" v-model="num"></p> <p class="p1">{{ num }}</p> </form> </div> </body> <script> let app = new Vue({ el: '#app', data: { num: '123' } }) </script>
(3)v-model操作单独复选框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<p class="p1">{{ num }}</p> <hr> 提交:<input type="checkbox" name="agree" v-model="isAgree"> <p>{{isAgree}}</p> // 如果同意下发的isAgree会变成true <p><input type="submit"></p> </form> </div> </body> <script> let app = new Vue({ el: '#app', data: { num: '123', isAgree: 0 } }) </script>
(4)单选框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
性别: 男 :<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> </form> </div> </body> <script> let app = new Vue({ el: '#app', data: { num: '123', isAgree: 0, mysex: 'others', //默认单选 } })
(5)多选框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
兴趣爱好: 乒乓球: <input type="checkbox" name="hobbies" value="pingpang" v-model="myhobbies"> 羽毛球:<input type="checkbox" name="hobbies" value="basketball" v-model="myhobbies"> 排球 :<input type="checkbox" name="hobbies" value="voliball" v-model="myhobbies"> <p>{{ myhobbies }}</p> </form> </div> </body> <script> let app = new Vue({ el: '#app', data: { myhobbies:['basketball','voliball'] // 多选 } })