Vue中的基础语法

最新推荐文章于 2023-08-17 21:06:23 发布

v“u

最新推荐文章于 2023-08-17 21:06:23 发布

阅读量229

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48358407/article/details/128202584

版权

文章目录

Vue中的基础语法

Vue中的基础语法

一：Vue基础之插值表达式

1.1：代码展示

在插值表达式中只能使用js表达式、三元运算符、方法调用
MVVM：M->model V->view 即 html代码 VM->viewModel 负责数据即Model与视图即View之间的调度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://v2.vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 差值 **表达式** -->
        <p>string  ——  {{string}}</p>
        <p>count == 100  ——  {{count == 100}}</p>
        <p>count < 100  ——  {{count < 100}}</p>
        <p>count+10  ——  {{count+10}}</p>
        <p>string.split("|")  ——  {{string.split("|")}}</p>
        <p>count < 100?"小于":"大于"  ——  {{count < 100?"小于":"大于"}}</p>
        <p>{{fun2}}</p>
        <p>{{fun2()}}</p>


        <!-- <p>{{var a = count}}</p>
        <p>{{ if(count == 100)retrun "true" }}</p> -->
    </div>
    <script>
       //
       var vm =  new Vue({
           //el可以使用id选择器
           //el也可以使用class选择器
           //el还可以使用dom对象
           //el不能尝试使用html以及body
           el: document.getElementById("app"),
           data:{
               string:"Hello word | 你好世界",
               count:100,
               array:[1,2,3,4,5,],
               object:{
                   id:1,
                   name:"张山"
                }
           },
           mounted() {
                // console.log(this);
                // var that =this;
                // testFun(function(){
                //     console.log(that);
                // })
               this.fun1();
           },
           methods: {
               fun1:function(){
                  console.log(this.string) 
               },
               //ES6的简写形式
               fun2(){
                return "hahaha";
               },
               fun3:()=>{

               }
           },
       });
       function testFun(fun){
           fun();
       }
       var fun = function(){
           
       }
    //    console.log(vm.string);
    //    console.log(vm.$data.string);
    </script>
</body>
</html>

1.2：测试结果

在这里插入图片描述

二：v-text与v-html

2.1：简述

2.1.1：凡是v-开头的都叫vue指令

2.1.2： v-text 和 v-html 和innerText 与 innerHTML相比较

插入式的数据渲染 ：v-text、 v-html 是整体式的数据替换，尚未渲染完成时不会出现东西（渲染标签中事先有内容除外）
注意：非必要时尽量不要使用或者禁止使用v-html ，因为会有XSS跨站脚本攻击

2.2：代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://v2.vuejs.org/js/vue.min.js"></script>
</head>
<body>
  
    <div id="app">
        <P>{{string}} ——小明在玩</P>
        <p v-text="string">小明写作业</p>
        <p v-html="string">小明吃饭</p>
    </div>
    <script>
        var vm =  new Vue({
           el: document.getElementById("app"),
           data:{
               string:"<b>Hello xiaoming</b> | 你好小明",
               count:100,
               array:[1,2,3,4,5,],
               object:{
                   id:1,
                   name:"小明"
                }
           },
       });

   
    </script>
</body>
</html>

2.3：测试结果

在这里插入图片描述

三：Vue基础之v-if与v-show

3.1：简述

v-if：更大的开销适用于不平凡切换显示状态，并且初始渲染时不必渲染，多重判断时适合使用
v-show：开销较小适用于平凡切换显示状态

3.2：代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://v2.vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
    
        <p v-if="isShow">v-if————————{{string}}</p>
        <p v-else>v-else————————{{string}}</p>
        <p v-show="isShow">v-show————————{{string}}</p>
    </div>
    <script>
        var vm =  new Vue({
           el: document.getElementById("app"),
           data:{
               string:"<b>Hello word</b> | 你好世界",
               count:100,
               array:[1,2,3,4,5,],
               object:{
                   id:1,
                   name:"小明"
                },
                isShow:true
           },
       });
    </script>
</body>
</html>

3.2：测试结果

在这里插入图片描述

四：click事件介绍

4.1：基本语法

用v-on：绑定click事件

 <button v-on:click="clickMe('Bt')">点击我</button>

用@符号绑定click事件

  <button @click="clickMe('Bt')">点击我</button>

click.once表示该点击事件只触发一次

  <button @click.once="clickOnce">只触发一次</button>

 clickOnce(){
                alert("我被触发了");
            },

click.prevent阻止默认事件:

   <a href="http://www.baidu.com" @click.prevent="stopjump">百度</a>

 stopjump(){
                alert("我被触发了");
            },

click.stop防止冒泡事件：冒泡事件出现的原因主要是多个div嵌套的点击事件，当触发最内层点击事件后会依次触发嵌套在该div上的多个点击事件

 <!-- click.stop 阻止冒泡事件 -->
        <div @click="alert(1)">
            <div>
                <div @click.stop="alert(3)">
                    我是div
                </div>
            </div>
        </div>

五：change和input事件的双向绑定

利用v-on:change或者@change绑定改变事件在输入框中的值发生改变的时候就会触发change事件

<input type="text" @change="change">

   change(){
                alert("数据改变了");
            },

input事件实现双向绑定，当输入框中的值发生改变的时候通过v-bind将渲染的值改变为input中的值

<input type="text" v-bind:value="string" @input="inputChange($event)">

input通过v-bind绑定vue实例data中的值当input中的值发生改变时就会通过事件对象讲input中的值赋值给data中然后再通过vue实现数据的渲染从而达到双向绑定

  inputChange(e){
               this.string = e.target.value;
            }

在这里插入图片描述

六：v-for的使用

通过v-for可以可以循环的遍历数组或者对象中的属性值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://v2.vuejs.org/js/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- array是需要渲染的对象 而 item 是每次接收迭代对象的别名 -->
            <!-- <li v-for="item in array">{{item}}</li> -->
            <!--始终记住，第一个参数是获取每次迭代的的数据，第二个参数要看实际情况。如果是迭代数组，则第二个参数为数组的索引  -->
            <li v-for="(obj,i) in objectArray">{{obj.id}}————{{obj.name}}————{{i}}</li>
            <!-- 如果是迭代对象，则顺序不同 第一个参数是对象属性的value，第二个参数为属性的key，第三个参数才为索引 -->
            <li v-for="(v,k,i) in object">{{k}}——{{v}}——{{i}}</li>
            <li v-for="num in 10">{{num}}——指定数据</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: document.getElementById("app"),
            data: {
                string: "Hello word",
                count: 100,
                array: [1, 2, 3, 4, 5,],
                objectArray: [{
                    id: 1,
                    name: "小明"
                },
                {
                    id: 2,
                    name: "小刚"
                },
                ],
            },
        });
    </script>
</body>

</html>

在这里插入图片描述

七：v-bind结合样式的绑定

我们可以通过v-bindj将data中属性的值与该标签的样式进行绑定然后通过事件来改变样式甚至能够通过定时器来实现动态变化的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://v2.vuejs.org/js/vue.min.js"></script>
    <style>
        .p-style1 {
            background-color: aquamarine;
            color: red;
        }

        .bolder {
            font-weight: bolder;
        }

        .p-style2 {
            background-color: rgb(255, 215, 129);
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-bind 其作用是绑定标签上的所有属性 -->
        <!-- 当标签上的属性书变量或者动态的抑或需要改变的-->
        <!-- 简写 : -->
        <!-- <p v-bind:id="'pTest'"></p>
        <p :id="idName"></p> -->
        <!-- <p :class="showStyle?'p-style1':''">ppppppp</p> -->
        <!-- <p :class="{'p-style1':showStyle}">ppppppp</p> -->
        <!-- <p :class="['bolder',showStyle?'p-style1':'p-style2']">ppppppp</p> -->
        <!-- <p :class="['bolder',{'p-style1':showStyle}]">ppppppp</p> -->
        <p :style="{color:redval,borderWidth:'1px','border-color':'#000','border-style':'solid',width:widthval+'px'}">
            ppppppppp</p>
        <p :style="styleVal">p2p2p2p2p2p2</p>
        <p :style="[styleVal,borderVal]">p3p3p3p3p3p3</p>
        <button @click="changeColor">变色</button>
    </div>
    <script>
        var vm = new Vue({
            el: document.getElementById("app"),
            data: {
                idName: "dataP",
                showStyle: true,
                redval: "red",
                widthval: 300,
                styleVal: {
                    backgroundColor: 'rgb(255, 215, 129)',
                    color: 'blue'
                },
                borderVal: {
                    fontWeight: 'bolder'
                }
            },
            methods: {
                changeColor() {
                    this.redval = "blue";
                    var timeIndex = setInterval(() => {
                        this.widthval++;
                        if (this.widthval >= 600) {
                            clearInterval(timeIndex);
                        }
                    }, 10);

                }
            },
        });
    </script>

</body>

</html>

触发事件前
在这里插入图片描述
触发事件后

v“u

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的基础语法

2.3：测试结果3.2：测试结果用@符号绑定click事件click.once表示该点击事件只触发一次click.prevent阻止默认事件:click.stop防止冒泡事件：冒泡事件出现的原因主要是多个div嵌套的点击事件，当触发最内层点击事件后会依次触发嵌套在该div上的多个点击事件五：change和input事件的双向绑定利用v-on:change或者@change绑定改变事件在输入框中的值发生改变的时候就会触发change事件
复制链接

扫一扫