sql server使用混合金鑰實現列加密
阿新 • • 發佈：2020-09-01
1.引數分析
· el: 元素的掛載位置（值可以是css選擇器或者DOM元素） · data: 模型資料（值是一個物件）
① 相比插值表示式更加簡潔
· v-html 填充HEML片段
① 存在安全問題 ② 本網站內部資料可以使用，來自第三方的資料不可以用
· v-pre 填充原始資訊
① 顯示原始資訊，跳過編譯過程（分析編譯過程）
5.雙向資料繫結 ·v-model指令用法
6.3 事件函式引數傳遞 · 普通引數和事件物件
7.1 Vue如何動態處理屬性 · v-bind使用
8.1class樣式處理 · 物件語法
9.3迴圈結構 ·v-for遍歷陣列 ·key的作用：幫助Vue區分不同的元素，從而提高效能
· el: 元素的掛載位置（值可以是css選擇器或者DOM元素） · data: 模型資料（值是一個物件）
var vm = new Vue( { el : '#app', data :{ msg : 'Hello word!', msg1 :'<h1>這裡是v-html內容</h1>' } } );2.插值表示式 · 將資料填充到HTML標籤中 · 插值表示式支援基本的計算操作
<div>{{msg}}</div>
3.指令
· v-text 填充純文字① 相比插值表示式更加簡潔
· v-html 填充HEML片段
① 存在安全問題 ② 本網站內部資料可以使用，來自第三方的資料不可以用
· v-pre 填充原始資訊
① 顯示原始資訊，跳過編譯過程（分析編譯過程）
<div id="app" v-cloak> <div> {{msg}}4.資料響應式 · 如何理解響應式 ① html5中的響應式（螢幕尺寸的變化導致樣式的變化） ② 資料的響應式（資料的變化導致頁面內容的變化） · 什麼是資料繫結 ① 資料繫結：將資料填充到標籤中 · v-once 只編譯一次 ① 顯示內容之後不再具有響應式功能</div> <div v-text="msg"> </div> <div v-html="msg1"> </div> <div v-pre> {{msg}} </div> <input type="text" v-model="msg" /> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script type="text/javascript"> var vm = new Vue( { el : '#app', data :{ msg : 'Hello word!', msg1 :'<h1>這裡是v-html內容</h1>' } } ); </script>
5.雙向資料繫結 ·v-model指令用法
<input type="text" v-model="msg" />
var vm = new Vue( { el : '#app', data :{ msg : 'Hello word!', msg1 :'<h1>這裡是v-html內容</h1>' } } );6.事件繫結 6.1 Vue如何處理事件？ · v-on 指令用法
<button v-on:click="handle">點選</button>
<button @click="handle">點選</button>6.2 事件函式的呼叫方式 · 直接繫結函式名稱
<div id="app"> <div> {{num}} </div> <button @click="handle">點選</button> </div>
var vm2 = new Vue( { el:'#app', data:{ num : '0' }, methods:{ handle:function(){ this.num++; } } });· 呼叫函式 函式加（）
6.3 事件函式引數傳遞 · 普通引數和事件物件
<div id="app"> <div> {{num}} </div> <button @click="handle1">點選1</button> <button @click="handle2(123,456,$event)">點選2</button> </div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
/*
事件繫結-引數傳遞
1、如果事件直接繫結函式名稱，那麼預設會傳遞事件物件作為事件函式的第一個引數
2、如果事件繫結函式呼叫，那麼事件物件必須作為最後一個引數顯示傳遞，並且事件物件的名稱必須是$event
*/
var vm = new Vue({
el:('#app'),
data:{
msg:'Hello world',
num:0
},
methods:{
handle1:function(){
this.num++;
},
handle2:function(p,p1,event){
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
6.4 事件修飾符
· .stop阻止冒泡
· .prevent阻止預設行為
6.5 按鍵修飾符
<div id="app"> <form action="" method="post"> <input type="text" v-on:keyup.delete="clearContent" v-model="uname" /> <input type="password" v-on:keyup.enter="handle" v-model="pwd" /> <input type="button" value="點選" v-on:click="handle"/> </form> </div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
uname : '',
pwd : ''
},
methods:{
clearContent:function(){
//按delete鍵的時候 清空使用者名稱
this.uname = '';
},
handle:function(){
console.log(this.uname,this.pwd);
}
}
});
</script>
簡單計算器 案例
<body> <div id="app"> <h1>簡單計算器</h1> 數值A <input type="text" v-model="numa" /> <br /> 數值B <input type="text" v-model="numb" v-on:keyup.enter="count" /><br /> <input type="button" v-on:click="count" value="計算" /><br /> 計算結果 <span v-text="ct"></span> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ numa : '', numb : '', ct :'', }, methods:{ count:function(){ this.ct = parseInt(this.numa) + parseInt(this.numb); } } }) </script> </body>簡單計算器案例 7.屬性繫結
7.1 Vue如何動態處理屬性 · v-bind使用
<div id="app"> <a v-bind:href="url">百度</a> <a :href="url">百度</a> </div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
url:'http://www.baidu.com',
}
})
</script>
8樣式繫結8.1class樣式處理 · 物件語法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .active{ border: 1px solid red; background: orange; width: 100px; height: 100px; } </style> </head> <body> <div id="app"> <div v-bind:class="{active:isActive}"> 樣式繫結測試 </div> <button v-on:click="handle">切換</button> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ isActive:true, }, methods:{ handle:function(){ this.isActive = !this.isActive; } } }) </script> </body> </html>View Code
· 陣列語法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .active{ border: 1px solid red; background: orange; width: 100px; height: 100px; } .error{ color: white; font: bold; } .test{ color: blue; } </style> </head> <body> <div id="app"> <div v-bind:class="[activeClass,errorClass,{test:isTest}]">樣式繫結測試</div> <div v-bind:class="arrClasses">樣式陣列繫結測試</div> <div v-bind:class="objClasses">樣式物件測試</div> <button v-on:click="handle">切換</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> /* 樣式繫結相關語法細節 1、物件繫結和陣列繫結可以結合使用 2、class繫結的值可以簡化操作 3、預設的class如何處理？預設的class會保留 */ var vm = new Vue({ el:'#app', data:{ activeClass:'active', errorClass:'error', isTest:true, arrClasses:['active','error'], objClasses:{ active:true, error:true } }, methods:{ handle:function(){ this.activeClass=''; this.errorClass=''; this.isTest=!this.isTest; this.objClasses.active = false; } } }) </script> </body> </html>View Code 8.2style樣式處理 · 物件語法 · 陣列語法 9.分支迴圈結構 9.1分支結構 ·v-if ·v-else ·v-else-if ·v-show
<body> <div id="app"> <div v-if="score>=90">優秀</div> <div v-else-if="score>=80&&score<90">良好</div> <div v-else="score<80">一般</div> <div v-show="flag"> v-show測試 </div> <button v-on:click="handle">切換</button> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ score:90, flag:true, }, methods:{ handle:function(){ this.flag=!this.flag; } } }) </script> </body>9.2 v-if與v-show的區別 ·v-if控制元素是否渲染到頁面 ·v-show控制元素是否顯示（已經渲染到了頁面）
9.3迴圈結構 ·v-for遍歷陣列 ·key的作用：幫助Vue區分不同的元素，從而提高效能
<div id="app"> <ul> <li v-for="item in fruits">{{item}}</li> </ul> <ul> <li :key='index' v-for="(item,index) in myFruits"> <span> {{index + '-----' + item.ename}} </span> <span> {{item.cname}} </span> </li> </ul> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ fruits:['apple','orange','banana'], myFruits:[{ ename:'apple', cname:'蘋果' },{ ename:'orange', cname:'橘子' },{ ename:'banana', cname:'香蕉' }] } }) </script>
Tab選項卡案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .tab ul li{ float: left; width: 100px; height: 30px; border: 1px solid blue; list-style: none; text-align: center; cursor: hand; } .tab div{display: none;} .active{ background: orange;} .tab img{width: 400px; height: 300px; border: 1px solid darkgoldenrod;} .tab div.current{clear:both;display: block;} </style> </head> <body> <div id="app"> <div class="tab"> <ul> <li v-on:click="change(index)" :class="currentIndex==index?'active':''" :key='item.id' v-for="(item,index) in list">{{item.title}}</li> </ul> <div :class="currentIndex==index?'current':''" :key='item.id' v-for="(item,index) in list"> <img :src="item.path"/> </div> </div> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ currentIndex:0,//當前選項卡索引 list:[{ id:1, title:'apple', path:'../img/apple.jpg' },{ id:2, title:'orange', path:'../img/orange.jpg' },{ id:3, title:'banana', path:'../img/banana.jpg' }] }, methods:{ change:function(index){ this.currentIndex = index; } } }) </script> </body> </html>View Code