Vue的基础语法

申小兮
89 阅读3分钟

开始学习Vue前，我们一起来认识一下什么是Vue吧🧐

Vue

1、概念

Vue是一套用于构建用户界面的渐进式框架（框架是为了快速开发）

2、思路转变

从js到vue，有什么区别呢？
（1）js：先获取元素才能操作元素的内容，样式等等
（2）vue：先有数据，绑定数据，操作数据

3、vue资源及下载

（1）官网：Vue.js (vuejs.org)
（2）安装vue.js资源文件，建议下载开发版本 安装 — Vue.js (vuejs.org)
image.png

4、使用

（1）vue资源的引入

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

（2）基础模板

<div id="app"></div>
<script>
    const app = new Vue({
        el:'#app',//挂载
        data:{},//数据
        method:{},//方法
    })
</script>

（3）运行检查会有生产环境的提示，可以到下载的vue.js资源文件进行手动关闭

image.png image.png

5、关于插件

（1）资源网站有各种各样的插件，小伙伴们可以根据自己的需求，下载各种插件 极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn)
（2）vue的资源文件，小伙伴们可以到这个资源网站搜索下载 image.png

（3）该资源，小伙伴们可以加到浏览器的扩展中，这样控制器就有vue调试的功能了

image.png

一、插值操作

1、Mustache

（1）用于绑定数据，且这些数据都是响应式，同时可以做一些简单的表达式
（2）写法： {{}}

<div id="app">
    <h1>{{name}}</h1>
    <h2>{{arr[1]+arr[2]}}</h2><!-- 运算数组结果 -->
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'申小兮',
            arr:[1,2,3,4,5]
        },
    })
</script>

image.png

2、v-once指令

（1）元素和组件只渲染一次，不随数据变化而变化，即在开发者工具修改数值时，页面不会变化
（2）写法

<h1 v-once>{{name}}</h1>

image.png

3、v-html指令

（1）可以把字符串解析成标签，区别于使用mustache时显示原本的内容，即标签对也会直接显示在页面上
（2）写法

<div id="app">
    <h1 v-html="name"></h1>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'<a href="https://blog.csdn.net/qq_51478745?type=blog">申小兮</a>',
        },
    })
</script>

4、v-text指令

（1）作用于mustache一致
（2）写法

<div id="app">
    <h1>{{name}}</h1>
    <h1 v-text="name"></h1>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'申小兮',
        },
    })
</script>

5、v-pre指令

（1）跳过vue的语法解析，就是要页面显示{{}} 括号
（2）写法

<h1 v-pre>{{name}}</h1>

6、v-clock

（1）设置未渲染时的样式，注意vue渲染是需要时间的，在渲染过程中会显示很多尖括号，使用户体验感不好
（2）通过定时器凸显一下渲染时间问题

<div id="app">
    <h1>{{name}}</h1>
</div>
<script>
    setTimeout(() => {
        const app = new Vue({
            el: '#app',
            data: {
                name: '申小兮',
            },
        })
    },2000)
</script>

（3）解决渲染问题的写法

<style>
    [v-clock]{
        display: none;
    }
</style>

<h1 v-clock>{{name}}</h1>

二、绑定属性

1、v-bind指令

（1）作用是动态绑定属性
（2）简写方法就是一个冒号 :
（3）使用时属性等号右边是一个变量

<div id="app">
    <img v-bind:src="url" alt="">
    <img :src="url" alt="">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs1.51ctocdn.cn%2Fimages%2F201708%2F11%2F1425d6de826257c71f3b9168e52392b7.jpg&refer=http%3A%2F%2Fs1.51ctocdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668056193&t=00500010e17bdaa85cf4085c7a979c32'
        },
    })
</script>

2、绑定class

（1）字符串： 适用于样式类名不确定，需要动态绑定
（2）对象： 绑定的个数确定，名字确定，动态决定用不用
（3）数组（不常用）： 绑定的个数不确定，名字也不确定

<style>
        .default{
            width: 200px;
            height: 200px;
            background-color: rgb(0, 200, 255);
            box-sizing: border-box;
        }
        .happy{
            background-color: red;
            border-radius: 50%;
        }
        .sad{
            background-color: gray;
            border: 10px solid black;
        }
        .active{
            border-radius: 50px;
            border: 20px solid green;
        }
        .normal{
            border: 5px solid yellow;
        }
    </style>

<div id="app">
    <div class="default" :class="mood"></div>
    <div class="default" :class="moodObj"></div>
    <div :class="moodArr"></div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            mood:'happy',//字符串法
            moodObj:{//对象法
                active:false,
                normal:false,
            },
            moodArr:['default','active','sad']//数组法
        },
    })
</script>

3、绑定style

（1）对象
（2）数组

<script>
    const app = new Vue({
        el:'#app',
        data:{
            styleObj:{//对象
                backgroundColor:'red',
                borderRadius:'50%'
            },
            styleArr:[//数组
            {
                backgroundColor:'red',
                borderRadius:'50%'
            },
            {
                border:'10px solid gray'
            },
            ]
        },
    })
</script>

注意： 复合属性在对象中要用驼峰的形式表示

三、methods属性

1、改变class

<div id="app">
    <div class="default" :class="mood"></div>
    <div class="default" :class="moodObj"></div>
    <div :class="moodArr"></div>
    {{changeClass()}}
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            mood:'sad',
            moodObj:{
                active:false,
                normal:false,
            },
            moodArr:['default','active','sad']
        },
        methods:{
            changeClass(){
                console.log(this);//指当前的Vue
                this.mood='happy'//不要漏掉this
            }
        }
    })
</script>

2、改变style

<div id="app">
    <div class="default" :style="styleObj"></div>
    <div class="default" :style="styleArr"></div>
    {{changeStyle()}}
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            styleObj:{
                backgroundColor:'yellow',
                borderRadius:'50%',
            },
            styleArr:[
            {
                backgroundColor:'yellow',
                borderRadius:'50%',
            },
            {
                border:'10px solid green'
            },
            ]
        },
        methods:{
            changeStyle(){
                this.styleObj.borderRadius = '50px'
            }
        }
    })
</script>

四、计算属性

1、computed

（1）将数据转化后再显示
（2）方法名称不能和data，methods一样
（3）写法

<div id="app">
    <h1>{{userInfo()}}</h1>
    <h1>{{info}}</h1><!-- 注意computed调用方法不需要括号() -->
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            user:{
                name:'申小兮',
                age:18,
            },
        },
        methods:{
            userInfo(){
                return `我叫${this.user.name}，今年${this.user.age}`
            }
        },
        computed:{
            info(){
                return `我叫${this.user.name}，今年${this.user.age}`
            }
        }
    })
</script>

2、computed缓存效果

<div id="app">
    <h1>{{userInfo()}}</h1>
    <h1>{{info}}</h1>
    <h1>{{userInfo()}}</h1>
    <h1>{{info}}</h1>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            user:{
                name:'申小兮',
                age:18,
            },
        },
        methods:{
            userInfo(){
                console.log('methods');
                return `我叫${this.user.name}，今年${this.user.age}`
            }
        },
        computed:{
            info(){
                console.log('computed');
                return `我叫${this.user.name}，今年${this.user.age}`
            }
        }
    })
</script>

image.png

 五、绑定事件

1、使用方法

（1）v-on:事件类型="函数()"
（2）缩写
@事件类型="函数()"

<div id="app">
    <button v-on:click="add()">+</button>
    <button @click="sub()">-</button>
    <div>{{num}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            num:0,
        },
        methods:{
            add(){
                this.num++;
            },
            sub(){
                this.num--;
            }
        }
    })
</script>

2、参数问题

（1）没有参数：括号可以不写

<button v-on:click="add">+</button>
<button @click="sub">-</button>

（2）有参数

<div id="app">
    <button v-on:click="add(5)">+</button>
    <button @click="sub()">-</button>
    <div>{{num}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            num:0,
        },
        methods:{
            add(a){
                this.num += a;
            },
            sub(){
                this.num--;
            }
        }
    })
</script>

（3）默认形参：$event

<div id="app">
    <button v-on:click="add(5)">+</button>
    <button @click="sub($event,2)">-</button>
    <div>{{num}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            num:0,
        },
        methods:{
            add(a){
                this.num += a;
            },
            sub(e,b){
                console.log(e);
                this.num -= b;
            }
        }
    })
</script>

3、事件修饰符

（1）阻止冒泡事件
①什么是冒泡事件？举个例子，当用户仅想点击按钮时，按钮下的box也被点击了

<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div id="app">
    <div class="box" @click="boxClick">
        <button @click="btnClick">点击</button>
    </div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        methods:{
            boxClick(){
                console.log('点击了box');
            },
            btnClick(){
                console.log('点击了按钮');
            }
        }
    })
</script>

image.png

②解决方法一： @事件类型.stop

<button @click.stop="btnClick">点击</button>

③解决方法二： .stopPropagation()

btnClick(){
    console.log('点击了按钮');
    event.stopPropagation()
}

（2）阻止默认事件，例子：点击登录form表单会自动跳转至action下的页面，即使没有action页面，当前页面也会在点击之后刷新，如果不想默认跳转呢？
①解决法一： @事件类型.prevent

<div id="app">
    <form action="https://blog.csdn.net/qq_51478745?type=blog">
        <button @click.prevent="login">登录</button>
    </form>
</div>
<script>
    const app = new Vue({
        el:'#app',
        methods:{
            login(){
                console.log('登录成功');
            }
        }
    })
</script>

②解决法二：event.preventDefault();

<div id="app">
    <form action="https://blog.csdn.net/qq_51478745?type=blog">
        <button @click="login">登录</button>
    </form>
</div>
<script>
    const app = new Vue({
        el:'#app',
        methods:{
            login(){
                event.preventDefault();
                console.log('登录成功');
            }
        }
    })
</script>

（3）once一次事件： 按钮仅一次有效， @click.once

<div id="app">
    <button @click.once="onceClick">一次事件</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        methods:{
            onceClick(){
                console.log('执行');
            }
        }
    })
</script>

（4）回车事件： @keyup.enter

<div id="app">
    <input @keyup.enter="enterUp">
</div>
<script>
    const app = new Vue({
        el:'#app',
        methods:{
            enterUp(){
                console.log('回车');
            }
        }
    })
</script>
avatar
文章
阅读
粉丝