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

  • 分类

前端框架_Vue_第1张图片

  • 根实例组件实例区别
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、模板