简介
Vue.js是一套构建用户界面的渐进式框架,也可以用来构建数据驱动的 WEB 界面 Vue.js语法也可以用于手机APP开发,但是需要借助weex Vue.js只关注视图层,不仅易于上手,而且还便于与第三方库和既有项目整合 Vue.js主要负责MVC中的MVC这一层,主要工作就是和界面打交道,控制前端页面效果
MVC 和MVVM模式
MVC模式:后端的分层开发模式
MVVM模式:前端视图层的分层开发思想
Vue.js的基本使用
在HTML页面中通过URL 直接引入vue.js文件
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
</ head>
< body>
< div id = " app" >
< p> {{msg}}</ p>
</ div>
< script src = " https://unpkg.com/vue/dist/vue.js" >
< script type= "text/javascript" charset= "UTF-8" >
var vm= new Vue ( {
el : '#app' ,
data : {
msg : 'hello vue!'
}
} )
</ script>
</ body>
</ html>
Vue的一些基本指令
v-cloak,v-text,v-html
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> v-cloak,v-text,v-html</ title>
< style type = " text/css" >
[v-cloak] {
display : none !important ;
}
</ style>
</ head>
< body>
< div id = " app" >
< p v-cloak > +++{{msg}}+++</ p>
< p v-text = " msg" > ----</ p>
< p v-html = " msg2" > </ p>
</ div>
< script src = " https://unpkg.com/vue/dist/vue.js" >
< script type= "text/javascript" charset= "UTF-8" >
var vm= new Vue ( {
el : '#app' ,
data : {
msg : 'hello' ,
msg2 : '<h1>哈哈,我是一个大大的H1</h1>'
}
} )
</ script>
</ body>
</ html>
v-bind
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> v-bind</ title>
</ head>
< body>
< div id = " app" >
< input type = " button" value = " 提交" v-bind: title= " aa+' 123' " />
< input type = " button" value = " 提交" :title = " aa+' 456' " />
</ div>
< script src = " https://unpkg.com/vue/dist/vue.js" >
< script type= "text/javascript" charset= "UTF-8" >
var vm = new Vue ( {
el : '#app' ,
data : {
aa : '123'
}
} )
</ script>
</ body>
</ html>
v-on
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> v-on</ title>
</ head>
< body>
< div id = " app" >
< input type = " button" value = " 提交" v-on: click= " show" >
< input type = " button" value = " 提交" @mouseover = " show" >
</ div>
< script src = " https://unpkg.com/vue/dist/vue.js" >
< script type= "text/javascript" charset= "UTF-8" >
var vm= new Vue ( {
el : '#app' ,
data : {
msg : 'hello'
} ,
methods : {
show : function ( ) {
alert ( "aa" ) ;
}
}
} )
</ script>
</ body>
</ html>
练习:实现一个文字滚动效果
需求:点击某个按钮,将输入框中的文字循环滚动起来
代码
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 练习:</ title>
</ head>
< body>
< div id = " app" >
< input type = " button" value = " 浪起来" v-on: click= " change" >
< input type = " button" value = " 低调" v-on: click= " reset" >
< h4 v-cloak > {{msg}}</ h4>
</ div>
< script src = " https://unpkg.com/vue/dist/vue.js" >
< script type= "text/javascript" charset= "UTF-8" >
var vm = new Vue ( {
el : '#app' ,
data : {
msg : '猥琐发育,别浪~~~!' ,
intervalId : null ,
resMsg : null
} ,
methods : {
change ( ) {
if ( this . intervalId!= null ) {
return ;
}
if ( this . resMsg== null ) {
this . resMsg= this . msg;
}
this . intervalId= setInterval ( ( ) => {
var msg= this . msg;
var start= msg. substr ( 0 , 1 ) ;
var end= msg. substr ( 1 ) ;
var newMsg= end+ start;
this . msg= newMsg;
} , 400 ) ;
} ,
reset ( ) {
clearInterval ( this . intervalId) ;
this . intervalId= null ;
this . msg= this . resMsg;
}
}
} )
</ script>
</ body>
</ html>