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

 <div v-if="type === 'A'">
          A
 </div>
 <div v-else-if="type === 'B'">
          B
 </div>
<div v-else-if="type === 'C'">
          C
</div>
<div v-else>
          Not A/B/C
</div>

1.4 v-show

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

<p v-show="isShow">我是P标签</p>

1.5 v-bind 用于绑定属性：

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

<div :id="boxid"></div>//这是简写方式

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: '<p>ads</p>'

})

//注册

Vue. component( 'login', logincomponents)

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

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

Vue. component( 'login',{

template: '<p>{{msg}}</p>',

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文件

<template>
  <div class="mui-content">  
  </div>
</template>
<style scoped>//使用scoped样式只会在当前主件中有效
</style>
<script>
  //导入其它模块
  import common from '../../common/common.js'
  //导出Vue对象
  export default{
    // data:function(){ //es3
    //   return {
    //   }
    // }
    data(){

 //es5
      return {newslist:[] }},
    created(){//Vue框架内部会自动调用 },

    methods:{}
  }
</script>

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: '<ul><li>洗发水</li><li>三只松鼠</li><li>保暖内衣</li></ul>'

})

var newsComponent = Vue. extend({

template: '<ul><li>隧道出问题了{{$route.params.newId}}</li><li>冷空气来袭</li><li>携程事件</li></ul>'

})

//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)

})}}})