關於Vue使用小結

VUE是什麼？

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架，基於JavaScript，輕量，無依賴

 

Vue能作什麼？

視圖界面美化

 

Vue的使用步驟

1. 入門

 1.安裝vue --這裏提早安裝好 了npm

npm install vue   ---》知道便可-咱們使用的是vue-cli

npm install -g vue-cli  --->-g全局安裝，之後使用方便

1. 使用vue
   1. vue基礎結構

 

new Vue({

            el:"#myApp",

            data:{

                msg:"zs"

            },

            methods:{//方法

                clickMe(){

                    this.msg=this.msg+i++;

                }

            }，。。。。。

        })

el : 用於綁定對象，這個vue對象與只做用域綁定的對象

data : 定義字段值，

能夠經過  {{ key }} 在綁定對象中使用取值，這裏是單向的取值

能夠經過v-model=」 key 」,取值，這裏取值是雙向的，在過程當中綁定對象中的值與Vue。Data中的 值同步更新

Vue對象中的對象（data，method。。）屬性能夠直接key獲取如：

<div id="aytest">
    <span v-text="message"></span>
    <span v-text="user.name"></span>
    <span v-html="message"></span>
    <span v-html="user.name"></span>
</div>
<!--js代碼-->
<script>
    var xxx =
    new Vue({
        el:"#aytest",
        data:{
            message:"<h3>掉包了......</h3>",
            user:{
                name:"ay"
            }
        }
    })
</script>

以上的取值就是直接去的，對象user也是直接去了點屬性

 

Vue的執行流程

 

Vue 的流程圖中的內容按順序執行，其中鉤子方法是在執行過程的的一些方法，默認沒有寫內容，可是依舊會在特定的時間段執行特定的方法，咱們只須要在vue對象中《覆寫》這個方法便可在對應時段執行咱們的代碼了。

 

vue支持的操做

    1）簡單表達式

    2）三目運算

    3）字符串操做

    4）數組操做

    5）JSON對象操做

vue的指令

• v-model=「表達式」 數據雙向綁定
• v-text=「表達式」  設置標籤中的文本
• v-html=「表達式」  設置標籤中的html
• v-if(else else if)=「表達式」    判斷條件
• v-for=「表達式」   循環
• v-on=「表達式」    註冊事件

vue的事件

<div id="app">
  <h1>結果</h1>
    {{num}}
  <h1>表達式的寫法</h1>
 <button v-on:click="num++">按鈕</button><br/>
 <button @click="num++">按鈕</button><br/>

 <h1>事件處理函數</h1>
 <button v-on:click="myclick">按鈕</button><br/>
 <button @click="myclick">按鈕</button><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		num:0
	},
	methods:{
		myclick:function(){
			app.num++;
			console.log(this);
		}
	}
});

     經過v-on：event或者@event來綁定事件，甚至能夠在事件上直接操做屬性 支持傳參

vue的計算屬性：簡單說就是經過定義方法返回值的方式，處理值的展現

 computed:{
          birth(){// 計算屬性本質是一個方法，可是必須返回結果
              const d = new Date(this.birthday);
              return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
          }
      }

 

vue的監聽

    

<div id="app">
      <input type="text" v-model="message">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
          el:"#app",
          data:{
              message:""
          },
          watch:{
              message(newVal, oldVal){
                  console.log(newVal, oldVal);
              }
          }
      })
  </script>

經過方法建通屬性的變化，注意在使用這個能力的時候注意this的內容是被包裝過的，調用方法也須要找從this裏找，this對象能夠傳遞修改

 

vue的組件功能

    能夠定義全局組件和局部組件兩種，

局部組件：

var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部組件的名字1" : {組件的配置對象}
        "局部組件的名字2" : {組件的配置對象}
    }
  });

全局組件：

Vue.component("mycomponent1",{
	template : "<h1>這是第一個全局組件</h1>"
})

難度不大，只是做用域有區別而已，注意：組件中的數據必須是函數

"組件的名字":{
	template: "",
	data : function(){
		return {
		  鍵1:值1,
		  鍵2:值2
		}
	}
}

 

vue的路由

    關鍵點：

    1.<router-view></router-view>是路由生效的位置

    2.引入路由後，還必須Vue.use(VueRouter)才能使用

import Vue from 'vue';
import VueRouter from 'vue-router'
es語法須要換成js導入
Vue.use(VueRouter)

    3.默認會去找vue對象中的router

<div id="app">
	<!-- 使用 router-link 組件來導航. -->
	<!-- 經過傳入 `to` 屬性指定連接. -->
	<!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
	<!-- 使用app中的路由：匹配到product路由地址，而後在router-view標籤中展現這個地址對應的資源 -->
	<router-link to="/product">公司產品</router-link>
	<router-link to="/about">關於咱們</router-link>
	<hr />
	<!-- 路由出口 -->
	<!-- 路由匹配到的組件將渲染在這裏 -->
	<router-view></router-view>
</div>

import Vue from 'vue';
import VueRouter from 'vue-router'
es語法須要換成js導入
Vue.use(VueRouter)

//>>1.定義首頁:組件
var index = Vue.component("index", {
    template : "<h1>首頁</h1>"
});
//>>2.公司產品：組件
var product = Vue.component("product", {
    template : "<h1>公司產品</h1>"
});
//>>3.關於咱們：組件
var about = Vue.component("about", {
    template : "<h1>關於咱們</h1>"
});

//>>4.建立一個路由：
var router = new VueRouter({
    routes : [ {
        path : "/",//路由地址
        component : index
        //路由對應的資源
    }, {
        path : "/about",//路由地址
        component : about
        //路由對應的資源
    }, {
        path : "/product",
        component : product
    }, ]
});

//建立一個vue對象
var app = new Vue({
    el : "#app",//掛載在app上
    router : router
//使用路由對象
});

總結：

    在vue中使用的擴展和功能基本經過vue對象中的對象體現，充分利用這些對象的就是對vue的充分利用

    更多使用參考官方文檔