后端学前端：Vue学习总结（二）

最新推荐文章于 2022-11-08 12:03:16 发布

子夕听雨

最新推荐文章于 2022-11-08 12:03:16 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/lbllol365/article/details/104498250

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

后端学前端：Vue学习总结（二）

Tags: Vue

四、双向绑定

指令：v-model

作用：用在,和上，实现双向绑定

官网：

表单输入绑定 - Vue.js

注意：

v-model 会忽略所有表单元素的 value、checked、selected。 attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        单行文本演示-->
        <input v-model="singlemessage">
        <span>单行文本编辑的内容：{{singlemessage}}</span>
<!--        多行文本演示-->
        <textarea v-model="multimessage"></textarea>
        <span>多行文本编辑的内容:{{multimessage}}</span>
<!--        单个复选框，侧重于选没选-->
        <input type="checkbox"  v-model="checked">
        <span>{{checked}}</span>
<!--        多个复选框，侧重选了谁-->
        <input type="checkbox" value="A" v-model="checkwho">
        <span>A</span>
        <input type="checkbox" value="B" v-model="checkwho">
        <span>B</span>
        <input type="checkbox" value="C" v-model="checkwho">
        <span>C</span>
        <span>选了谁：{{checkwho}}</span>
        <br>
<!--        单选框演示-->
        <input type="radio" value="A" v-model="radiocheck">
        <span>A</span>
        <input type="radio" value="B" v-model="radiocheck">
        <span>B</span>
        <span>选了谁{{radiocheck}}</span>
        <br>
<!--        下拉框演示-->
        <select v-model="selectcheck">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>{{selectcheck}}</span>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                singlemessage:"Vue给的单行初始值",
                multimessage:"Vue给的多行初始值",
                checked:true,
                checkwho:[],
                radiocheck:'',
                selectcheck:''
            }
        })
    </script>
</body>
</html>

五、组件

组件是啥？

合法的自定义标签

官网：

组件注册 - Vue.js

Prop大小写问题：

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当使用 DOM 中的模板时，大小写不敏感。如果使用字符串模板，大小写敏感。

官网说明：

Prop - Vue.js

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        先遍历，把遍历到的值绑定给组件模板里的值-->
<!--        注意：此处大小写不敏感！！-->
        <lol v-for="item in message" v-bind:tovue="item"></lol>
    </div>
    <script>
        Vue.component('lol',{
            props:['tovue'],//声明通过”什么“来获取值
            template:'<li>{{tovue}}</li>'//进行输出
        })
        var vm = new Vue({
            el:'#app',
            data:{
                message:['Java','Python','C++']
            }
        })
    </script>
</body>
</html>

六、Axios

由于Vue只关注视图层，所以我们需要一个工具来与外部通信，曾经官方有过“vue-resource”，但后来被弃用，并推荐了Axios。

前端猿就是通过这个来向我们后端猿写的接口请求数据。

官网：

axios中文网|axios API 中文文档

CDN导包：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <span>{{info.name}}</span>
        <br>
        <span>{{info.age}}</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {//与数据的格式必须相同
                    info:{
                        name:null,
                        age:null
                    }
                }
            },
            mounted(){
                axios.get('data.json').then(response=>(this.info = response.data))
            }
        })
    </script>

</body>
</html>

data.json

{
  "name": "lol",
  "age": 1234
}

七、计算属性

这是啥？

简单来说，就是“缓存”。第一次访问时，通过调用函数，将属性计算出来并展示，然后会将属性储存到内存中，再次访问时，会直接从内存中取出属性进行展示，节省资源。但是要注意，“缓存”、“缓存”，如果该属性发生了变动，那么需要重新调用函数进行计算，并储存到内存中。

官网：

计算属性和侦听器 - Vue.js

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        调用方法-->
        <span>{{computenow2()}}</span>
<!--        调用属性-->
        <span>{{computenow}}</span>
    </div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"hello"
        },
        methods:{
            computenow2:function () {
                return Date.now();
            }
        },
        computed:{
            computenow:function () {
                this.message;//如果改变这个值，会重新计算
                return Date.now();
            }
        }
    })
</script>

</body>
</html>

子夕听雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后端学前端：Vue学习总结（二）

后端学前端：Vue学习总结（二）Tags: Vue四、双向绑定指令：v-model作用：用在,和上，实现双向绑定官网：表单输入绑定 - Vue.js注意：v-model 会忽略所有表单元素的 value、checked、selected。 attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。...
复制链接

扫一扫