vue基本语法

2021-08-08 本文已影响0人爱学习的代代

一、推荐插件

Live Server 插件，保存后自动刷新浏览器

open in browser, 可以将html直接在浏览器中打开

二、el：挂载点

el的作用是设置vue实例并挂载。

Q1： Vue实例的作用范围是什么呢？

Q2：是否可以使用其他选择器？

Q3：是否可以设置其他的DOM元素呢？

el 挂载点支持的选择器，可以支持id、class选择器，标签选择器
data数据的作用范围是声明的app的内部
id选择器唯一，一般使用id选择器作为挂载的声明。
是否可以设置其他的DOM元素呢？

可以使用其他的双标签，但是不能使用HTML和BODY

三、data: 数据对象

Vue中用到的对象定义在data中
data中可以写复杂的数据类型：比如字符串、数组、对象
渲染复杂对象时，遵循js的语法即可。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app" class="app">
        <span>{{ message }} </span>
        <h1>{{ introduction.name }}</h1>
        <h1>{{ introduction.mobile }}</h1>
        <h2>熟悉的语言</h2>
        <ul>
            <li>
                {{ goodAt[0] }}
            </li>
            <li>
                {{ goodAt[1] }}
            </li>
            <li> {{ goodAt[2] }}</li>
            <li> {{ goodAt[3] }}</li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            // el: '.app',
            // el: 'div',
            el: '#app',
            data: {
                message: '开始学习Vue的第一天',
                introduction: {
                    name: "peter",
                    mobile: "14345665566"
                },
                goodAt: ['Java', 'PHP', 'Swift', 'Python']
            }
        })
    </script>
</body>

</html>

四、Vue指令

内容绑定： v-text， v-html， v-on基础
显示切换，属性绑定： v-show, v-if, v-bind
列表循环，表单元素绑定： v-for, v-on补充，v-model

v-text的作用：

设置标签的内容
默认写法会替换全部内容，使用差值表达值{{}}，可以替换指定内容。

示例:

<body>
    <div id="app">
        <h2 v-text="message + '!'">上海</h2>
        <h2>{{ message + '!' }}上海 </h2>
    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "测试消息",
            info: "前端vue学习"
        }
    }) 
</script>

v-html指令的作用：

设置元素的innerHtml标签
内容中的html结构会被设置成标签
v-text指令无论内容是什么，都只会被解析成文本
即解析文本使用v-text，如果需要解析html结构使用v-html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 执行</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <h2 v-text="message + '!'">上海</h2>
        <h2>{{ message + '!' }}上海 </h2>
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "测试消息",
            info: "前端vue学习",
            content: "<a href='http://www.baidu.com'>百度</a>"
        }
    }) 
</script>


    
</body>
</html>

v-on基础：

v-on指令的作用是为元素添加绑定事件
事件名不需要写on：v-on:click="doSomething"
指令名可以简写成@click
要绑定的方法写在methods中

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 执行</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body> 
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on指令简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="addFood">{{ food }} </h2>
    </div>
<script>
    var app = new Vue({ 
        el: '#app',
        data: {
          food: "西蓝花"  
        },
        methods:{
            doIt:function() {
                alert("做it")
            },
            addFood:function() {
                this.food += "加1个"
            }
        }
       
    }) 
</script>


    
</body>
</html>

练习：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue计数器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body> 
    <div id="app">
        <button class="btn" @click="sub">-</button>
        <span id="number">{{ num }}</span>
        <button class="btn" @click="add">+</button>
    </div>
<script>
    var vue = new Vue({
        el: "#app",
        data:{
            num:0 
        },
        methods: {
            add: function(){
                if(this.num < 10) {
                    this.num++
                }else {
                    alert("已经超出最大值了,不可再增加了！")
                }
            },
            sub: function(){
                if(this.num > 0 ) {
                    this.num--
                }else {
                    alert("达到最小值了，不能再减了!")
                }
            
            }

        }
    })
</script>

<style>
    #app {
        margin-top: 100px;
        text-align: center;
    }
    #number {
        width: 100px;
        display: inline-block;
        /* display: -moz-inline-box; */
        background-color: white;
    }
    .btn {
        width: 100px;
        height: 60px;
        background-color: lightgray;
        border-radius: 5px;
    }
</style>
</body>
</html>

要点总结：

创建Vue时：el（挂载点），data（数据）， methods（方法）
v-on是用于给元素绑定事件
方法中通过this获取data中的数据
v-text指令的作用是设置元素的文本值，简写为{{}}
v-html指令的作用是设置元素的innerHTML

v-show

根据表达的真假来切换元素的展示与隐藏
原理是修改元素的display,实现隐藏显示
指令后面的内容，最终都会解析成布尔值
值为true元素显示，值为false元素隐藏。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 执行</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body> 
    <div id="app">
        <input type="button" value="隐藏与显示" @click="displayOrNot">

        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F12111610486%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630309971&t=0a435278721989e72e1e62e0eb46113e" v-show="isShow" id = "jinchen" >
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F12111610486%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630309971&t=0a435278721989e72e1e62e0eb46113e" v-show="age>25" id = "jinchen" >

    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            age: 20
        },
        methods: {
            displayOrNot:function() {
                // this.isShow = !this.isShow
                this.age++  
            }
        }
    }) 
</script>


<style>
    #jinchen{
        width: 200px;
        height: 360px;
    }
</style>    
</body>
</html>

v-if

根据表达式的真假来切换元素的显示状态
本质是通过操作dom元素来切换显示状态
当表达式的值为true时，元素存在于dom树中，如果为false则将元素从dom树中移除。
频繁的切换使用v-show, 反之使用v-if。 v-show切换带来的消耗小。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body> 
    <div id="app">
        <input type="button" value="点击切换显示与隐藏" @click="toggleIsShow">
        <p v-if="isShow">今天是个好日子 v-if</p>
        <p v-show="isShow">今天是个好日子  v-show</p>
        <h3 v-if="temperature > 30">今天很热，注意防晒</h3>
    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            temperature: 20
        },
        methods: {
            toggleIsShow: function() {
                this.isShow = !this.isShow
            }
           
        }
    }) 
</script>
   
</body>
</html>

v-bind

为元素绑定属性：比如（src, title, class ）
完整的写法是v-bind:属性名
简写的话，可以直接忽略v-bind,只保留属性名。
需要动态的增删class ，建议使用对象的方式。

v-bind:src

v-bind:title

v-bind:class

其中v-bind可以省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<style>
    .active {
        border: 1px solid red;
    }
</style>
<body> 
    <div id="app">
        <!-- 默认写法 -->
        <!-- <img src="imgSrc" alt=""> -->
        <br>
        <!-- 使用v-bind指令 -->
        <img v-bind:src="imgSrc">
        <br>
        <!-- 三元表达式 -->
        <img :src="imgSrc" alt="" :title="imgeTitle + '!!!'" :class="isActive ? 'active' : ''" @click="toggleActive">
        <br>
        <!--  对象引用的方式-->
        <img :src="imgSrc" alt="" title="imgeTitle + '使用对象的方式'" :class={active:isActive} @click="toggleActive">

    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: "https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/6cf049a661ee8b72a828c951cd96bc20/6cf049a661ee8b72a828c951cd96bc20.png",
            imgeTitle: "王者峡谷一日游",
            isActive: false
        },
        methods: {

          toggleActive:function() {
              this.isActive = !this.isActive
          } 
        }
    }) 
</script>
   
</body>
</html>

案例：图片轮播器

[图片上传失败...(image-4f996b-1628392641235)]

按钮左右元素
图片元素

分析：

多张图片放到一个数组内
切换的时候，修改显示元素的数组的索引
边界值考虑：第一张不显示左侧按钮，最后一张不显示右侧按钮。

使用的知识点：

v-bind: 来控制图片的内容的更换(更改图片的属性)

v-on: 添加点击事件

v-show/v-if：控制元素的显示与隐藏

代码示例：

说明：其目的是防止链接跳转到其他页面。

href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，
而void(0)表示一个空的方法，也就是不执行js函数。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播图组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<style>
    .a-btn {
        height: 21px;
            line-height: 21px;
            padding: 0 11px;
            background: #02bafa;
            border: 1px #26bbdb solid;
            border-radius: 3px;
            display: inline-block;
            text-decoration: none;
            font-size: 12px;
            outline: none;
            text-align: center;
    }
</style>

<body>
    <div id="app">
        <a href="javascript:void(0)" v-show="index!=0" @click="pre" class="a-btn">上一个</a>
        <img :src="imgArr[index]" alt="">
        <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="a-btn">下一个</a>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgArr: ["./imgs/01.jpeg", "./imgs/02.jpeg", "./imgs/03.jpeg", "./imgs/04.jpeg", "./imgs/05.jpeg"],
                index: 0
            },
            methods: {
                pre: function () {
                    this.index--;
                    console.log(this.index);
                },
                next: function () {
                    this.index++;
                    console.log(this.index);
                }

            }
        })
    </script>

</body>

</html>

v-for 列表结构

v-for是根据数据生成列表结构
数组经常和v-for结合使用
语法是(item, index) in 数据
item， index可以结合其他指令一起执行
数据长度的更新会同步到页面上，是响应式的。

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body> 
    <div id="app">
        <input type="button" @click="add" value="添加">
        <input type="button" @click="remove" value="移除">

        <p>中国好的城市城市如下：</p>
        <ul>
            <li v-for="(item, index) in citys">{{index}} 、{{ item }}</li>
        </ul>
    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            citys:["北京", "上海", "广州", "深圳"]
        },
        methods: {
            add: function() {
                this.citys.push("南京");
            },

            remove: function() {
                this.citys.shift();
            }

        }
    }) 
</script>
   
</body>
</html>

v-on 补充

传递自定义参数、事件修饰符。

事件绑定的方法，写成函数调用的形式，可以传入自定义参数
定义方式时，需要定义形参来接收传入的实参。
事件的后面，修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车

时间修饰符有多种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body> 
    <div id="app">
        <input type="button" @click="add(3)" value="数字累加">
        <h2>{{ num }}</h2>
<!-- 当输入完数据，回车时，触发事件 -->
        <input type="text" @keyup.enter="sayHi">
    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {
            add:function(num){
                this.num += num
            },
            sayHi:function(){
                alert("说早安!!!")
            }
        }
    }) 
</script>
   
</body>
</html>

v-model

获取和设置数据的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body> 
    <div id="app">
        <input type="text" v-model="message">
        <input type="button" @click="setmessage" value="更改元素的值">
        <h2>{{ message }}</h2>

    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "peter加油"
        },
        methods: {
            setmessage:function(){
                this.message="嗯啊, 好好加油"
            }
        }
    }) 
</script>
   
</body>
</html>

记事本应用代码

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>小黑记事本</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>代代记事本</h1>
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in list" >
          <div class="view">
            <span class="index">{{ index+1 }}.</span>
            <label>{{ item }}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" >
      <span class="todo-count" v-show="list.length>0">
        <strong>{{ list.length }}</strong> items left
      </span>
      <button class="clear-completed" @click="removeAll">
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#todoapp",
      data: {
        list: ["吃饭", "学习", "打豆豆"],
        inputValue: ""
      },
      methods: {
        add:function() {
          // 当输入为空的时候,不可以添加。
          console.log(this.inputValue)
          if (this.inputValue.length > 0) {
            this.list.push(this.inputValue);
            // 添加成功后需要将输入栏数据清空
            this.inputValue = "";

          } else {
            alert("输入的内容为空！！")
          }
        },
        remove:function(index) {
          console.log("remove")
          console.log(index);
          this.list.splice(index,1)
          
        },
        removeAll:function(){
          // this.list.splice(0,this.list.length)
          this.list = [];
        }
      },
    })
  </script>
</body>

</html>

三、网络库:axios

axios回调函数中的this已经改变了，无法通过this去访问到data中的数据
解决办法: 将this保存起来，回调函数中直接使用保存的this即可。
和本地应用最大的区别就是改变了数据源。

代码示例:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios的使用</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </script>
</head>

<body>
    <div id="app">
        <input type="button" value="发送get请求" @click="get_content">
        <p>{{ joke }}</p>
        <input type="button" value="发送post请求" @click="post_content">
        <!-- <h5>post请求获取的内容:{{ post_response}}</h5> -->

    </div>


    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                joke: "一个笑话",
            },
            methods: {
                get_content: function(){
                    var that = this;
                    console.log(this.joke)
                    axios.get('https://autumnfish.cn/api/joke').then(function (response){
                        // console.log(response);
                        console.log(this.joke)
                        that.joke = response.data;
                    }, function(err) {
                        console.log(err)
                    })
                },
                post_content: function(){
                    axios.post('https://autumnfish.cn/api/user/reg', {username: "lilililili"}).then( function (response) {
                        console.log(response)
                    }, function(err) {
                        console.log(err)
                    })
                }
            }
            
        })
    </script>
</body>

</html>

应用: 天气查询功能

功能分析：

获取输入城市（v-model）
通过城市，查询天气（）
渲染页面
hotkey搜索，服用查询天气的逻辑

总结：

自定义参数可以让代码的复用性更高
methods中定义的方法，可以通过this来获取已经声明过的方法。

五、综合应用- 音乐播放器

audio标签的play事件会在音频播放的时候触发
audio标签的pause事件会在音频暂停的时候触发
通过对象的方式设置类名，类名生效与否取决于后面值的真假。

vue基本语法

一、推荐插件

二、el：挂载点

三、data: 数据对象

四、Vue指令

五、综合应用- 音乐播放器

猜你喜欢

热点阅读

vue基本语法

一、推荐插件

二、el： 挂载点

三、data: 数据对象

四、Vue指令

五、综合应用- 音乐播放器

猜你喜欢

热点阅读

二、el：挂载点