2018-06-22 10:48:05 2507浏览
Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前，最好先学习一下这些知识。由于Vue的中文文档比较完善，所以这里只介绍Vue框架的一些核心概念，详细的使用方法还得查看官方文档。
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>Vue单文件例子</title> <scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> </body> </html>
<h1>Vue实例</h1>
<divid="s1">
<p>{{data}}</p>
</div>
<script>
letvm1=newVue({
el:'#s1',
data:{
data:'一些数据'
}
})
</script>
<h1>模板语法</h1>
<divid="s2">
<buttonv-on:click='changeText'>修改文本</button>
<p>文本：{{text}}</p>
<p>组合表达式：</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>计算属性</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渲染会实际创建和销毁对象</h3>
<p>分数是:<inputtype="text"v-model="mark"/></p>
<pv-if="mark<60">不及格</p>
<pv-else-if="mark<80">及格</p>
<pv-else="">优秀</p>
<h3>v-show仅仅调用CSSdisplay属性</h3>
<button@click="toggleShow">改变show状态</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>编号</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>计数器</h3>
<p>
<button@click="addCount">增加计数</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>复选框：{{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>复选框：<inputtype="checkbox"v-model="checkbox"id="checkbox"><labelfor="checkbox">复选框</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('组件标签名',{
//实际组件
})
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>从父组件传递数据</h3>
<hello-worldname="zhang3"></hello-world>
<h3>动态传递数据</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">改变状态</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)
})
以上就是小编给大家分享的解析如何学习Vue框架快速入门的示例代码，希望对小伙伴们有所帮助，想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂是专业的HTML5培训机构，扣丁学堂不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5视频教程供学员观看学习哦。扣丁学堂H5技术交流群：559883758。
【关注微信公众号获取更多学习资料】
全国免费咨询热线
邮箱：codingke@1000phone.com
官方群：148715490
15311698296
