前端框架_Vue

104828720發表於2019-02-16
前端框架Vue

JS表示式

  • 函式（方法）呼叫表示式
test() //函式呼叫表示式
  • 屬性呼叫表示式
var obj = {name:`wt`};
var arr = [123,`bai`];
obj.name   //屬性呼叫表示式
arr[0]     //屬性呼叫表示式
  • 變數（常量）呼叫表示式
let name = `wutao`;
name  //變數呼叫表示式
  • 字面量表示式
123         //數值字面量表示式
`wtao`      //字串字面量表示式
true        //布林字面量表示式
null        //空表示式
undefined   //未定義表示式
{name:`wt`} //物件字面量表示式
[123,true]  //陣列字面量表示式
  • 算術表示式
a + 1       //算術表示式
b * 1       //算術表示式
  • 三目表示式
conidion ? name : title

模板語法

  • 插值
// 語法：     雙大括號{{}}
// 使用場景： 標籤內容處使用
// 單向資料繫結
// 支援JS表示式

<div id="app">
    {{msg}}
    <div>{{getContent()}}</div>
</div>

<script>
    const vue = new Vue({
        el: `#app`,
        data: {
            msg: `who is this`
        }，
        methods: {
            getContent: function(){
                return `wtao`;
            }
        }
    });
</script>

插值 與 v-text 區別
兩者都是在標籤內容處插入內容，但v-text是全量插入，而插值更靈活，除了全量插入，還可以使用部分插入
推薦只要使用插值就可以了

  • 指令

是模板語法重中之重，常用如下

v-text     //使用插值替代
v-html     
v-show
v-if       //條件判斷
v-else
v-else-if
v-for      //迴圈
v-on       //繫結事件
v-bind     //繫結屬性
v-model    //雙向資料繫結
v-pre
v-cloak
v-once

指令

  • 屬性繫結
// 單向資料繫結
// 支援JS表示式
// 使用指令v-bind，需傳入標籤屬性作為引數，例如：v-bind:title=""

<div id="app">
    <div title="你好" :title="go">xxx</div>
    <p :title="test()"></p>
</div>
<script>
    const vue = new Vue({
        el: `#app`,
        data: {
            go: `振東`,
            test: function(){
                return `xxx`;
            }
        }
    });
</script>

出現上面的情況，屬性誰後誰顯示，原理是後面替代前面，如果title在:title後面，那單向資料繫結失效
如果是使用函式，必須後面加括號呼叫（）

  • 事件繫結
<div id="app">
    <div v-html="title" @click="fngo"></div>

    <div v-html="title" @click="getUser"></div>
</div>
<script>
    var vm = new Vue({
        el: `#app`,
        data: {
            name:`wt`,
            title: `<h1>試試</h1>`,
            fngo: function(){
                console.log(this);   // this代表window
            }
        },
        methods: {
            getUser: function(){
                console.log(this);   // this代表Vue例項
            }
        }
    });
</script>

注意如果改為如下程式碼，this將發生變化

<div id="app">
    <div v-html="title" @click="fngo()"></div>

    <div v-html="title" @click="getUser"></div>
</div>
<script>
    var vm = new Vue({
        el: `#app`,
        data: {
            name:`wt`,
            title: `<h1>試試</h1>`,
            fngo: function(){
                console.log(this);   // this代表Vue例項
            }
        },
        methods: {
            getUser: function(){
                console.log(this);   // this代表Vue例項
            }
        }
    });
</script>

所有函式（方法）的定義，強烈推薦放在methods裡，不要定義到data裡面

  • 條件判斷渲染
// 單向資料繫結
// 支援JS表示式

<div v-if="0"></div>    //數字0 --> false
<div v-else-if="`0`"></div>    //字串0 ---> true
<div v-else></div>

注意點：
1、物件和陣列轉boolean都是true
2、空字串轉boolean是false
3、null、underfined、NaN轉boolean是false
4、數值0是false

let arr = []
if(arr){
    console.log(`true`);
}

if(arr == fasle){
    console.log(`true`);  // ==兩邊轉數值
}
  • 迴圈渲染
// 單向資料繫結
// 支援JS表示式
// items可以是數字、字串、陣列、物件

<ul id="example-1">
  <li v-for="item in 15">
    {{ item.message }}
  </li>
</ul>

<ul id="example-1">
  <li v-for="(item,key) in `abcd`">
    {{ item }} : {{ key }}
  </li>
</ul>

<ul id="example-1">
  <li v-for="(item,key) in {name:`taobi`,age:18}">
    {{ item }} : {{key}}
  </li>
</ul>

雙向/單向資料動態繫結__原理

  • 單向
var obj = {};
var initValue = `hello`;
Object.defineProperty(obj,"newKey",{
    get:function (){
        //當獲取值的時候觸發的函式
        return initValue;
    },
    set:function (value){
        //當設定值的時候觸發的函式,設定的新值通過引數value拿到
        initValue = value;
    }
});
//獲取值
console.log( obj.newKey );  //hello   輸出

//設定值
obj.newKey = `change value`;

console.log( obj.newKey ); //change value
console.log( initValue );  //change value
  • 雙向
var obj = {};
var initValue = `hello`;
Object.defineProperty(obj,"newKey",{
    get:function (){
        //當獲取值的時候觸發的函式
        return initValue;
    },
    set:function (value){
        //當設定值的時候觸發的函式,設定的新值通過引數value拿到
        initValue = value;
    }
});
document.getElementById(`txt`).oninput = function(e){
    obj.newKey = e.target.value;
}

單頁應用 vs 多頁應用

  • 多頁應用
頁面跳轉 ---> 返回html

優點：
首屏速度快，SEO效果好

缺點：
頁面切換慢
  • 單頁應用
頁面跳轉 ---> JS動態渲染

優點：
頁面切換快

缺點：
首屏速度慢，SEO差

相關文章