前言
Vue.js 自身不是一個全能框架–它只聚焦於視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時 ，Vue.js 也能完美地驅動複雜的單頁應用。
一、vue.js是什麼
Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶界面的漸進式框架。
與其它大型框架不同的是，Vue 的核心庫只關注視圖層， 採用自底向上逐層應用的設計。不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
提示：以下是本篇文章正文內容，下面案例可供參考
二、聲明式渲染
Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：
代碼如下（示例）：
<body>
<div id="app">
<p>{
{
message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
三、什麼是指令
- 在vue中提供了一些對於頁面 + 數據的更爲方便的輸出,這些操作就叫做指令, 以v-xxx表示
- 類似於html頁面中的屬性 `
- 比如在angular中 以ng-xxx開頭的就叫做指令
- 在vue中 以v-xxx開頭的就叫做指令
- 指令中封裝了一些DOM行爲, 結合屬性作爲一個暗號, 暗號有對應的值,根據不同的值，框架會進行相關DOM操作的綁定
1、v-clock的使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<!-- 對於MVVM的理解 -->
<!-- 解放DOM -->
<!-- 指令：就是vuejs爲我們提供的方便操作的自定義屬性 -->
<!-- VUE在mvvm的基礎上創立使用 M:model數據 V：view頁面顯示 -->
<!-- View層，頁面顯示層 -->
<div id="app">
<!-- 1.在使用模板語法的標籤上添加v-cloak的指令 -->
<p v-cloak>{
{
msg+1+1+1+1+1+1+1+1+1+1+1+1}}</p>
<!-- 模板語法 -->
</div>
<!-- View end -->
<script src="./js/vue.min.js"></script>
<script>
//創建一個vue環境，創建一個VM層
let vm = new Vue({
el: '#app',
data: {
//Model層
msg: 'Hello world'
}
})
</script>
</body>
2、v-text的使用
<body>
<!-- 指令：標籤的自定義屬性 -->
<div id="app">
<!-- {
{
userName}} -->
<div v-text="username"></div>
</div>
<script src="./js/vue.min.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
userName:'admin'
}
})
</script>
</body>
3、v-html的使用
<body>
<div id="app">
<!-- {
{
myDiv}} -->
<div v-html="myDiv"></div>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
myDiv:'<h1>Hi</h1>'
}
})
</script>
</body>
4、v-pre的使用
<body>
<div class="wsx">
<p v-pre>{
{
say}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'.wsx',
data:{
say:'ALL the best!'
}
})
</script>
</body>
5、v-once的使用
<body>
<div id="app">
<p v-once>{
{
msg}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'最初的夢想：宇航員'
},
mounted(){
this.msg='後來我成爲了火箭工程編譯工程師'
}
})
</script>
</body>
6、v-model的使用
<body>
<!-- 雙向數據綁定 -->
<div id="app">
<input type="text" value="" v-model="userName">
<p>{
{
userName}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
userName:'admin'
}
})
</script>
</body>
7、v-on的使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<!-- 解放DOM -->
<div id="app">
<input type="text" v-model="num"><br>
<input type="button" value="+1" v-on:click="add">
<input type="button" value="-1" @click="sub">
</div>
<!-- View end -->
<script src="./js/vue.min.js"></script>
<script>
//創建一個vue環境，創建一個VM層
new Vue({
el: '#app',
data: {
num:1
},
//將num值進行操作
//methods：用來寫頁面需要的方法的配置項
methods:{
add:function(){
this.num +=1
//this.num = this.num+1
},
sub:function(){
this.num -=1
},
}
})
</script>
</body>
8、v-bind的使用
<body>
<!-- v-bind：用來綁定屬性的 可以簡寫爲：冒號 -->
<div id="app">
<img v-bind:src="srcUrl" alt="">
<img :src="srcUrl" alt="">
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
srcUrl:'./img/psb.jpg'
},//這個逗號不可以省略
mounted(){
//this也必須要，它是指VM實例
this.srcUrl='./img/psb (1).jpg'
}
})
</script>
</body>
提示：新人小白一枚，如有不對請多多指教！希望給您帶來幫助！多謝。