vue快速入门

vue基础：

0.插值表达式：{{}}

1.指令：

1.1 v-html,v-text

< p v-html= "str" > p >//用于绑定字符串，会自动解析标签

< p v-text= "info" > p >//用于绑定文本信息

1.2 v-on 

< div v-on: click= "fastClick" >点我有惊喜 div >

< div @ click= "fastClick" >点我有惊喜 div >//这是简写形式

1.3 v-if

 

          A
 

 

          B
 

          C

          Not A/B/C

1.4 v-show

与v-if相似，用于控制是否出现，v-show是状态的改变（display），而v-if是是否添加或删除节点元素。

我是P标签

1.5 v-bind 用于绑定属性：

< img v-bind:src= "img_url" alt= "" >

//这是简写方式

1.6 v-model//数据双向绑定

< input type= "text" name= "" v-model= "msg" value= "" >

1.6 v-for

< div v-for= "(item,index) in lists" : key= "index" >

{{index}} {{item}}

div >

如果发现我们遍历的dom结构一样，只是数据不一样，就可以不用写key，默认不写就是就地复用
如果发现，我以后，需要对生成好的dom结构进行更改(删除、更改)，最好给其加上key

2 组件

5种组件定义方式：

方式一：

//定义

var logincomponents = Vue. extend({

template: '

ads

'

})

//注册

Vue. component( 'login', logincomponents)

//使用时直接将login当标签使用。在挂载的根元素中使用

方式二：将定义和注册写在一起

Vue. component( 'login',{

template: '

{{msg}}

',

data: function(){

return {

msg: '傻逼'

}

}

})

方式三：

< script id= "template" >

< p >< span >{{ msg}} span > p >

< / script >

Vue. component( 'login',{

template: '#template',

data: function(){

return {

msg: '傻逼'

}

}

})

方式四：

< template id= "template" >

< p >< span >{{msg}} span > p >

template >

Vue. component( 'login',{

template: '#template',

data: function(){

return {

msg: '傻逼'

}

}

})

方式五：

创建的是.vue文件

3 filter

//局部过滤器

var vm = new Vue({

el: '#app',

data:{

ss: 'ssss'

},

filters:{

//局部过滤器

upperCase( data){

return data. toUpperCase();

}

}

})

//全局过滤器

Vue. filter( 'toUpperCase', function( input){

return input. toUpperCase()

})

4 路由

使用路由需要导入路由组件

< / script >< script src= "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js" > script >

template中：

< div id= "app" >

< router-link to= "/goodslist" >商品列表 router-link >

< router-link to= "/newslist/1001" >新闻列表 router-link >< br />

< router-view > router-view >

div >

script中：

//1、定义组件（不要注册）

var goodslistComponent = Vue. extend({

template: '

• 洗发水
• 三只松鼠
• 保暖内衣

'

})

var newsComponent = Vue. extend({

template: '

• 隧道出问题了{{$route.params.newId}}
• 冷空气来袭
• 携程事件

'

})

//2.创建路由对象，设置好路由规则

var router = new VueRouter({

routes:[

{ path: '/', redirect: '/goodslist'},

{ path: '/goodslist', component:goodslistComponent}, //设置路由规则，就会注册组件

{ path: '/newslist/:newId', component:newsComponent}]})

//3.创建Vue实例，并且注入路由对象

var vm = new Vue({

el: "#app",

router:router //把路由对象注入到根实例中，这样项目才拥有路由功能

})

5 网路请求

这同样需要引入主件：

< script src= "https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js" > < / script >

var vm = new Vue({

el: "#app",

methods:{

getLogin: function(){

var url = "http://127.0.0.1:3000/login?username=zhangsan&password=455"

this. $http. get( url). then( function( response){

console. log( response. body)})},

PostLogin(){

var url = "http://127.0.0.1:3000/postLogin"

// emulateJSON:true//设置请求头

this. $http. post( url,{ username: 'lisi', password: 'magnmazi'},{ emulateJSON: true}). then( function( response){

console. log( response. body)})},

jsonpDouban: function(){

var url = "https://api.douban.com/v2/movie/top250"

this. $http. jsonp( url). then( function( response){

console. log( response. body)

})}}})