Vue

最新推荐文章于 2024-05-29 00:13:10 发布

无敌的小周

最新推荐文章于 2024-05-29 00:13:10 发布

阅读量189

点赞数

分类专栏：前端框架文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52972575/article/details/125338436

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.使用Vue

下载Vue.js插件

引入CDN

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

2.Vue基本语法

Vue的用法是创建一个Vue对象，将该对象与前端某个元素绑定，通过操作这个Vue对象，让该元素实现动态效果。

vue对象的结构
Vue.component("",{});      //创建组件

var v = new Vue({
        el: '',            //vue对象绑定的元素id
        data: {},          //vue对象具备的属性
        methods: {},       //vue对象的方法，不利用缓存
        computed: {},      //计算属性，利用缓存
        watch: {},         //侦听器
        data(){},
        mounted(){}
    })
vue中的指令
逻辑判断

v-if

v-else-if
v-else

v-for
方法相关
v-on

属性相关

v-bind
v-model

3.逐个突破

data的应用

1.el+data
<body>
<div id="box">
    {{message}}
    {{items[0].message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        data: {
            message: "I am a box",
            items: [{message: 1},{message: 2},{message: 3}]
        }
    })
</script>
</body>
el将该vue对象与div绑定，定义了data中的一个message属性，在视图中通过{{}}来调用。

【】表示数组，{}表示对象。

2.v-bind+data
<body>
<div id="box">
    <span v-bind:title="message">Hi</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        data: {
            message: "I am a box",
        }
    })
</script>
</body>
效果：鼠标指向Hi时，出现I am a box。

v-bind为HTML元素绑定属性，被v-bind绑定后不再将message认为是字符串，而认为是变量，取值为"I am a box"

3.v-if,v-else-if,v-else和data
<body>
<div id="box">
    <h1 v-if="judge1">judge1值为true</h1>
    <h1 v-else-if="judge2">judge2值为true</h1>
    <h1 v-else>我是v-else</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        data: {
            judge1: false,
            judge2: true
        }
    })
</script>
</body>
judge1值为false，judge2的值为true，所以页面显示judge2值为true这段文字。

4.v-for和data
<body>
<div id="box">
    <h1 v-for="(item,index) in items">
        {{index}}:{{item}}
    </h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        data: {
            items: ["one","two","three"]
        }
    })
</script>
</body>
循环的次数为items元素的数量，item表示数组每个元素，index为当前数组元素下标。

5.v-model和data
<body>
<div id="box">
    <input type="text" v-model="text">
    <input type="text" v-bind:value="text">
    {{text}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        data: {
            text: "1",
        }
    })
</script>
</body>
v-model与text进行双向绑定，当在输入框输入值时，该值会赋值给属性text，{{}}再从属性取值，两者的值会保持同步。即view改变model属性的值，model再改变view的显示。

v-bind只能从model中取值
<body>
<div id="box">
    <select v-model="select">
        <option selected value="" disabled>请选择</option>
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
    选择了：{{select}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        data: {
            select: ''
        }
    })
</script>
</body>
v-model将该元素与model层的select属性进行了双向绑定。

通过点击不同的option改变select的值，进而改变model中的select属性的值，进而改变{{select}}的值。

methods的应用

v-on和methods

<body>
<div id="box">
    <button v-on:click="sayHi">click</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        methods: {
            sayHi: function (event) {
                alert("hi");
            }
        }
    })
</script>
</body>

点击按钮，执行方法sayHi方法，除了click事件，还有很多其他事件。

methods中的函数有返回值

<body>
<div id="box">
    {{currentTime()}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        methods: {
            currentTime: function () {
                return Date.now();
            }
        }
    });
</script>
</body>

通过事件触发时，函数名不需要带（），直接调用函数时需要有（）

vue组件

<body>
<div id="box">
    /*
        使用v-bind，首先将item当作了变量，item为model中的items中取到的值
        item的值即为属性name的值，props中的属性有了值后可以在模板中使用
    */
    <Component v-for="item in items" v-bind:name="item"></Component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("Component",{         //自定义组件的标签名
        props: ['name'],                //自定义组件的属性名
        template: '<li>{{name}}</li>'   //自定义组件的模板，即引用该标签展示的内容
    })

    var v = new Vue({
        el: '#box',
        data: {
            items: [1,2,3]
        }
    });
</script>
</body>

mounted()的使用

创建文件data.json

{
  "name": "zz",
  "address": {"street": "zz", "city": "zz"}
}

发送请求

<body>
<div id="box"></div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        mounted() {
          axios.get('/demo1/data.json').then(response=>(console.log(response.data)));
        }
    });
</script>
</body>

=>是链式编程为ES6的特性，需要编译器的JS支持该特性。

将返回的数据显示到页面上

<body>
<div id="box">
    {{info}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var v = new Vue({
        el: '#box',
        data(){
            return{
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null
                    }
                }
            }
        },
        mounted() {
          axios.get('/demo1/data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>

data()与data:{}好像不能同时存在