Vue

1.使用Vue

2.Vue基本语法

3.逐个突破

1.data的应用

2.methods的应用

3.vue组件

4.mounted()的使用

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:{}好像不能同时存在

双向绑定

axios

相关阅读:
短期通过PMP考试？
通过配置文件方式配置包含thymeleaf的SpringMVC开发环境
 TCP三次握手和四次挥手
 四足机器人软件架构现状分析
 服务器遭受攻击之后的常见思路
 Java面试题汇总（持续更新.....）
【Vue面试题二十八】、vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
【附源码】Python计算机毕业设计七七美食汇
 2021中国科学院文献情报中心期刊分区表计算机（2）
33基于MATLAB的对RGB图像实现中值滤波，均值滤波，维纳滤波。程序已通过调试，可直接运行。
原文地址：https://blog.csdn.net/weixin_52972575/article/details/125338436