1.{{}}模板語法、插值、簡單運算
2.指令系統
v-if 真正銷燬重建
v-show 更改css的display,用於重複切換出現css
v-bind 綁定屬性 :
v-on 綁定事件 @
v-for 遍歷,優先級相對高
v-html 解析html標籤
v-model 只適用於在表單控件 雙向數據綁定的一個體現html
雙向數據綁定=單向數據綁定+UI監聽vue
網站設計一共有23中模式
最常使用使用的三種:
MVC MVVM MTVnode
MVVM
Model View ViewModelwebpack
流程控制web
3.computed計算屬性
默認值有gettervue-cli
<!DOCTYPE html> <html> <head> <title></title> <style> *{ padding: 0; /* margin: 0; */ } ul{ list-style:none; } li{ border-bottom: 1px solid gray; } </style> </head> <body> <div id="music"> <audio :src='song' autoplay="" controls="" @ended="next" ></audio> <ul> <li v-for='(item,index) in songs' @click='huange(index)'> <h3>歌名:{{item.name}}</h3> <p>歌手:{{item.author}}</p> </li> </ul> </div> <script src="vue.js"></script> <script> var songs = [ {id:1,src:"./audio/1.mp3",name:"111",author:"111111"}, {id:2,src:"./audio/2.mp3",name:"112",author:"211111"}, {id:3,src:"./audio/3.mp3",name:"113",author:"311111"}, {id:4,src:"./audio/4.mp3",name:"114",author:"411111"} ]; var music=new Vue({ el:'#music', data:{ song:"./audio/1.mp3", songindex:0, songs:songs, }, methods:{ huange(index){ this.song=this.songs[index].src; }, next(){ this.songindex++; this.song=this.songs[this.songindex].src; }, }, computed:{ }, create(){ //頁面初始化 } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> <style> *{ padding: 0; /* margin: 0; */ } ul{ list-style:none; } li{ border-bottom: 1px solid gray; } </style> </head> <body> <div id="music"> <audio :src='currSong' autoplay="" controls="" @ended="next" ></audio> <ul> <li v-for='(item,index) in songs' @click='huange(index)'> <h3>歌名:{{item.name}}</h3> <p>歌手:{{item.author}}</p> </li> </ul> </div> <script src="vue.js"></script> <script> var songs = [ {id:1,src:"./audio/1.mp3",name:"111",author:"111111"}, {id:2,src:"./audio/2.mp3",name:"112",author:"211111"}, {id:3,src:"./audio/3.mp3",name:"113",author:"311111"}, {id:4,src:"./audio/4.mp3",name:"114",author:"411111"} ]; var music=new Vue({ el:'#music', data:{ songindex:0, songs:songs, }, methods:{ huange(index){ this.songindex=index; }, next(){ this.songindex++; //this.song=this.songs[this.songindex].src; }, }, computed:{ currSong(){ return this.songs[this.songindex].src; } }, create(){ //頁面初始化 } }) </script> </body> </html>
<!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"> <Vheader></Vheader> <Vheader></Vheader> <Vheader></Vheader> </div> <script src="vue.js"></script> <script> //組件的建立 Vue.component('Vheader',{ //data必定是函數,必需要有個返回值 data:function(){ return{ //必需要return一個對象,哪怕是一個空的對象,否則就報錯。 } }, template:`<div class="header"> <div class="w"> <div class="w-l"> <img src="./mei.jpg"/> </div> <div class="w-r"> <button>登陸</button><button>註冊</button> </div> </div> </div>` }) var app=new Vue({ el:"#app", data:{ }, methods:{ }, computed:{ }, }) </script> </body> </html>
打開cmd,執行cnpm install -g vue-cli
安裝完畢後,執行vue -V查看是否安裝成功,若是輸出版本號則成功。
在cmd下,執行 vue list
在cmd下切換到指定目錄,而後執行 vue init webpack-simple demo(demo是自定義的項目名)npm
而後按回車,按回車,直到讓選是否是user sass?選擇N,由於如今還不會sass瀏覽器
而後如圖中所提示的執行:sass
cd demo
npm install
npm run dev
瀏覽器訪問:http://localhost:8080/便可看到vue界面
使用vs-code編輯vue文件,須要安裝擴展Vetur,在編輯器左側中找。
一個vue文件就是一個組件,重寫App.vue
<!--一個組件有三個部分組成--> <template> <!-- 頁面的結構 --> <div class="app"> <h3>{{msg}}</h3> </div> </template> <script> //頁面的業務邏輯 export default{ name:'App', data(){ return{ msg:'hello 組件!' } } } </script> <style> </style>
1.在項目目錄下新建組件目錄components,在目錄下新建三個組件文件:Vheader.vue,Vcontent.vue,Vfooter.vue。
<template> <header class="nav"> 我是header <h3>頭</h3> </header> </template> <script> export default { name:'Vheader', data(){ return{ } } } </script> <style scoped> h3{ color: red; } </style>
<template> <div class="wrap"> 我是中心內容區域 <h3>頭</h3> </div> </template> <script> export default { name:'Vcontent', data(){ return{ } } } </script> <style scoped> h3{ color: yellow; } </style>
<template> <footer class="toot"> 我是footer <h3>頭</h3> </footer> </template> <script> export default { name:'Vfooter', data(){ return{ } } } </script> <style scoped> h3{ color: blue; } </style>
2.在App.vue下引用:
<!--一個組件有三個部分組成--> <template> <!-- 頁面的結構 --> <div class="app"> <h3>{{msg}}</h3> <Vheader></Vheader> <vcontent></vcontent> <vfooter></vfooter> </div> </template> <script> //1.先引入子組件 import Vheader from '../components/Vheader.vue' import Vcontent from '../components/Vcontent' import Vfooter from '../components/Vfooter' //頁面的業務邏輯 export default{ name:'App', data(){ return{ msg:'hello 組件!' } }, methodes:{}, computed:{}, //2.掛載 components:{ Vheader, Vcontent, Vfooter, }, } </script> <style> </style>
webpack+node.js將咱們的項目更加方便化。
更有助於開發者快速開發。
建立組件
1.cd 到當前目錄下
2.vue init webpack-simple 項目名
3.接下來根據提示操做
4.cd 項目名
5.npm install
6.npm run dev
7.只關心src下的文件夾裏面的文件