VUE入门学习

2021-03-07 17:58:55 作者：互联网

一、vue入门学习前准备

1、安装vue.js插件

当安装插件后无法new一个vue component文件时，需要进行配置

此时就可以new了，如下图

2、学习vue的入门demo

①、新建一个html，如下图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
{{message}}
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var vu=new Vue({
        el: "#app",
        data:{
            message: "hello,vue!!"
        }
    })
</script>
</body>
</html>

②、直接浏览器打开该html,message内容直接展示在div中

③、鼠标悬停查看动态绑定的提示信息！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <div>
        <span v-bind:title="message">
            鼠标悬停查看动态绑定的提示信息
        </span>

    </div>
</div>


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var vu = new Vue({
        el: "#app",
        data: {
            message: "hello,vue!!"
        }
    })
</script>
</body>
</html>

效果如右图

④、vue中的if判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-if="flag">yes</h1>
    <h1 v-else>No</h1>
    <br>
    <h2 v-if="status==1">等于1</h2>
    <h2 v-else-if="status==2">等于2</h2>
    <h2 v-else>等于其他</h2>
</div>


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var vu = new Vue({
        el: "#app",
        data: {
            flag: false,
            status: "2"
        }
    })
</script>
</body>
</html>

运行结果如右图

⑤、VUE的for循环使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <li v-for="list in lists">
        {{list.title}}
    </li>

</div>


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var vu = new Vue({
        el: "#app",
        data: {
                lists: [
                    {title: "我爱学java"},
                    {title: "我爱学VUE"}
                ]
        }
    })
</script>
</body>
</html>

运行后结果如右图

⑥、vue的事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="clicks">
        vue事件绑定
    </button>

</div>


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var vu = new Vue({
        el: "#app",
        data: {
            tite: "学习vue!!!"
        },
        methods: {
            clicks: function(event){
               alert("我要"+this.tite)
            }
    }
    })
</script>
</body>
</html>

运行结果如右图

标签：el,VUE,入门,Title,app,学习,vue,vu,new
来源： https://blog.csdn.net/duochirou/article/details/114449005