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