vue使用教程

最新推荐文章于 2022-10-26 17:50:28 发布

芒果oo

最新推荐文章于 2022-10-26 17:50:28 发布

阅读量136

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_57580977/article/details/120334011

版权

vue是一个mvvm框架，model变化时，浏览器显示的内容也会变化

准备工作：vue压缩包cdn： https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js

下载vue插件：plugins-->搜索vue.js,若搜不到settings—>update—>点击auto自动扫描

1、第一个vue程序

<body>
<!--接受绑定view-->
<div id="div">{{message}}</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 要绑定的数据 viewModel
    var vm = new Vue({
        el:"#div",
        data:{
            message:"hello ,vue",
        }
    });
</script>
</body>

2、v-bind绑定

<body>
<div id="div">
    <span v-bind:title="message">这是一个标题</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#div",
        data:{
            message:"hello ,vue",
        }
    });
</script>
</body>

3、v-if，v-else-if，v-else逻辑判断

<body>
<div id="div">
    <p v-if="message">yes</p>
    <p v-else>no</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#div",
        data:{
            message:true,
        }
    });
</script>
</body>

<body>
<div id="div">
    <p v-if="message==='a'">yes</p>
    <p v-else-if="message==='b'">bbbb</p>
    <p v-else>no</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#div",
        data:{
            message:"b",
        }
    });
</script>
</body>

4、v-for遍历循环

<body>
<div id="div">
   <p v-for="(i,index) in items">
<!--       index是vue自带的属性会输出0,1,2-->
       {{i.message}}---{{index}}
   </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#div",
        data:{
            // 数组用[],对象用{}，这里items是数组，message是key-value值
            items:[
                {message:"哈哈哈"},
                {message:"嘻嘻嘻"},
                {message:"哦哦哦"}
            ]
        }
    });
</script>
</body>

5、v-model双向绑定

<body>
<div id="app">
     姓名：
        <input type="text" v-model="message" value="hello">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>
</body>

<body>
<!--绑定多选框-->
<div id="app">
    <select v-model="message">
        <option value="" disabled>请选择</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>
</body>

组件

1、简单定义

<body>
<!--Vue.component定义一个组件
    xuchun组件的名字
    template组件的模板
-->
<div id="app">
    <xuchun></xuchun>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component("xuchun",{
        template: "<h1>hello</h1>"
    });

    var vm=new Vue({
        el:"#app"
    });
</script>
</body>

2、定义组件遍历数据

<body>
<div id="app">
    <xuchun v-for="i in item" v-bind:xu="i"></xuchun>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component("xuchun",{
        props:["xu"],//刚才遍历不出来，一定要注意加引号
          template: "<h1>{{xu}}</h1>",
    });

    var vm=new Vue({
        el:"#app",
        data:{
            item:["javascript","前端","后端"],
        }
    });
</script>
</body>

3、第一个Axios应用程序

axios地址：https://unpkg.com/axios/dist/axios.min.js

data.json文件

{
  "name": "xuchun",
  "adress": {
    "country":"中国",
    "city":"上海",
    "home":"河南"
  }
}

代码

<body>
<div id="app">
    <p>{{info.adress}}</p>
    <p>{{info.name}}</p>
    <p>{{info.adress.city}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data(){
          return{
              info:{
                  name: null,
                  adress: {
                      country: null,
                      city: null,
                      home: null,
                  }
              }
          }
        },
        mounted(){//钩子函数
            axios.get("../data.json").then(response=>(this.info=response.data));
        }
    });
</script>
</body>

结果

计算属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <p>{{time01()}}</p>
    <p>{{time02}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            message: "哈哈哈哈",
            },
        methods:{
            time01:function () {
                return Date.now();
            }
        },
        computed:{//计算属性，在不需要经常变动的数据使用
            time02:function () {
                return Date.now();
            }
        }
    });
</script>
</body>