前端框架_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表达式


    {{msg}}
    
{{getContent()}}

插值 与 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=""


    
xxx
    

出现上面的情况，属性谁后谁显示，原理是后面替代前面，如果title在:title后面，那单向数据绑定失效
如果是使用函数，必须后面加括号调用（）

1、数值型   :title="123"             等同于  title="123"
2、布尔型   :title="true"            等同于  title="true"   //false时，属性消失
3、字符串   :title=""go""            等同于  title="go"
4、对象     :title="{name:"wt"}"     等同于  title="[Object object]" 
5、数组     :title="[123,true,"bb"]" 等同于  title="true,ok,123"

事件绑定

注意如果改为如下代码，this将发生变化

所有函数（方法）的定义，强烈推荐放在methods里，不要定义到data里面

条件判断渲染

// 单向数据绑定
// 支持JS表达式

    //数字0 --> false
    //字符串0 ---> true

注意点：
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可以是数字、字符串、数组、对象


  

    {{ item.message }}
  



  

    {{ item }} : {{ key }}
  



  

    {{ item }} : {{key}}
  

双向/单向数据动态绑定__原理

单向

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差

Vue 实例

分类

根实例与组件实例区别

1、是否有挂载
    有---根实例
    没---组件实例
    
2、文件后缀
    .js---根实例
    .vue--组件实例
    
3、写法
    手动new Vue()---根实例
    导出export default {}---组件实例

组件

组件是什么？与模块有什么不同？

使用Vue构建单页应用，单页应用由Vue单文件组件组成，所谓组件指的就是Vue单文件组件（包含模板、样式、交互）
模块指的就是JS模块（单纯包含JS代码）

使用ES6模块化导入

1、路径问题

nodejs内置模块与npm安装的第三方模块，直接引用
import Vue from "vue";
import http from "http";

自定义模块或自定义组件，要带路径引用
./ 代表 当前文件所在路径
../代表 当前文件父级所在路径
import App from "./App.vue";
import App from "../App.vue";

2、后缀问题（无后缀，先判断是否是文件，找不到再判断是否是目录）

当省略后缀，只会匹配js/json/node后缀文件
所以当你要导入css、vue单文件组件时，就必须加上后缀
如果导入的是文件夹（包），将按如下顺序查找：
<1>查找 package.json 下是否定义了 main 字段，是则读取 main 字段下定义的入口。
<2>如果没有 package.json 文件，则读取文件夹下的 index.js 或者 index.node。
<3>如果都 package.json、index.js、index.node 都找不到，抛出错误 Error: Cannot find module "some-library"。

链接描述

组件与模块最大区别是：是否要注册

使用流程

组件(.vue)： 导入——>注册——>使用
模块(.js):   导入——>使用

组件之间关系

1、嵌套关系（父子、爷孙）
2、非嵌套关系（兄弟、表叔与我）

组件定义的三大区域

1、模板