vue入门|新手村|三分钟掌握基础语法|超级简单的保姆级教程：）

本文链接：https://blog.csdn.net/qq_37506940/article/details/119681326

文章目录

一. Vue安装：
二.Vue基本使用

一. Vue安装：

vue可以写在HTML中，可以在中使用：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

来导入vue.js
或者到官网下载并导入vue.js包

二.Vue基本使用

创建一个vue实例：

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

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</``script>

自己的理解：vue实例使用el绑定了id为‘app’的div，使用data来存放变量。使得data内的message变量可以直接使用{{message}}的方式来在网页上显示。

{{ }}可以将data中的数据取出并显示到网页上

使用if-else

使用v-if ，v-else-if，v-else来实现判断选择

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

  <script>
var vm =new Vue({
el:"#app",
data:{
    type:  'A'
  
}

});

        </script>

数组

var vm =new Vue({
el:"#app",
data:{
 items: ["java","linux","前端"]  //items可以实现数组，没有规定类型
}


});

实现循环

vue可以实现数组items，使用v-for来将items中的值取出并放入到item中，并用{{item.message}}取出每个message的值。

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

    <script>
var vm =new Vue({
el:"#app",
data:{
    
    items:[
        {message:"我爱vue"},
        {message:"我更爱React（狗头）"}
    ]    
}
});

        </script>

实现函数

绑定函数前要使用v-on，click来绑定一个处理点击事件的函数。类似于js中的onclick

 <button v-on:click="Hi">click me</button>

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

},
methods:{//方法必须要定义在Vue的method中,v-on绑定事件
    Hi:function(){
        alert(this.message);
    }
}
});
        </script>