vuejs深入浅出—基础篇

前端开发 作者: 2024-08-21 05:30:01
一、从HelloWorld说起 任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: 二、常用指令 v-x的使用 1.v-if/v-else 移除或插入DOM; 2.v-sh

一、从HelloWorld说起

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="demo">

{{hello}}

</div>

<script>

 new Vue({

 el:'#demo',data:{hello:'hello world!'}

 });

</script>

二、常用指令 v-x的使用

三、模板渲染

四、计算属性 & Methods

<div id="example">

  {{ message.split('').reverse().join('') }}

</div>
<div id="example">

  <p>Original message: "{{ message }}"</p>

  <p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

<script>

var vm = new Vue({

  el: '#example',data: {

    message: 'Hello'

  },computed: {

    reversedMessage: function () {

      return this.message.split('').reverse().join('')

    }

  }

});

</script>
<div id="example">

  <p>Original message: "{{ message }}"</p>

  <p>Computed reversed message: "{{ reversedMessage() }}"</p>

</div>

<script>

var vm = new Vue({

  el: '#example',methods: {

    reversedMessage: function () {

      return this.message.split('').reverse().join('')

    }

  }

});

</script>

五、过滤器

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65922.html