vue 第一天 之內部指令
阿新 • • 發佈：2021-01-17
技術標籤：vuejavascriptjs
學習vue的第一天：
基本語法：
<body>
<div id="app">
{{message}}
</div>
<script>
// es6 中 使用 tel(變數) / const(常量) 不建議用 var
const app = new Vue({
el: '#app',
data: {
message: 'Hello ChengLang'
}
})
</script> 1.Muhtache 語法：
{{}} 兩個大括號 也叫大鬍子 當然這個可以改的 你可以改成你喜歡的任意符號，
Vue.config (原始碼目錄 src/config.js)
找到 let delimiters = [’{{’,’}}’]
<div id="app">
<h2>{{message}}</h2>
<!-- 可寫簡單的表示式 -->
<h2>{{firstName + lastName}}</h2>
<h2> 2.v-once：
特定需求下 需要view不隨著data的改變而進行更改下可用
<div id="app">
<!-- v-once 不隨著資料的改變而進行更改 -->
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello ChengLang'
},
methods: {}
})
</script>
3.v-html：
當服務端返回的內容 格式是html v-html可以直接渲染到頁面上
<div id="app">
<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello ChengLang',
url: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
},
methods: {}
})
</script>
4.v-text：
作用類似雙大括號 但是一般用的很少 靈活性比較低 瞭解即可
<div id="app">
<h2>{{message}}</h2>
<!-- 作用類似 但是一般用的很少 -->
<h2 v-test="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello ChengLang'
},
methods: {}
})
</script>
5.v-pre：
作用：把內容原封不動的顯示出來。
<div id="app">
<h2>{{message}}</h2>
<!-- 原封不動的顯示出來 不經過vue的解析 -->
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello ChengLang'
},
methods: {}
})
</script>
6.v-cloak：
作用： 當網路較慢，網頁還在載入 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 原始碼,等到Vue渲染出來 就會造成一個閃動。v-cloak 就可以解決這麼一個問題。
<head>
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- vue 的機制是 當vue還沒解析到這裡 v-cloak這個標籤它是 是存在的
一旦解析經過這裡 vue就會把這個標籤刪掉。 可以利用這個原理
當vue解析完才讓這部分內容顯示出來
-->
<div id="app" v-cloak>
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
// 利用定時器 模擬因網路波動 延遲載入vue
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: 'Hello ChengLang'
},
methods: {}
})
}, 2000)
</script>