vue-01

最新推荐文章于 2024-08-22 16:04:37 发布

小陈日记

最新推荐文章于 2024-08-22 16:04:37 发布

阅读量471

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_50780442/article/details/122848471

版权

本文介绍了如何在IntelliJ IDEA中配置Vue.js环境，并通过一系列基础示例，如创建第一个Vue程序、数据绑定、条件渲染、循环、事件处理、组件化等，深入学习Vue.js的核心概念。此外，还涉及到Vue组件的使用和数据传递。文章以2.4.4版本的Vue.js为例，展示了在实际开发中的应用。

摘要由CSDN通过智能技术生成

学习前端，狂神的vue整合没有发布，自己大概整理一下

使用idea

前面巴拉巴拉就不写啦，自己去看看狂神的视频

第一个vue程序

首先要在idea中安装vue，file-setting-Plugins里面搜索Vue

然后安装，在new的地方可以看到这个

看不到的话自己去新建一下

把上面的代码复制到新建的Vue Component里就行了

新建一个html（demo1）

使用在线的cdn导入vue，版本好像有要求，我一开始使用了3.+的版本打开页面后不能正常显示

把版本降低后就可以了

在线的cdn

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

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

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

<script>
    let vm =new Vue({         //新建Vue
        el:"#app",            //绑定一个？？
        data:{                //数据
            message : "hellovue"
        }
    });
</script>
</body>

在网页中通过控制台可以动态的（不需要刷新页面）改变其元素的值

MVVM：和MVC模型一样，每层都是分开的，Model，View，ViewModel

Vue是MVVM的实现者，他的核心就是实现了 DOM监听与数据绑定

基本语法：官网就有例子：Vue.js 介绍 — Vue.js 中文文档

v-bind 绑定对象

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

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

<script>
    let vm =new Vue({         //新建Vue
        el:"#app",            //绑定一个？？
        data:{                //数据
            message : "hello vue"
        }
    });
</script>

if-else

<div id="app">
    <h1 v-if="message==='A'">A</h1>
    <h1 v-else>B</h1>
</div>

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

<script>
    let vm =new Vue({         //新建Vue
        el:"#app",            //绑定
        data:{                //数据
            message : "A"
        }
    });
</script>

for

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

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

<script>
    let vm =new Vue({         //新建Vue
        el:"#app",            //绑定一个？？
        data:{                //数据
            items: [
                //1,2,3
                {message : "陈东1"},
                {message : "陈东2"},
                {message : "陈东3"}
                ]
        }
    });
</script>

v-on :绑定事件

<div id="app">
    <button v-on:click="sayHi">click Me</button>
</div>

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

<script>
    let vm =new Vue({         //新建Vue
        el:"#app",            //绑定一个？？
        data:{
            message : "陈东来了"
        },               //数据
        methods: {             //事件必须定义在 methods 中
            sayHi : function (){
                alert(this.message)
            }
        }
    });
</script>

v-model 实现双向绑定：

<div id="app">
    输入框<input type="text" v-model="message"> {{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>

<script>
    let vm =new Vue({
        el:"#app",
        data:{
            message : "123"
        }

    });
</script>

<div id="app">
    单选框:
    <input type="radio" name="sex" value="男" v-model="message">男
    <input type="radio" name="sex" value="女" v-model="message">女<br>
    选择了：{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>

<script>
    let vm =new Vue({
        el:"#app",
        data:{
            message : ""
        }

    });
</script>

<div id="app">
    下拉框:
    <select v-model="message">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select><br>
    选择了：{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>

<script>
    let vm =new Vue({
        el:"#app",
        data:{
            message : ""              //可以在这里设置初始值
        }

    });
</script>

组件 Vue.component()

<div id="app">
    <chendong></chendong>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>

    Vue.component("chendong",{            //第一个参数是组件的名字
       template: "<li>Hello</li>"
    })

    let vm =new Vue({
        el:"#app",
        data:{
            message : ""              //可以在这里设置初始值
        }
    });
</script>

在组件中遍历数组：（我不是很理解，注释说得到现在能看懂一点了，以后看不懂在回来）

<div id="app">
    <chendong v-for="item in message" v-bind:chen="item"></chendong> //将chen绑定到循环出的结果上，chen将作为参数传递给模板
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>

    Vue.component("chendong",{            //第一个参数是组件的名字
        props :['chen'],                  //模板中的参数使用props传递
        template: "<li>{{chen}}</li>"
    })

    let vm =new Vue({
        el:"#app",
        data:{
            message : ["A","B","C"]              //可以在这里设置初始值
        }
    });
</script>

小陈日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-01

学习前端，狂神的vue整合没有发布，自己大概整理一下使用idea前面巴拉巴拉就不写啦，自己去看看狂神的视频第一个vue程序首先要在idea中安装vue，file-setting-Plugins里面搜索Vue然后安装，在new的地方可以看到这个看不到的话自己去新建一下把上面的代码复制到新建的Vue Component里就行了新建一个html（demo1）使用在线的cdn导入vue，版本好像有要求，我一开始使用了3.+的版本打开页面后不能正常显示把版...
复制链接

扫一扫