2018-06-22 10:48:05 4604瀏覽
Vue是現(xiàn)在最流行的前端框架之一，而且相對(duì)于其他兩個(gè)框架React和Angular來說也更加易學(xué)，而且它的作者是國(guó)人，中文文檔也很完善。當(dāng)然Vue框架算是比較高級(jí)的框架，所以在使用過程中還需要JavaScript、JavaScript2015、WebPack、NodeJS、npm、ESLint、JavaScript單元測(cè)試框架等其他知識(shí)和框架的使用方法。在學(xué)習(xí)Vue之前，最好先學(xué)習(xí)一下這些知識(shí)。由于Vue的中文文檔比較完善，所以這里只介紹Vue框架的一些核心概念，詳細(xì)的使用方法還得查看官方文檔。
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>Vue單文件例子</title> <scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> </body> </html>
<h1>Vue實(shí)例</h1>
<divid="s1">
<p>{{data}}</p>
</div>
<script>
letvm1=newVue({
el:'#s1',
data:{
data:'一些數(shù)據(jù)'
}
})
</script>
<h1>模板語(yǔ)法</h1>
<divid="s2">
<buttonv-on:click='changeText'>修改文本</button>
<p>文本：{{text}}</p>
<p>組合表達(dá)式：</p>
<pv-once>只渲染一次的文本:{{text}}</p>
<p>HTML代碼：<spanv-html="html"></span></p>
<p>屬性:
<buttonv-bind:disabled="disabled">禁用按鈕</button>
</p>
</div>
<script>
letvm2=newVue({
el:'#s2',
data:{
text:1,
html:'<del>666</del>',
disabled:true
},
methods:{
changeText:function(event){
this.text+=1
}
}
})
</script>
<h1>計(jì)算屬性</h1>
<divid="s3">
<p>單詞：{{words}}</p>
<p>單詞大寫：{{toUpper}}</p>
</div>
<script>
letvm3=newVue({
el:'#s3',
data:{
words:'Iloveyou'
},
computed:{
toUpper:function(){
returnthis.words.toUpperCase()
}
}
})
</script>
<h1>條件渲染</h1>
<divid="s4">
<h3>v-if渲染會(huì)實(shí)際創(chuàng)建和銷毀對(duì)象</h3>
<p>分?jǐn)?shù)是:<inputtype="text"v-model="mark"/></p>
<pv-if="mark<60">不及格</p>
<pv-else-if="mark<80">及格</p>
<pv-else="">優(yōu)秀</p>
<h3>v-show僅僅調(diào)用CSSdisplay屬性</h3>
<button@click="toggleShow">改變show狀態(tài)</button>
<pv-show="show">可以看到我</p>
</div>
<script>
letvm4=newVue({
el:'#s4',
data:{
mark:80,
show:true
},
methods:{
toggleShow:function(){
this.show=!this.show
}
}
})
</script>
<h1>列表渲染</h1>
<divid="s5">
<h3>名字列表</h3>
<ul>
<liv-for="nameinnames">{{name}}</li>
</ul>
<h3>人物表格</h3>
<table>
<thead>
<tr>
<td>編號(hào)</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<trv-for="(person,index)ofpeople":key="index">
<td>{{index}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
letvm5=newVue({
el:'#s5',
data:{
names:[
'zhang3',
'li4',
'yitian',
'jojo'
],
people:[
{name:'zhang3',age:24},
{name:'li4',age:25},
{name:'yitian',age:24},
{name:'jojo',age:30}
]
}
})
</script>
<h1>事件處理</h1>
<divid="s6">
<h3>計(jì)數(shù)器</h3>
<p>
<button@click="addCount">增加計(jì)數(shù)</button>
<em>{{count}}</em>
</p>
<h3>獲取按鍵(單擊、回車和空格)</h3>
<inputtype="text"
@keyup.enter="alert('按下了回車')"
@keyup.space="alert('按下了空格')"
@click="alert('單擊')"/>
</div>
<script>
letvm6=newVue({
el:'#s6',
data:{
count:0
},
methods:{
addCount:function(){
this.count++
}
}
})
</script>
<h1>綁定表單</h1>
<divid="s7">
<p>文本框：{{text}}</p>
<p>多行文本：{{textArea}}</p>
<p>單選按鈕：{{radio}}</p>
<p>復(fù)選框：{{checkbox}}</p>
<p>多選框：{{select}}</p>
<hr>
<p>文本框：<inputtype="text"v-model="text"></p>
<p>多行文本：<textareav-model="textArea"></textarea></p>
<p>單選按鈕：<inputtype="radio"v-model="radio"value="1"id="one"><labelfor="one">1</label>
<inputtype="radio"value="2"v-model="radio"id="two"><labelfor="two">2</label>
</p>
<p>復(fù)選框：<inputtype="checkbox"v-model="checkbox"id="checkbox"><labelfor="checkbox">復(fù)選框</label></p>
<p>多選框：<selectid="select"v-model="select">
<optionvalue="1">1</option>
<optionvalue="2">2</option>
<optionvalue="3">3</option>
<optionvalue="4">4</option>
</select>
</p>
</div>
<script>
letvm7=newVue({
el:'#s7',
data:{
text:'text',
textArea:'textArea',
radio:'',
checkbox:'',
select:'',
}
})
</script>
letcomponent1={
template:'<h3>{{hello}}</h3>',
data(){
return{
hello:'helloworld'
}
}
}
Vue.component('組件標(biāo)簽名',{
//實(shí)際組件
})
letvm8=newVue({
el:'#s8',
components:{
'hello-world':component1,
}
})
letcomponent1={
template:'<p>{{hello}}{{name}}</p>',
data(){
return{
hello:'helloworld'
}
},
props:[
'name'
]
}
<hello-worldname="zhang3"></hello-world>
<hello-world:name="name"></hello-world>
<h1>組件</h1>
<divid="s8">
<h3>helloworld組件</h3>
<hello-world></hello-world>
<h3>從父組件傳遞數(shù)據(jù)</h3>
<hello-worldname="zhang3"></hello-world>
<h3>動(dòng)態(tài)傳遞數(shù)據(jù)</h3>
<hello-world:name="name"></hello-world>
</div>
<script>
letcomponent1={
template:'<p>{{hello}}{{name}}</p>',
data(){
return{
hello:'helloworld'
}
},
props:[
'name'
]
}
letvm8=newVue({
el:'#s8',
data:{
name:'yitian'
},
components:{
'hello-world':component1,
}
})
</script>
.v-enter-active{
transition:all1s;
}
.v-leave-active{
transition:all1s;
}
.v-enter,.v-leave-to{
opacity:0;
}
<divid="s9">
<h3>按鈕過渡</h3>
<button@click="show=!show">改變狀態(tài)</button>
<transition>
<pv-if="show">Hello</p>
</transition>
</div>
<script>
letvm9=newVue({
el:'#s9',
data:{
show:true
}
})
<transitionenter-active-class="animatedfadeInLeft" leave-active-class="animatedfadeOutUpBig"> <pv-if="show">Hello</p> </transition>
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>vue-sample</title> </head> <body> <divid="app"></div> <!--builtfileswillbeautoinjected--> </body> </html>
importVuefrom'vue'
importAppfrom'./App'
Vue.config.productionTip=false
/*eslint-disableno-new*/
newVue({
el:'#app',
template:'<App/>',
components:{App}
})
<template>
<divid="app">
<imgsrc="./assets/logo.png">
<hello-world/>
</div>
</template>
<script>
importHelloWorldfrom'./components/HelloWorld'
exportdefault{
name:'app',
components:{
HelloWorld
}
}
</script>
<style>
...
</style>
importVuefrom'vue' importRouterfrom'vue-router' Vue.use(Router) exportdefaultnewRouter()
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
Vue.config.productionTip=false
/*eslint-disableno-new*/
newVue({
el:'#app',
router,
template:'<App/>',
components:{App}
})
importVuefrom'vue'
importRouterfrom'vue-router'
importHelloWorldfrom'@/components/HelloWorld'
Vue.use(Router)
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'Hello',
component:HelloWorld
},
],
})
<template> <divid="app"> <imgsrc="./assets/logo.png"> <router-view></router-view> </div> </template>
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'Hello',
component:HelloWorld
},
],
mode:'history'
})
plugins:[
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery',
Popper:['popper.js','default'],
})
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
//引入Bootstrap文件
import'bootstrap'
import'bootstrap/dist/css/bootstrap.min.css'
Vue.config.productionTip=false
/*eslint-disableno-new*/
newVue({
})
<metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no">
importVuefrom'vue'
importElementUIfrom'element-ui'
import'element-ui/lib/theme-default/index.css'
importAppfrom'./App.vue'
Vue.use(ElementUI)
newVue({
el:'#app',
render:h=>h(App)
})
以上就是小編給大家分享的解析如何學(xué)習(xí)Vue框架快速入門的示例代碼，希望對(duì)小伙伴們有所幫助，想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢。扣丁學(xué)堂是專業(yè)的HTML5培訓(xùn)機(jī)構(gòu)，扣丁學(xué)堂不僅有專業(yè)的老師和與時(shí)俱進(jìn)的課程體系，還有大量的HTML5視頻教程供學(xué)員觀看學(xué)習(xí)哦?？鄱W(xué)堂H5技術(shù)交流群：559883758。
【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】
查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>
全國(guó)免費(fèi)咨詢熱線
郵箱：codingke@1000phone.com
官方群：148715490
返回頂部