不忘初心,
牢记使命。

VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与styl

2021-04-11 大聪明 0评论 238 0喜欢

VUE.js

官方文档:https://cn.vuejs.org/v2/guide/components-props.html

基础

安装

CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// 建议引入带有版本号的
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

下载

https://cdn.jsdelivr.net/npm/vue@2.6.12

打开此链接,新建一个vue.js文件,ctrl+a 全选, ctrl+c 复制 ctrl+v粘贴

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

安装

# 最新稳定版 
$ npm install vue

命令行工具(CLI脚手架)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。

这个需要一定基础,后边再学。

开始使用

建议使用的IDE:HBuilderX

https://www.dcloud.io/hbuilderx.html

使用标准版即可

解压后即可使用,我们新建一个普通项目,选择vue项目(普通模式)。

img

Hello Vue

数据和 DOM 已经被建立了关联,所有东西都是响应式的。打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- 使用双花括号进行渲染 -->
            {{message}}
        </div>

        <script type="text/javascript">
            // 声明一个vue对象
            let app = new Vue({
                el:"#app",
                // 数据
                data:{
                    message:"Hello Vue!"
                }
            })
        </script>
    </body>
</html>

绑定元素 attribute:

        <!-- 绑定属性 -->
        <div id="app02">
            <span v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息!
            </span>
        </div>

        <script type="text/javascript">
            // 声明一个vue对象
            let app2 = new Vue({
                el:"#app02",
                data:{
                    message:'页面加载于 ' + new Date().toLocaleString()
                }
            })
        </script>

v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。

条件与循环

v-if v-else 之间不能有其他不在判断语句之中的内容

v-for 指令可以绑定数组的数据来渲染一个项目列表:

<!-- 循环与判断 -->
<div id="app03">
    <p v-if="seen">现在你看到我了!</p>
    <li v-for="item in todos">{{item.text}}</li>
</div>


let app3 = new Vue({
    el:"#app03",
    data:{
        seen:true,
        todos:[
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
        ],
    }
})
//在浏览器调试窗口改变seen的值,你会发现网页立马变化。同步的。
app3.seen = false
false
app3.seen = true
true

处理用户输入

v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法

v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定

<!-- 绑定事件 -->
<div id="app04">
    <p>{{message}}</p>
    <input v-model="message" />
    <button v-on:click="reverse">反转</button>
</div>


let app4 = new Vue({
    el:"#app04",
    data:{
        message:"Hello Vue!"
    },
    //方法
    methods:{
        reverse:function(data){
        this.message = this.message.split('').reverse().join('')
        }
    }
})

Vue实例

创建一个vue实例

通过上边的了解,我们已经知道,vue实例:

var vm = new Vue({
  // 选项
})

数据与方法

数据:data,里边为键值对。

方法:methods,方法名:对应的函数。

模板语法

v-onec 只插入一次

v-html 渲染标签,相当于Django中的safe过滤,不加可以防止XSS攻击

v-bind 绑定一个属性,可以缩写成 :绑定的属性字段名曾

v-on 事件绑定,可以缩写成 @click=

表达式应用

三元运算符

代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <!-- 一次性生成,后边再改变nsg的值它有不发生变化 -->
            <h1 v-once>{{msg}}</h1>
            <!-- 不会渲染<span> -->
            <h1>{{htmltext}}</h1>
            <!-- 会渲染span标签 -->
            <h1 v-html="htmltext"></h1>
            <!-- 绑定一个属性,修改属性内容 -->
            <!-- <div v-bind:id="idname"> -->
            <div :id="idname">
                <h1>{{idname}}</h1>
            </div>
            <!-- 表达式应用 -->
            <h1>{{firstName+lastName}}</h1>
            <!-- 三元运算符 -->
            <h1>{{isVip?"Vip":"novip"}}</h1>
            <!-- 事件绑定 -->
            <!-- <button type="button" v-on:click="changeBg">改变背景</button> -->
            <h1><button type="button" @click="changeBg">改变背景</button></h1>

        </div>
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"hello vue",
                    htmltext:"<span>hello</span>",
                    idname:'login',
                    firstName:"张",
                    lastName:"三",
                    isVip:true,
                },
                methods:{
                    changeBg:function(){
                        document.body.style.background = "skyblue"
                    }
                }
            })
        </script>
    </body>
</html>

计算属性和侦听器

计算属性

computed

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- 一次修改的话这两种情况的性能是一样的,只有在反复变化的情况下,第二种计算属性才会节省性能 -->
            <!-- 一般情况下的写法 -->
            <h1>{{firstname + lastname}}</h1>
            <!-- 计算属性fullname -->
            <h1>{{fullname}}</h1>
            <h1>{{reverseMsg}}</h1>
        </div>

        <script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    firstname:'张',
                    lastname:'三',
                    msg:'hello vue',
                },
                computed:{
                    // 计算属性
                    fullname:function(){
                        // 会将计算的结果进行缓存,只要遍历属性值不变,就不会重新计算
                        return this.firstname+this.lastname
                    },
                    // get和set事件,当reverseMsg改变后,会调用set方法
                    reverseMsg:{
                        get:function(){
                            return this.msg.split('').reverse().join('')
                        },
                        set:function(val){
                            console.log(val)
                            this.msg = val
                        }
                    }
                }
            })
        </script>
    </body>
</html>

侦听器

尽量不要多用,可以用coputed

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- 在console中改变msg的值,就会出发msg绑定的监听事件方法 -->
        <div id="app">
            {{msg}}
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    msg:"hello vue"
                },
                // 监听事件
                watch:{
                    msg:function(val){
                        console.log(val)
                    }
                }
            })
        </script>
    </body>
</html>

class与style绑定

绑定HTML Class

通过对象的方式决定是否存在某个类

通过数组加载类名

直接放置字符串

混合使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .active{
                width: 200px;
                height: 200px;
                background-color: skyblue;
            }
        </style>
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
    </head>
    <body>
        <div id="app">
            <div id="" :class="{active:isTrue}" class="page">
                <!-- 通过对象的方式决定是否存在某个类 -->
            </div>
            <div id="" :class="styleObj" class="page">
                <!-- 会把这个列表里的类名(键名)加载进来 -->
            </div>
            <div id="" :class="styleArr">
                <!-- 通过数组加载类名 -->
            </div>
            <div id="" :class="styleStr" class="page-9">
                <!-- 直接放置字符串 -->
            </div>
            <div id="" :class="arrobj">
                <!-- 混合使用 -->
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    isTrue:true,
                    styleObj:{
                        active:true,
                        laochen:true,
                        "col-6":true,
                    },
                    styleArr:['col-lg-2', 'col-xs-12'],
                    styleStr:"abc page col-mg-9",
                    arrobj:["abc", {active:true}]
                },
                computed:{
                    trueis:{
                        get:function(){
                            return
                        },
                        set:function(val){
                            console.log(val)
                            this.isTrue = val
                        }
                    }
                }
            })
        </script>
    </body>
</html>

发表评论 取消回复

电子邮件地址不会被公开。

请输入正确格式的qq邮箱
请输入以http或https开头的URL,格式如:https://libo_sober.top