智享笔记 Vue
-
计算属性基本用法
<body> <div id="app"> <div>{{msg}}</div> <div>{{reverseString}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 计算属性 */ var vm = new Vue({ el: '#app', data: { msg: 'Nihao' }, computed
-
局部指令用法
<body> <div id="app"> <input type="text" v-color='msg'> <input type="text" v-focus> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令-局部指令 */ var vm = new Vue({ el: '#app', data: { msg: { color: 'r
-
带参数的自定义指令
<body> <div id="app"> <input type="text" v-color='msg'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令-带参数 */ Vue.directive('color', { bind: function(el, binding){ // 根据指令的参数设置背景色 // console.log(bindi
-
自定义指令基本用法
<body> <div id="app"> <input type="text" v-focus> <input type="text"> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令 */ Vue.directive('focus', { inserted: function(el){ // el表示指令所绑定的元素 el.focus(
-
表单域修饰符用法
<body> <div id="app"> <input type="text" v-model.number='age'> <input type="text" v-model.trim='info'> <input type="text" v-model.lazy='msg'> <div>{{msg}}</div> <button @click='handle'>点击</button> </div> <script type="text/javascript" sr
-
表单基本操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { height: auto; } form div span:first-child { display: inline-block; width: 100px
-
选项卡案例
1 代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margin: 0; } .tab ul li { box-sizing: border-box; padding: 0; float: left; width: 100px; height: 45px; l
-
循环结构-遍历对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script type="text/javascri
-
循环结构-遍历数组
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <div>水果列表</div> <ul> <li v-for='item in fruits'>{{item}}</li> <li v-for='(item, index) in fruits'&g
-
分支结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <div v-if='score>=90'>优秀</div> <div v-else-if='score<90&&score>=80'>良好</div> <div v-else
-
样式绑定之style绑定用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div> <div v-bind:style='objStyles
-
样式绑定之class绑定3个细节用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } .test { color: blue; } .base { font-size: 28px;
-
样式绑定之class绑定数组用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style></head><body> <div
-
样式绑定之class绑定对象用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style></head><body> <div
-
v-model指令的本质
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{msg}}</div> <input type="text" v-bind:value="msg" v-on:input='handle'> <input type="text" v-bind:value="m
-
属性绑定基本用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <a v-bind:href="url">百度</a> <a :href="url">百度1</a> <button v-on:click='handle'>切换</button> </d
-
简单计算器案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>简单计算器</h1> <div> <span>数值A:</span> <span> <input type="text" v-model='a'> </span>
-
自定义按键修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <input type="text" v-on:keyup.aaa='handle' v-model='info'> </div> <script type="text/javascript" src="js/vue.js">&l
-
按键修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <form action=""> <div> 用户名： <input type="text" v-on:keyup.delete='clearContent' v-model='uname'> </div> <d