day64_10_8 vue的导入

一。简介

　　vue是一个渐进式的js框架。具体介绍查看官网：

　　https://cn.vuejs.org

　　在vue框架中，有两个文件，当在开发阶段时使用完整版vue，因为有报错信息，而在上市阶段可以使用min版本的vue。

　　vue不同于js和jquery的是，他是数据驱动框架而非事件驱动框架。也就是说其中是对数据进行实时监听的。

　　vue结合了其他框架的优点，轻巧，中文api，双向绑定，双向绑定意味着其中是mvvm模式。

　　vue的导入可以使用cdn：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

二。挂载点。

　　对于vue框架来说，vue的设计理念是钩子，他可以对class类进行挂钩，也可以对唯一的id进行挂钩：

<div id="wrap">
    {{ }}
    <hr>
    <div class="main">
        {{ }}
    </div>
    <hr>
    <div class="main">
        {{ }}
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#wrap'  // el表示挂载点
    })
</script>

　　而使用类作为挂载点时，只会绑定第一个符合的元素。

三。数据。

　　用实例成员data为vue环境提供数据，数据采用字典{}形式。

　　在插值表达式{{}}中，直接书写数据的key来访问数据。

　　在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据。

　　app.$data.info。

　　在外部也可以通过实例变量app直接访问数据。

　　app.info。

　　在vue实例内部的方法methods中，使用变量，this.info (this其实就是等价于app)

　　所有的数据都可以通过键值对的形式写入data中。

　　而其中的key就是默认的字符串，不加双引号也行，

四。过滤器。

　　在django中的过滤器只能传入一个参数，会将|前面的数据作为参数传入filter。

　　而在vue中，过滤器可以定义多个参数，而且会将|前的多个参数传入后面的过滤器：

<p>{{ 10, 20, 30, 40 | f2 }}</p>
 f2: function (a, b, c, d) {
 console.log(a, b, c, d);
 return a + b + c + d
}

　　而且，可以将这些参数分开进行传参，

<p>{{ 10, 20 | f2(50, 80) }}</p>
            f2: function (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d
            }

　　其中，当过滤器的参数缺少时，会以unsigned的值进行传入。多参数则忽略。

　　vue中也支持一些粗劣计算和一些函数的处理：

        <p>{{ num + 3.5 }}</p>
        <p>{{ msg.split('')[4] }}</p>

五，文本指令

　　首先，要在一个元素中显示一段字符串，可以调用data数据：

<p>{{ info }}</p>

　　而如果需要使用属性控制变量则需要使用关键字v-text：

<p v-text="info"></p>

　　v-text中值可以时数字，和布尔值，和变量，如果需要变成字符串，要再次加单引号：

    <p v-text="123"></p>
    <p v-text="true"></p>
    <p v-text="'abc' + info"></p>
    <p v-text="[1, 2, 3]"></p>

　　当然可以使用v-html进行html元素的传输：

<p v-html="`<b style='color:red'>好的</b>`"></p>

　　其中需要注意的是需要使用反引号·将所有的语句括起来。使用v-text则不会有这样的效果。

六。事件指令：

　　1) 语法：v-on:事件名="函数名(参数们)"

　　2) 简写：@事件名="函数名(参数们)"

　　3) 用methods实例成员提供 事件函数 的实现

　　4) 事件传参：函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)

　　其中，on后的事件有：click，mouseover等事件。也可以简写成@mouseover。

　　函数可以使用function，也可以省略：

        <p class="low-num" v-on:click="lowNum">
            <span>点击减一：</span>
            <span>{{ num }}</span>
        </p>
            lowNum: function () {
                // 在vue实例内部的方法中，使用变量
                // alert(this.num)
                this.num -= 1;
            },
            dblAction (ev) {
                // alert('双击事件');
                console.log(ev)
            },

　　当事件函数未绑定值时，会有一个默认函数，该值就是点击事件的具体值。

　　当事件绑定参数时，想要获得事件，需要使用$event进行绑定传参。

<p @mouseover="overAction(10, 20, $event)">悬浮3</p>
            overAction(a, b, c) {
                console.log(a, b, c)
            }

七。属性指令

　　在vue框架的渲染下可以使用v-bind:属性名="变量"，进行绑定属性指令，也可以简写:属性名="变量"。

　　当属性时非v-bind时，他所拥有的值可以是任何值，而一旦以：加修饰之后，其值就必须是data中的变量，如果想要绑定非变量的字符串作为值，需要使用单引号：

        <p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
        <!--2) v-bind:属性名="变量" 简写 :属性名="变量" -->
        <p :index="p1">自定义属性也可以被vue绑定2</p>
        <p :title="'文本提示'">悬浮文本提示</p>

　　其中有两个属性需要拥有值才能被渲染：class和style

　　style中的变量可以是一个字典，字典中不支持-格式的语法，需要转换成驼峰法：

        <p :style="myStyle">样式绑定1</p>
        <p :style="{backgroundColor: c1, color: c2, 
'border-radius': '50%'}">样式绑定2</p>
    myStyle: {
                backgroundColor: 'pink',
                color: 'deeppink',
                'border-radius': '50%'
            },
            c1: 'cyan',
            c2: 'tan',

　　也可以直接将字典作为值放入style中，其中的value是变量。

　　一般的，想要绑定一个样式，可以使用class进行绑定：

　　可以使用变量进绑定:

<p :class="myc1">样式绑定3</p>

myc1: 'ccc ddd eee',

　　也可以使用数组进行绑定：

<p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
            myc2: 'ccc1',
            myc3: 'ccc2',
            myc4: 'ccc3',

　　其中的区别在于数组中的值是互不相干的。而且也可以使用‘’的方式进行固定的类绑定。

　　也可以使用字典加布尔类型的方式进行绑定：

<p :class="{xxx:yyy}">样式绑定5</p>

yyy: true,  // false

　　如果yyy的值是true，那么就有xx这个属性。否则没有

　　其中数组的方法也可以这么用：

:class="[c1, {right:r, top:t, bottom:b}]" 

八。表单指令。

　　在表单中，，所有的值都是通过value显示出来，而使用vue中的v-model操作value则会实时监听：

　　当text表单时：

            <input class="inp1" type="text" v-model="info">
            <input class="inp2" type="text" v-model="info">

　　其所有的值会映射给绑定的变量，包括{{}}中的值。

　　当是单独复选框时：

 是否同意：<input type="checkbox" name="agree" v-model="isAgree">
<!--是否同意：<input type="checkbox" name="agree" 
true-value="yes" false-value="no" v-model="isAgree">-->
<p>{{ isAgree }}</p>

data: {
info: '123',
isAgree: 0,
// isAgree: 'no',
mysex: 'others',
myhobbies: ['male', 'female']
}

　　如果其中没有选择，则没有值，如果选择了，则isargee中的值是isagree中值（布尔值）。

　　这个值可以通过：true-value，false-value进行绑定，返回的值就是设置的值，而且下面的变量值也需要是这两个值中的一个。

　　当时单选框的时侯，所有的名字都是一样的：

性取向：
 男 <input type="radio" name="sex" value="male" v-model="mysex">
女 <input type="radio" name="sex" value="female" v-model="mysex">
哇塞 <input type="radio" name="sex" value="others" v-model="mysex">
<p>{{ mysex }}</p>

        data: {
            info: '123',
            isAgree: 0,
            // isAgree: 'no',
            mysex: 'others',
            myhobbies: ['male', 'female']
        }

　　其中mysex就可以是该单选框的默认值，而这些选中的框也就是mysex的值。

　　多选框，所反阔的是列表：

 兴趣爱好：
男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies">
女 <input type="checkbox" name="hobbies" value="female" v-model="myhobbies">
哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies">
<p>{{ myhobbies }}</p>
        data: {
            info: '123',
            isAgree: 0,
            // isAgree: 'no',
            mysex: 'others',
            myhobbies: ['male', 'female']
        }

　　这些都符合双向反馈。

补充：

1.js对象（字典补充）：

let b = 20;
let dic = {
    a: 10,  // 字典本身就是对象，key都是字符串形式可以省略引号
    b  // 值为变量时，且与key同名，可以简写
};
console.log(dic)

2。反引号补充：

// 1) js多行字符串 反引号 ``
// 2) 反引号字符串中可以直接填充变量，语法为 `${变量名}`
let s1 = `第一行
第二行
结束行`;
console.log(s1);

let name = 'Owen';
let age = 17.5;
let s2 = `
name: ${name}
age: ${age}
`;
console.log(s2);

　　其中反引号中可以使用${}传入变量进行显示字符串。