一、介紹
1、Vue.js 是什么
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，
Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，
官方網站：https://cn.vuejs.org
2、初始Vue.js
首先引入vue.min.js到專案檔案目錄下，
創建 demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id標識vue作用的范圍 -->
<div id="app">
<!-- {{}} 插值運算式，系結vue中的data資料 -->
{{ message }}
</div>
<script src="https://www.cnblogs.com/lvwuwa/p/vue.min.js"></script>
<script>
// 創建一個vue物件
new Vue({
el: '#app',//系結vue作用的范圍
data: {//定義頁面中顯示的模型資料
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
這就是宣告式渲染：Vue.js 的核心是一個允許采用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統
這里的核心思想就是沒有繁瑣的DOM操作，例如jQuery中，我們需要先找到div節點，獲取到DOM物件，然后進行一系列的節點操作
3、在vs code中創建代碼片段
檔案 => 首選項 => 用戶代碼片段 => 新建全域代碼片段/或檔案夾代碼片段：vue-html.code-snippets
注意：制作代碼片段的時候，字串中如果包含檔案中復制過來的“Tab”鍵的空格，要換成“空格鍵”的空格
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=https://www.cnblogs.com/"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
二、基本語法
1、基本資料渲染和指令
你看到的 v-bind 特性被稱為指令，指令帶有前綴 v-
除了使用插值運算式{{}}進行資料渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）
創建 01-基本資料渲染和指令.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 如果要將模型資料系結在html屬性中，則使用 v-bind 指令
此時title中顯示的是模型資料
-->
<h1 id="app" v-bind:title="message">
{{ content }}
</h1>
<!-- v-bind 指令的簡寫形式： 冒號（:） -->
<h1 id="app" :title="message">
{{ content }}
</h1>
</div>
<script src="https://www.cnblogs.com/lvwuwa/p/vue.min.js"></script>
<script>
// 創建一個vue物件
new Vue({
el: '#app',//系結vue作用的范圍
data: {
content: '我是標題',
message: '頁面加載于 ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
2、雙向資料系結
雙向資料系結和單向資料系結：使用 v-model 進行雙向資料系結
創建 02-雙向資料系結.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-bind:value只能進行單向的資料渲染 -->
<input type="text" v-bind:value="https://www.cnblogs.com/lvwuwa/p/searchMap.keyWord">
<!-- v-model 可以進行雙向的資料系結 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查詢的是：{{searchMap.keyWord}}</p>
</div>
<script src="https://www.cnblogs.com/lvwuwa/p/vue.min.js"></script>
<script>
// 創建一個vue物件
new Vue({
el: '#app',//系結vue作用的范圍
data: {
searchMap:{
keyWord: '尚硅谷'
}
}
})
</script>
</body>
</html>
3、事件
需求：點擊查詢按鈕，按照輸入框中輸入的內容查找公司相關資訊
在前面的例子基礎上，data節點中增加 result，增加 methods節點 并定義 search方法，
html中增加 button 和 p，
使用 v-on 進行數件處理，v-on:click 表示處理滑鼠點擊事件，事件呼叫的方法定義在 vue 物件宣告的 methods 節點中，
創建 03-事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-on 指令系結事件，click指定系結的事件型別，事件發生時呼叫vue中methods節點中定義的方法 -->
<button v-on:click="search()">查詢</button>
<p>您要查詢的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="https://www.cnblogs.com/lvwuwa/p/result.site" target="_blank">{{result.title}}</a></p>
<!-- v-on 指令的簡寫形式 @ -->
<button @click="search()">查詢</button>
</div>
<script src="https://www.cnblogs.com/lvwuwa/p/vue.min.js"></script>
<script>
// 創建一個vue物件
new Vue({
el: '#app',//系結vue作用的范圍
data: {
searchMap:{
keyWord: '尚硅谷'
},
//查詢結果
result: {}
},
methods:{
search(){
console.log('search');
this.result = {
"title":"尚硅谷",
"site":"http://www.atguigu.com"
}
}
}
})
</script>
</body>
</html>
4、修飾符
修飾符 (Modifiers) 是以半角句號（.）指明的特殊后綴，用于指出一個指令應該以特殊方式系結，
例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件呼叫 event.preventDefault()：
即阻止事件原本的默認行為
創建 04-修飾符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
</script>
<div id="app">
<!-- 修飾符用于指出一個指令應該以特殊方式系結，
這里的 .prevent 修飾符告訴 v-on 指令對于觸發的事件呼叫js的 event.preventDefault()：
即阻止表單提交的默認行為 -->
<form action="save" v-on:submit.prevent="onSubmit">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>
</div>
<script src="https://www.cnblogs.com/lvwuwa/p/vue.min.js"></script>
<script>
// 創建一個vue物件
new Vue({
el: '#app',//系結vue作用的范圍
data: {
user: {}
},
methods: {
onSubmit() {
if (this.user.username) {
console.log('提交表單')
} else {
alert('請輸入用戶名')
}
}
}
})
</script>
</body>
</html>
5、條件渲染
v-if：條件指令
創建 05-條件渲染.html
注意：單個復選框系結到布林值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" name="" id="" v-model="ok">是否同意1{{ok}}
<p v-if="ok">同意</p>
<p v-else>查看協議，，，，，，，，，，</p>
</div>
<div id="app2">
<input type="checkbox" name="" id="" v-model="ok">是否同意2{{ok}}
<p v-show="ok">同意</p>
<p v-show="!ok">查看協議，，，，，，，，，，</p>
</div>
<script src="https://www.cnblogs.com/lvwuwa/p/vue.min.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
ok:false
}
})
let app2 = new Vue({
el:'#app2',
data:{
ok:false
}
})
</script>
</body>
</html>
v-show：條件指令
使用v-show完成和上面相同的功能
<!-- v:show 條件指令 初始渲染開銷大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>
（1）v-if 是“真正”的條件渲染，因為它會確保在切換程序中條件塊內的事件監聽器和子組件適當地被銷毀和重建，
（2）v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊，
（3）相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換，
（4）一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷，因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好，
6、串列渲染
v-for：串列回圈指令
創建 06-串列渲染.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1、簡單的串列渲染 -->
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
<!-- 如果想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在后面 -->
<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>
<script>
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
</script>
<!-- 2、遍歷資料串列 -->
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270838.html
標籤：Html/Css