前端框架_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差