Vue.js框架的介绍和基础指令语法（view层）相关操作及案例

什么是框架

概念：将函数进行封装，多个函数封装形成一个模块，多个模板组成了框架。

功能：框架改变了编程思想和代码的整体结构；使得模块内部高内聚，模块之间低耦合，提升了维护性及代码的分工与配合。

框架模式

mvc架构模式：model模型 view视图 controller控制器

模型完成数据的增删改查，视图负责数据的显示，控制器是中间层负责核心流程

mvp架构模式：model模型 view视图 presenter控制器

两者区别：mvc架构模式，视图可直接绕过控制器，直接从model中获取数据；mvp架构模式，视图从控制器中获取数据

mvvm架构模式：model模型 view视图 viewmodel控制器

mvvm采用的是双向绑定方式，视图可改变模型，模型可以改变视图，vm负责之间的通信，vue采用该架构模式

---

什么是Vue

概念：vue是构建数据驱动的web应用开发框架

两个核心：数据驱动 组件化

基本理解：new出来一个Vue实例，传一堆配置参数，控制一片html

---

Vue语法（view层）

插值表达式

功能：可以让html标签里的内容变成动态的从data中获取数据

指令：｛｛变量/属性名/表达式/函数调用｝｝

    <!-- //view 视图：显示数据 -->
        <div id="box">
            <p>{{str}}</p>
            <p>{{str2}}</p>
        </div>

    let text=123
    let vm = new Vue({
        //element，是一个选择器，表示vue对象里的数据，会显示在id为box的元素里
        el: "#box",
        //m：model,数据模型
        data: {
            str: text,
            str2: "坚持到15号"
        }

    })

---

内容指令

功能：让标签的内容变成动态的从data中获取

指令：v-text=""/v-html=""

    <div id="box">
            <p>{{str}}</p>
            <p>我是{{str}}</p>
            <hr >
            <p v-html="str"></p>
        </div>

    let vm=new Vue({
        el:"#box",
        data:{
            str:"hello"
        }
    })

v-text与v-html的区别：

• v-html等价于innerHTML，v-text等价于innerText
• v-html没有做转义，v-text做了转义

<div id="box">
            <p v-html="str"></p>
            <p v-text="str"></p>
            <p></p>
        </div>

    let vm=new Vue({
        el:"#box",
        data:{
            str:"<b>hello</b>"
        }
    })
    

内容指令添加内容与插值表达式添加内容两个方式之间的区别：

• 插值表达式比较灵活，可以控制标签里的某一部分内容，v-html和v-text会将内容全部修改并覆盖
• 插值表达式在网速比较慢时，能够瞬间看到带着花括号的原型

---

属性指令

功能：让标签的属性名或属性值变为动态

属性值绑定指令：v-bind：属性名="值"

属性名绑定指令：v-bind：[属性名]="值"

<div id="box">
            <img v-bind:src="img">
            <hr>
            <img v-bind:[attr]="img">
            <div v-bind:style="s">
            </div>
        </div>

    let vm = new Vue({
        el: "#box",
        data: {
            img: "imgs/1.jpg",
            attr: "src",
            s: "width:200px;height:300px;border:1px solid red"
        }
    })

属性值为布尔值的情况：

<div id="box">
            <input type="button" name="" id="" value="测试" v-bind:disabled="bool" />
        </div>

    let vm = new Vue({
        el: "#box",
        data: {
            bool: false
        }
    })

 ps：如果bool值为null、undefined、false则disabled属性不会渲染出来

---

条件指令

功能：可以根据条件语句的布尔值决定是否渲染

指令：v-if=""/v-show=""

<div id="box">
            <!-- <p v-if="show">小孩</p> -->
            <p v-if="age<18">小孩</p>
            <p v-else-if="age<=30">你不是再小孩了</p>
            <p v-else>年级大了</p>
        </div>

    let vm = new Vue({
        el: "#box",
        data: {
            show: true,
            age: 17
        }
    })

v-if和v-show的区别：

 相同点：都能控制dom元素的显示和隐藏

不同点：v-show是控制元素的display属性，v-if是直接删除或添加dom节点
              v-show适合元素显示隐藏频繁切换的场景，v-if适合不频繁切换的场景

---

循环指令

功能：将数据进行循环并显示在html中，推荐操作数组、对象、字符串、数字

指令：v-for="(value,key) in 数据"

ps：除对象是key外其他数据类型都是索引index

<ul>
                <li v-for="(item,index) in booksobj">
                    <p>序号:{{index+1}}</p>
                    <p>书号:{{item.id}}</p>
                    <p>书名:{{item.name}}</p>
                    <p>作者:{{item.author}}</p>
                </li>
            </ul>

let vm = new Vue({
        el: "#box",
        data: {
            booksobj: [{
                id: "001",
                name: "三国",
                author: "老罗"
            }, {
                id: "002",
                name: "水浒",
                author: "老施"
            }]
        }
    })

循环可以进行嵌套：

<li v-for="item in books">
                    <p v-for="(val,key) in item">{{key}}:{{val}}</p>
</li>

循环和if判断：

 <li v-for="val in list" v-if="val.or">{{val.text}}</li>

let vm = new Vue({
        el: ".box",
        data: {
            list: [{
                    text: "嘿嘿",
                    or: false
                },
                {
                    text: "哈哈",
                    or: true
                }
            ]
        }
    })

循环里的key：

 <li v-for="book in books" v-bind:key="book.id">
                    <p v-for="(val,key) in book">{{key+""+val}}</p>

在标签里使用属性key，可以唯一标识一个元素。

用循环更新已渲染过的元素列表时，默认就地复用原则，尽量不对dom操作，只更新文本

如果需要对dom进行操作，可以使用key属性，这样可以跟踪每个节点的身份，从而重新排序

---

其他指令

v-pre:带有v-pre的标签在vue进行编译时跳过，可以加在父元素或子元素身上，从而可以对大量没有指令的节点进行跳过，加快了编译速度

v-cloak:防闪烁，模板没有编译完，网速差时会看到花括号的原型，可以用css先隐藏，等vue编译完成之后再显示出来，用户不会看到原型,需要搭配css使用[v-cloak]{display: none;}

v-once:任何事件无法更改其第一次渲染的数据值

---

在需要vue解析的标签中可以使用js表达式

<div id="box">
            <p>我是{{str}}</p>
            <p>我是{{str+"嘿嘿"}}</p>
            <hr>
            <p>{{bool==true?"成年":"未成年"}}</p>
            <hr>
            <img v-bind:src="'imgs/'+index+'.jpg'">
        </div>

let vm = new Vue({
        el: "#box",
        data: {
            str: "hi",
            bool: false,
            index: "1"
        }
    })