Vue快速使用

时间 2020-12-23

标签 php html 前端 vue java golang 后端服务器 app ide 栏目 PHP 繁體版

原文原文链接

Vue是啥

Vue.js是一个用来开发Web界面的前端库，很是轻量级，只须要关注于data的变化，使代码变得更加容易维护。
说人话就是，今后再也不有所谓的jQuery的html代码拼接，让渲染html像德芙同样纵享丝滑，比rain还润！php

其实先后端渲染各有各的好处html

前端渲染优势

业务分离，后端只须要提供数据接口，前端在开发时也不须要部署对应的后端环境，经过一些代理服务器工具就能获取后端数据进行开发，提高开发效率
计算量转移，本来后端渲染的任务转移到了前端

后端渲染优势

对搜索引擎友好
首页加载时间短，后端渲染加载完成直接显示HTML，前端加载完成后还有段js的渲染

1、安装

直接下载像引用jQuery同样引入便可
前端

我是这样引入的vue

<script src="./vue.js"></script>

helloworld示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../vue.js"></script>
    <title>第一个vue程序</title>
</head>
<body>

<div id="app">
    <h1>{{cqh}}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hello world',
        }
    })
</script>

运行输出

就是这么简单！java

2、基本功能

渲染文本-{{var}}

用{{}}输出变量便可golang

<div id="app">
    <h1>{{cqh}}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe'
        }
    })
</script>

这里直接把data.cqh的信息显示出来了
后端

渲染表达式-{{expr}}

放在{{}}内的文本为表达式，除了直接输出属性值外，还能够写简单的js表达式服务器

<div id="app">
    <p>{{id+1}}</p>
    <p>{{id==123? 'a' : 'b'}} </p>
    <p>{{cqh.split('').join('--')}} </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            id: 123,
        }
    })
</script>

渲染属性-:attr="expr"

使用-:attr="expr"形式app

<div id="app">
    <h1 :id="'123'+id" :style="style" >{{cqh}}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            id: 123,
            color: 'red',
            style:{
                'color':'red'
            }
        }
    })
</script>

这里:属性后边是一个js表达式，能够直接使用data的变量
ide

过滤器-filters

过滤器在vue的filters中定义，相似管道的方式使用

<div id="app">
    <p>{{cqh|uppercase}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
        },
        filters: {
            uppercase: function (value) {
                if (!value) return '';
                value = value.toString();
                return value.toUpperCase()
            }
        }
    })
</script>

运行结果以下

过滤器本质是一个函数，还能够传参数，v

{{ message | filterA('arg1', arg2) }}

事件监听-methods

两种方式，@或v-on后边跟事件名，引号里边放methods里调用的方法

<div id="app">
    <button @click="a">a事件</button>
    <button v-on:click="b">b事件</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            id: 123,
            color: 'red',
        },
        methods: {
            a() {
                alert(this.cqh)
            },
            b() {
                alert(this.id)
            }
        }
    })
</script>

运行以下

计算属性-computed

为了不在模板中加入太重的业务逻辑，好比拼接字符串，计算价格等
vue还提供了计算属性的方法computed

<div id="app">
    <p>{{fullName}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
        },
        computed: {
            fullName() {
                return this.cqh + "-雪山飞猪"
            }
        }
    })
</script>

运行以下

3、控制逻辑

v-if/v-else

<div v-if="yes">
    <div v-if="inner">inner</div>
    <div v-else>not inner</div>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            yes:true,
            inner:false,
        }
    })
</script>

输出

v-for

<div id="app">
    <ul>
        <li v-for="v in list">
            <h3>{{v.title}}-{{v.description}}</h3>
        </li>
    </ul>
    <ul>
        <li v-for="(v,k) in list">
            <h3>{{k}}-{{v.title}}-{{v.description}}</h3>
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            list: [
                {title: "php", description:"脚本语言"},
                {title: "java", description:"编译语言"},
                {title: "golang", description:"编译语言"},
            ],
        }
    })

输出

template

v-if指定都包含在一个根元素中，若是想应用到多个兄弟节点上不想重复写，就用template，最后渲染结果不会有它！

<div id="app">
    <template v-if="yes">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </template>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            yes: true,
            inner: false,
        }
    })
</script>

最后渲染以下

4、表单控件

Text文本框

<div id="app">
    <input type="text" v-model="cqh">
    <span>你的名字是：{{cqh}}</span>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
        }
    })
</script>

当咱们修改表单元素的同时，v-model中的值也是实时更新的

Radio单选框

<div id="app">
    <label><input type="radio" value="male" v-model="gender">男</label>
    <label><input type="radio" value="female" v-model="gender">女</label>
    <p>你的性别是：{{gender}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            gender:"",
        }
    })
</script>

输出

Checkbox复选框

<div id="app">
    <label><input type="checkbox" value="1" v-model="list">1</label>
    <label><input type="checkbox" value="2" v-model="list">2</label>
    <label><input type="checkbox" value="3" v-model="list">3</label>
    <p>你的选择是：{{list.join('|')}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            list:[],
        }
    })
</script>

输出

Select选择框

<div id="app">
    <select v-model="list">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <p>你的选择是：{{list}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            list: "",
        }
    })
</script>

输出