vue的基础语法介绍

最新推荐文章于 2024-10-13 17:01:31 发布

原创最新推荐文章于 2024-10-13 17:01:31 发布 · 216 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了Vue.js的基础语法，包括v-html用于设置元素内容，v-show通过改变display属性控制显示，v-if条件渲染，v-for进行列表遍历，v-model实现双向数据绑定，以及v-bind和v-on:click(@click)用于事件监听和数据绑定。

v-html命令

<div id="app" >
 <p v-html="msg"></p>
</div>
<script>
new Vue({
  el:"#app",//代表vue的范围
  data:{
    msg:'<h1>你好，世界</h1>' //这里就不会是文本了 而是会被当成是html标签了
  }
})
</script>

v-show

根据值的真假控制元素的display的属性

<div id="app">
 <p v-show="msg"> 可以看到啊 </p>
 <p v-show="msg1"> 不可以看到啊 </p> 
</div>

<script>
new Vue({
  el:"#app",
  data:{
    msg:true,
    msg1:false
  }
})
</script>

v-if

<div id="app">
 <p v-if="msg"> 可以看到啊 </p>
 <p v-if="msg1"> 不可以看到啊 </p> 
</div>

<script>
new Vue({
  el:"#app",
  data:{
    msg:true,
    msg1:false
  }
})
</script>

注意：v-if 为false时，元素不会被渲染；而v-show为false时元素被渲染，只是在元素上增加了display:none样式进行隐藏

v-for

 <div id="app">
   <ol>
       <li v-for="module in modules">{{module.msg}}</li>
   </ol>
</div>

<script>
new Vue({
   el:"#app",
   data:{
       modules:[
           {msg:'第一个'},
           {msg:'第二个'},
           {msg:'第三个'},
           {msg:'第四个'}
       ]
   }
})
</script>

v-model

双向数据绑定

div id="app">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>

<scirpt>
new Vue({
    el:"#app",
    data:{
        msg:''
    }
})
</scirpt>

v-bind

绑定数据

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

v-on:click||@click

<div id="app">
<button v-on:clikc="clickHead">事件</button>
<button @click="clickHead">事件</button>
</div>

<script>
new Vue({
  el:"#app",
  methods:{
    clickHead:functoin(){
      alert('vue的事件绑定')
     }

  }
})
</script>