Vue框架

Posted huaixin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue框架相关的知识,希望对你有一定的参考价值。

Vue简介

Vue是市场三大主流框架之一.和Angular, React都是基于javascript开源框架.Vue框架是一种js渐进式框架, 相对于React(gitup),偏向于做pc端.

Vue的优点: 轻量级,中文API, 支持双向绑定, MVVM设计模式,组件开发,单页面应用.

  

渐进式: 可以根据开发进行调整Vue框架控制项目的具体位置: 可以是一个标签,一个页面,也可是整个项目.

Vue简单使用

下载链接: https://cn.vuejs.org/v2/guide/installation.html. 下图下载入口. 开发版本完整版, 生成版本压缩版.都可以使用.

  技术图片

使用时导入本地即可使用

<!--本地vue文件导入. 下载的VUE文件路径-->
<script src="js/vue.js"></script>
<!--cdn下Vue文件导入, 这种方式必须在联网状态-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

 

 

 

 

 

挂载点

挂载点控制页面及项目的范围

<body>
   <h1>{{Vue_h1}}</h1>
   <h2>{{Vue_h2}}</h2>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: h1
    })
</script>

将h1标签挂载, 页面只显示h2标签文本如下图所示; h1标签被Vue控制,所以没有显示. .

技术图片

ps: body标签和html标签不可以做挂载点. 挂载点一般使用id属性

Vue实例

1, el:实例:

<script>
    new Vue({
        el: h1   // 可以是标签名, 类名, 属性名
    })
</script>

2, data:数据

数据类型有: 字符串, 整形, 数组, 字典, 布尔值.

let a = 0;
let app1 = new Vue({ el: ‘#app1‘, data: { Vue_h1: ‘这是h1标签‘, Vue_h2: ‘这是h2标签‘,
          a, // a表示: a: a } })

 

 

 

 ps:

  实例成员data为vue提供数据环境, 数据采用字典{}键值对的形式. (字典中的键是字符串,两侧引号省略不写)

  再插入的文本值中用{{变量名}}, 直接书写数据度key可以访问数据.

  外部访问内部:   1, 挂载点内部的标签实例后,可以访问内部成员  (app1.$data.Vue_h1)

         2, 也可以通过app这个变量来访问: app.Vue_h1

  在vue实例内部的方法使用this.vue_h1一样.

3, 过滤器

过滤器对{ }}内数据操作. 语法{{值1...| 函数名(参数)}}, 将值当作参数传入

技术图片
<body>
<div id="app">
    <p>{{msg}}</p>
   <p>{{num + 1}}</p>
   <p>{{num + 1 | f1}}</p>
   <p>{{10, 20 | f2(10, 100)}}</p>
   <p>{{10, 20, 30, 40, 50 | f2(10, 100)}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            msg: 过滤器,
            num: 3,
        },
        // 过滤器函数 f1, f2 过滤器函数 {{值1...| 函数名(参数:值)}}
        filters: {
            f1: function (num) {
                return num*2
            },
            f2: function (a, b, c, d) {
                return a+b+c+d
            }
        }
    })
</script>
过滤器

4, 文本指令

插入表达式, 例: v-text指令, 渲染普通文本, 也可以使用v-html指令渲染文本, 可以渲染变量, 常量.

技术图片
<body>
<div id="app">
    <p>{{info}}</p>
    <p v-text="info"></p>
    <p v-text="123"></p>
    <p v-text="true"></p>
    <p v-text="‘abc‘ + info"></p>
    <p v-text="[1, 2, 3]"></p>
    <p v-html="sign"></p>
    <h1></h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            info: 文本渲染,  // 普通文本渲染
            sign: <h1>h1html文本渲染</h1>  // html:文本渲染
        }
    })
</script>
文本指令

5, 事件指令

语法: v-on:事件名="函数名(参数)",  简写形式: @事件名="函数名(事件名)".

使用methods实例成员提供, 事件函数实现. 

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

 

技术图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style>
        body {
            user-select: none;
        }
        .low-num {
            cursor: pointer;
        }
        .low-num {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <p class="low-num" v-on:click="lowNum">
        <span>点击减一:</span>
        <span>{{num}}</span>
    </p>

<!--    <p v-on:dblclick="dblAction">双击</p>-->
<!--@mouseover 鼠标悬浮事件-->
    <p @mouseover="overAction()">悬浮</p>
    <p @mouseover="overAction(10)">悬浮1</p>
    <p @mouseover="overAction(10, 20)">悬浮2</p>
    <p @mouseover="overAction(10, 20, $event)">悬浮3</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            num: 100,
        },
        methods: {
            lowNum: function () {
                this.num --
            },
            dblAction(ev){
                console.log(ev)
            },
            overAction(a, b, c) {
                console.log(a, b, c)
            }
        }
    })
</script>
</html>
事件

 

6, 属性指令

1) 语法:v-bind:属性名="变量"
2) v-bind:属性名="变量" 简写 :属性名="变量"
3) 单值属性绑定:  :title="变量"  |  :id="变量"  |  :自定义属性="变量"
4) style属性绑定:  :style="字典变量"  |  :style="{css属性1:变量1, ..., css属性n:变量n}"
5) class属性绑定:  :class="变量"  |  :class="[变量1, ..., 变量n]"  |  :calss="{类名:布尔变量}"

技术图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style>
        [index] {
            color: orange;
        }

        .cc {
            background-color: yellowgreen;
            color: greenyellow;
            border-radius: 50%;
        }
        .cc1 {
            background-color: yellowgreen;
        }
        .cc2 {
            color: greenyellow;
        }
        .cc3 {
            border-radius: 50%;
        }
        .tt {
            background-color: gold;
            color: orange;
        }

    </style>
</head>
<body>
<div id="app">
    <p id="p1" class="p1" style="" title="" index="">属性指令1</p>
<!--    单值绑定-->
    <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令1</p>
<!--    style属性绑定-->
    <p :style="myStyle">样式绑定1</p>
<!--    class-->
    <p class="cc">class样式</p>
    <p :class="myc1">class1样式绑定</p>
    <p :class="[myc2, myc3, myc4]">class2样式绑定</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            p1: q1aaaaa,
            myStyle: {
                backgroundColor: pink,
                color: deeppink,
                border-radius: 50%,
            },
            
            myc1: cc,    // 使用类名赋值
            myc2: cc1,
            myc3: cc2,
            myc4: cc3,
        }
    })
</script>
</html>
属性指令

动态修改案例

技术图片
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .center {
            text-align: center;
            line-height: 200px;
        }
        .rcenter {
            text-align: right;
            line-height: 200px;
        }
        .right {
            text-align: right;
        }
        .top {
            line-height: 21px;
        }
        .bottom {
            line-height: calc(400px - 21px);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" :class="[c1, {right:r, top:t, bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{ msg }}</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        methods: {
            a1(){
                this.msg = 被悬浮;
                // 正中
                this.c1 = center;
                this.r = 0;
                this.t = 0;
                this.b = 0;
            },
            a2(){
                this.msg = 被按下;
                // 右上
                this.r = 1;
                this.t = 1;
                this.b = 0;
            },
            a3(){
                this.msg = 被抬起;
                // 右中
                this.c1 = rcenter;
                this.r = 0;
                this.t = 0;
                this.b = 0;
            },
            a4(){
                this.msg = 被移开;
                // 右下
                this.r = 1;
                this.t = 0;
                this.b = 1;
            },
        },
        data: {
            msg: ‘‘,
            c1: ‘‘,
            r:0,
            t:0,
            b:0,
        }
    })
</script>
</html>
动态修改案例

表单指令

1) 语法:v-model="控制vaule值的变量"
2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值,值不会时时映射给绑定的变量)
3) v-model="变量" 绑定数据会时时更新(修改表单标签值,值会时时映射给绑定的变量)
4) 单独复选框作为确认框时,v-model绑定的变量为布尔类型变量
5) 多复选框,v-model绑定的变量值是一个列表(数组),存放复选框选项值(谁被选中就存放了谁)
6) 单选框,v-model绑定的变量值是某一个选项的值(值是哪个选项的值,那个选项就被选中)

技术图片
```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .p1 {
            width: 500px;
            height: 21px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <form action="">
            <!--1) 对表单标签value进行绑定操作变量,不能时时检测绑定的变量-->
            <input class="inp1" type="text" :value="info">
            <input class="inp2" type="text" :value="info">
            <p class="p1">{{ info }}</p>
            <hr>
            <!--2) 表单标签的值有 v-model="变量" 来绑定控制,操作的还是value,但是拥有时时变量值的检测 -->
            <input class="inp1" type="text" v-model="info">
            <input class="inp2" type="text" v-model="info">
            <p class="p1">{{ info }}</p>
            <hr>
            <!-- 2) v-model操作单独复选框 - 确认框 -->
            是否同意:<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>

            <!-- 3) 单选框-->
            性取向:
            男 <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>


            <!-- 4) 复选框-->
            兴趣爱好:
            男 <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>


            <hr>
            <input type="submit">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            info: 123,
            isAgree: 0,
            // isAgree: ‘no‘,
            mysex: others,
            myhobbies: [male, female]
        }
    })
</script>
</html>
```
表单指令

 

以上是关于Vue框架的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板