Vue框架

Vue框架

框架与库的区别

小而巧为库，大而全为框架

• 库
  
  • 提供小功能, 项目入侵小(上了之后可以改)，上了船可以再下船
• 框架
  
  • 提供比较全的功能, 项目入侵大(上了之后不可改)，上了贼船了很难再下船了

MVVM与MVC

• MVC 是后端开发思想，分为三个部分

  • Model：（数据层）负责数据库操作
  • View：（视图层）所有前端页面
  • Controller：（业务逻辑层） 处理对应业务逻辑

• MVVM 前端页面的分层开发思想，把一个完整的页面分成了三部分

  • Model（页面中需要的数据），这里所指的是：data部分
  • 通过ajax取数据，将来渲染到View中
  • View（页面中的HTML结果），这里所指的是：容器
  • ViewModel（中间的调度者）。这里所指的是：vm

基本代码详情

/**
*   容器就是 MVVM 中的 View
*
*   实例对象就是 MVVM 中的 VM, 被称为调度者
*
*   data就是 MVVM 中的 Model
*/

1. 导入Vue包
<script src = "vue-2.5.15.js"></script>

2. 添加一个容器, 将来被Vue控制
<div id = "box">{{msg}}</div>

3. 创建Vue的实例对象
const vm = new Vue({
    // 3.1 el传入的是选择器, 页面要控制的元素
    el: "#box",
    data: {
    // 3.2 用data渲染数据
        msg: "Hello Vue",
        flag: true
    },
    // 可以绑定事件处理函数
    methods: {

    },
})

/**
*   VM的实例对象, 会监听data中每一项的数据变化, 只要一变化, VM就会重新把el指定区域所有的指
*   令重新解析一遍
*   data中的数据, 在每个methods方法中都共享
*
*/

指令

表达式就是指令，如果想让指令生效必须放到el的容器里，他有控制HTML的能力，v-系列插入属性节点，{{}}插入内容区域

指令{{}}

• 插入表达式
• 可以写字符串属性，也可以进行字符串拼接，可以写简单的代码三元表达式，不要过分就行
• 只能写在内容区域

<p>{{msg}}</p>

v-cloak

• 解决插件表达式闪烁
• 在网络慢的情况下会使用
• 在外层的元素添加 v-cloak ，而且需要在style样式表中添加一个属性

<style>
    [v-cloak] {
        display: none;
    }
<style>
<div id="box" v-cloak></div>

v-text

• 与{{}}一样都可以向元素插入数据
• 会把之前的内容清空并覆盖
• 可以进行字符串拼接与三元表达式
• 它没有闪烁问题
• 不能渲染标签

<h1 v-text = "msg"></h1>
<h1 v-text = "msg + '拼接字符串'"></h1>

v-html

• 渲染标签

<div v-html = "msg"></div>
data: {
    msg: "<h1>文本</h1>"
}

v-bind

• 属性绑定
• 可以进行字符串拼接，三元表达式
• 可以单向数据绑定 model => view

<!-- 完整版 -->
<img v-bind:src = "images"/>
<!-- 简写版 -->
<img :src = "images"/>
data: {
    images: "./img/01.png"
}

v-on

• 绑定事件
• 定义事件名时可以进行传参操作，添加()即可

<!-- 示例 -->
<button v-on:事件名称 = "btn"></button>
<!-- ()进行传参 -->
<button v-on:click = "btn(111)"></button>
<!-- 原始版 -->
<button v-on:click = "btn"></button>
<!-- 简化版 -->
<button @:click = "btn"></button>
methods: {
    // 原始版
    btn: function(str){
        console.log(str);
    },
    // 简化版
    btn(str){
        console.log(str);
    }
}

v-model

• 双向数据绑定
• 输入框输入值，msg会自动同步
• 只能与表单元素进行使用，才能实现数据绑定（input，select，textarea…），只要能和用户交互就可以实现数据绑定
• data <—-> 页面

<input type = "type" v-model = "msg"/>

data: {
    msg: "双向数据绑定"
}

v-for与:key

v-for(遍历的item项, 索引) in 数组 :key="item.id"

• 可以遍历数组
• 尽量使用v-for时，要添加：key，取值：number与string

<!-- 正式版 -->
<li v-for = "(item, i) in arr" :key="item.id">
    <p>索引: {{i}}, 值: {{item}}</p>
</li>
<!-- 简写版 -->
<li v-for="item in arr" :key="item.id">{{item}}</li>

data: {
    arr: ["张三", "李四", "王五"]
}

v-if与v-show

• 语法： v-if=""
• 作用：显示与隐藏
• 区别： v-if通过动态创建移除进行显示隐藏，此方法比较消耗CPU
• 区别： v-show通过none与black进行显示与隐藏，此方法有初始渲染消耗
• 应用场景： 切换次数多使用 v-show，切换次数少使用 v-if

<!-- v-if 语法 -->
<button @click="flag=!=flag"></button>
<h1 v-if="flag">显示与隐藏</h1>

<!-- v-show 语法 -->
<button @click="flag"></button>
<h1 v-show="flag">显示与隐藏</h1>

data: {
    flag: true
}

v-if与v-else

<button @click="flag=!flag"></button>
<h1 v-if="flag">显示</h1>
<h1 v-else>隐藏</h1>

data {
    flag: true
}

绑定class样式

• 绑定具体类名

.a{color: red;}
.b{font-size: 18px;}

/* 固定版 */
<h1 :class="['a', 'b']"></h1>
/* 动态版 */
<h1 :class="[flag ? a : b]"></h1>
<button @click="flag=!flag">切换</button>
data: {
    flag: true
}

方法

Vue.$set()

• 语法： Vue.$set(为那个对象挂属性, 新属性名称, 新属性值)
• 应用场景： 如果想在data动态一个值，就需要此方法

{{user.name}}

data: {
    user: {name: "zs"}
}
methods: {
    add(){
        this.$set(this.user, "age", 18)
    }
}

Vue.$mount()

• 如果el与$mount同时使用了， el优先级最高

let vm = new Vue({
    data:{},
    methods: {}
})

vm.$mount("#box");

配置对象

template

• 此属性是渲染模板，templat属性接受的值为字符串
• 此优先级比el高，会把el的覆盖并替换

<h3>{{msg}}</h3>

let vm = new Vue({
    el: "#box",
    template: "<h1>{{msg}}</h1>",
    data: {
        msg: "Vue"
    }
})

过滤器

输出数据时，需要对数据进行格式上的处理，并将结果呈现到页面上，使用Vue提供的过滤器

• 语法：待处理数据 | dateFormat，| 术语：管道符
• 如果在插值表达式中，结果为过滤器处理后的
• 只能用在插值表达式与v-bind中
• 可以连续设置过滤器

<p>{{str | dateFormat}}</p>
<!-- 调用传参 -->
<p>{{str | dateFormat()}}</p>
data: {
    str: "2018-01-25T02:02.045z"
}

创建全局过滤器

• Vue.filter("过滤器名称", 处理函数);
• 处理函数的第一形参，名称是约定好的originVal, 第一个参数为管道符左侧的值
• 处理函数的第二形参，为调用过滤器的参数
• 处理完毕后需要使用return出去
• 需要在全局创建

Vue.filter("dateFormat", (originVal)=>{
    const dt = new Date(originVal)
    const y = dt.getFullYear();
    return y;
})

创建私有过滤器

• 私有过滤器名称为filters，可以创建多个过滤器
• 只能被当前所属的实例所控制的区域使用

let vm = new Vue({
    el: "",
    filters: {
        过滤器名称: ()=>{

        }        
    }
})

axios发起Ajax

动画

组件

路由

组件生命周期

ES6

// 箭头函数

// 解构赋值

Promise

字符串新方法

对象赋值快捷语法

var a = 10;
var b = 20;
function show(){console.log("参数")}

var obj = {
    a,
    b,
    show,
    say(){console.log("新事件")}
};

数组新方法

fundindex
// 在数组的findIndex方法时，提供一个比较函数, 在比较函数， 

var arr = ["zs", "ls", "ww"];
// arr.filter(过滤函数)
// arr.findIndex(比较函数)
arr.findIndex(item => item === "ls");


Pr

// 模板字符
${}

ES7

数组新方法

async  await