当前位置 : 主页 > 网页制作 > JQuery >

day64_10_8 vue的导入

来源:互联网 收集:自由互联 发布时间:2021-06-15
一。简介 vue是一个渐进式的js框架。具体介绍查看官网: https://cn.vuejs.org 在vue框架中,有两个文件,当在开发阶段时使用完整版vue,因为有报错信息,而在上市阶段可以使用min版本的

一。简介

  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);

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

网友评论